How to build an adaptive web app
summary
Shows how to measure real user data (RUM) instead of trusting Lighthouse, then adapt the app by switching assets and behavior: use deviceMemory API and hardwareConcurrency to reduce heavy 3D models or web workers on low‑end devices, use the Network Information API and prefers‑reduced‑data to serve images instead of video (demo switches video to a low‑res image on 3G), use container queries, AVIF/WebP with JPEG fallback, Cloudinary/Next.js image component or Sharp, offscreen canvas feature‑detecting and progressive enhancement to keep core UX working.
AI-written summary · about
chapters (9)
- 0:00Introduction and background
- 1:25Performance measurement basics
- 3:31Adaptive vs least condition approach
- 5:15Adapting to screen sizes
- 8:30Browser support and graceful degradation
- 12:03User preferences and accessibility
- 15:33Device CPU and RAM considerations
- 21:31Internet connection adaptation
- 27:30Recap and resources
related talks
37mAdaptive Images for Responsive Web Design
45mMuddling Through the Mobile Web
35mImprove Your Web Application Using Progressive Web Metrics
24mSuperpowers of browser's Web API
39mFrom make it work to make it fast: quick wins to boost your application
58mNew Adventures in Responsive Web Design
26mFast and Beautiful Modern Image Delivery Techniques
49mUX Patterns for Web Developers