Saving the Web 16 Milliseconds at a Time
summary
Claims concrete fixes: aim for 16.66ms per frame to hit 60fps, measure input latency (an ambulance tablet with 250ms device input delay ruins adoption), and prefer opacity and transform to avoid layout/paint. Tools and tradeoffs are explicit: use profiling, React memo, will-change, sprites instead of many JS-driven particles, and move heavy math or drawing to web workers and OffscreenCanvas. Examples include a performant accordion, a sprite-based like animation, and a canvas synth that works once moved off the main thread.
AI-written summary · about
chapters (17)
- 0:00Introduction
- 0:38Performance
- 1:09Saving the Web
- 1:32Historical Context
- 2:49People are not patient
- 3:46Interactions
- 4:36Case Study
- 6:31How do we fix this
- 8:00What about animations
- 8:36How big are mobile apps
- 10:26Relevance
- 12:34Animation
- 16:35Building a Better Accordion
- 18:07Code
- 22:59Fake Twitter
- 28:30Tinker Synth
- 31:28Conclusion
