Caching strategies and their performance footprint
summary
Service Worker plus Cache API become a planned layer that controls network vs storage tradeoffs: use Chrome DevTools (Application → Clear storage) to measure cache growth (example homepage ~150KB, full site ~1.4MB), categorize assets (navigation icons inline, branding pre-cached, decorative runtime cached with maxEntries/maxAge, informative served with a fallback), and version files so updates propagate. Workbox is used for common handlers and mixing strategies like cache-first, network-first, stale-while-revalidate to balance speed, freshness and storage.
AI-written summary · about
chapters (15)
- 0:00Introduction
- 5:10Caching out of the box
- 9:53Have a plan
- 16:44Be selective
- 16:59When to cache
- 18:54Differences between precaching and versioning
- 21:00Content versioning
- 21:19Content versioning pros and cons
- 22:42Runtime caching
- 24:19Cache files
- 25:02Example
- 26:01Serving
- 30:21Practice
- 32:39Network
- 33:24Summary
related talks
45mThe perfect Service Worker. How to design it?
30mBuilding Faster, More Resilient Apps with Service Worker: A Caching Strategy Deep Dive
47mWeb Caching: Strategies, Pitfalls and Modern Tools
42mHow Do Service Workers Even?
32mThe ServiceWorker is coming, look busy
27mAnd Now You Understand Service Workers
44mOffline first!
28mNever Wait for an API Again: Unlocking CacheStorage for Blazing Speed