Improving Media Content Performance with Service Workers
summary
Service workers intercept fetch requests to resize and serve lower-dimension images and video when network or device signals indicate trouble, cutting bytes and memory use — demo shows a 248KB image served as ~6KB under 2G emulation. Code uses the fetch event, navigator.connection effectiveType, Save-Data client hint and deviceMemory checks, and can return range responses for progressive loads. Implementations (Flipkart, housing.com) report higher conversion and lower bounce.
AI-written summary · about
chapters (13)
- 0:00Introduction and context
- 1:25Why service workers matter
- 7:08Web performance challenges
- 9:15What service workers do
- 12:47Setting up a service worker
- 15:18Optimizing media with service workers
- 19:36Reducing image bytes effectively
- 24:20Live demo of service worker
- 27:17Progressive images and range requests
- 30:31Real-world service worker results
- 32:20Browser support and adoption
- 33:22Optimizing for all users
- 34:26Q&A session
related talks
37mUsing Service Workers to improve dynamic image delivery in the browser
32mThe ServiceWorker is coming, look busy
25mDelivering Fast and Beautiful Images and Video
45mThe perfect Service Worker. How to design it?
50mNow THAT'S What I Call Service Worker!
27mAnd Now You Understand Service Workers
39mProgressive what apps
30mBuilding Faster, More Resilient Apps with Service Worker: A Caching Strategy Deep Dive