Love your cache: Optimize for the second load
summary
Claim: sensible default is don't cache by default and validate via ETags (Cache-Control: max-age=0, must-revalidate, public) while using a CDN. Implementation details: Netlify and Google 5s hosting support this; build tools include Webpack/Rollup/Parcel and Tooling.report; Eleventy + nunjucks injects query-string hashes for immutable hashed assets and web.dev splits lit-element/lit-html into a separate bundle so those large deps stay cached. Service worker uses network-first for freshness; web.dev/live initially broke from aggressive caching but is now fixed.
AI-written summary · about
chapters (20)
- 0:00Intro
- 0:412nd Load Goals
- 1:11Extreme options
- 1:32Case Study: web.dev
- 3:06Some guidance focuses on
- 3:25Web Vitals considers all loads
- 4:46Developer Goals
- 6:09Real-World for End-Users
- 6:56No Caching Rules
- 10:00Validation via Headers
- 13:08Downsides
- 14:05Immutable Progression
- 14:42Cache-Control
- 16:23Middle Ground
- 20:29Query String vs Filename
- 23:21Concrete Tooling
- 24:11Service Worker Well-Lit Path
- 25:01Cache First
- 25:20Most reload UX is poor
- 27:40Optimizing the 2nd load
related talks
25mCaching strategies on https://dev.to
36mCaching strategies and their performance footprint
24mCache for Commerce Performance and Optimization for High Volume Sales
51mJAMstack: Silly name, serious stuff
15mDon't Go South With Next.js Caching – Supercharging Performance
23mCacheCatalyst: Enhancing Web Caching for the Latency-Constrained Internet
47mCaching strategies on https://dev.to
36mNuxt, Storyblok & Netlify