Love your cache: Optimize for the second load

You've built an amazing site with fast load times, great components, and large (but lazily loaded!) assets. However, when you update or redeploy your site, are your users getting the best experience?
Without careful consideration, existing users might have to download (and parse, and spend effort on) assets that they basically already have in their cache. Learn strategies to minimize the amount of work involved in incremental updates, whether it be for JS, CSS, or larger assets like images.
We look at build systems in the abstract, and present a modern well-lit path for hosting and caching.
Resources:
Love your cache blog post → goo.gle/39HaoZb
Better Living Through Caching (Netlify) → goo.gle/33fs4qs
Avoid chaining critical requests (web.dev) → goo.gle/3fHlsXa
tooling.report → goo.gle/365koca
Periodic Background Sync API → goo.gle/3m5BHQ0
Speaker: Sam Thorogood
Watch all Chrome Developer Summit sessions here → goo.gle/cds20-sessions
Subscribe to Google Chrome Developers here → goo.gle/ChromeDevs
#chromedevsummit #chrome #webdevelopment
event: Chrome Dev Summit 2020; re_ty: Publish; product: Chrome - General; fullname: Sam Thorogood;

[@DenisTRUFFAUT]

1) For Cloud Storage you'd better put hash before the filename to increase throughput. 2) The 3 realms files (index.html, sw.js, worker.js) will probably embed a custom importmap, thus need to be served with a cache-control: no-store. But pro-tip, in sw.js and worker.js, you can just use a single instruction : importScripts / await import of a hashed file, and bam you get best of both worlds : Fresh file, but cached content.

[@abdurrahmandeveci4746]

Ikkjj2jlk

[@MachineYearning]

Thank you so much for this Sam, caching strategy is one of the harder problems I've faced when implementing a service worker for a PWA.

[@tonygentilcore]

Great overview. Only thing I didn't understand was caysh ;)

[@samthorau]

We pronounce it the other way here in Australia. I tried to use both pronunciations just to keep everyone on the level :)

[@jsinnaour]

Yep, cache is a lifesaver! Thanks for awesome videos ♥️

[@thegreengiant]

caysh vs cash

[@diraluke9789]

good dira luke

[@RodyDavis]

Is this a good case to use Snowpack? 🧐

[@berndeckenfels]

Should be mentioned that immutable asset hashes also help with SRI.

[@DanishAlready]

Could you provide code snippet for hashFor in eleventy?

[@andrewrico8321]

woohoo, 11ty.js ....Thumps up

[@mulllhausen]

i was hoping to hear some techniques for pre-caching here. like quickly caching assets for the next page before the user clicks on them so they load instantly. but still it was a good talk

[@demimurych1]

Forgive me if I misunderstood something. 18:00 *About http caching and file name* If I understood correctly, the speaker says that the use of a hash in the file name somehow affects the browser's caching behavior. I understood what the speaker said as - a file with name "filename.css" will not be able to be cached for long. Conversely, the file "filename -34523542.css", on the contrary, will be cached for a long time. *If this is exactly what the speaker wanted to say, then he is wrong* HTTP caching depends only on the HTTP headers. The cache does not depend on the file name. The browser will work the same for file filename.css and file filename-34523542.css. How exactly it will work is determined by the headers: cache -control etag last -modefied expires and so on. And no change in the file name can affect this fact. The exception is when the site uses a service worker who can independently decide how it relates to the response headers.

[@cristianpallares7565]

Check out around 14:35. He mentions that you need to use http headers anyway.

[@samthorau]

Thanks for the feedback, but at about 14:35 I say "but of course, just remaining a file like this doesn't mean anything to the browser", and I explain that you have to set a header.

[@spybot2d]

#holistic lol

[@Human_Evolution-]

I need to see code or else your words are useless.