Superpowers of browser's Web API
summary
Claim: JavaScript bundle size is the biggest loading bottleneck, and shaving it changes Web Vitals. Examples: code-splitting yields a 100 Lighthouse score on a demo page by splitting one bundle into component chunks; a ~30-line intersection-observer hook replaces a library; a tiny 6KB alternative beats heavier deps. Concrete tools and patterns shown: component-based lazy loading, useSWR prefetch on hover with mutate-backed cache, ProImage progressive placeholder for blurred-to-full images, service-worker caching strategies, and Edge/Next/Remix/Astro approaches.
AI-written summary · about
chapters (15)
- 0:00Welcome
- 1:21Web performance matters
- 3:53JavaScript bottleneck
- 7:03Lazy loading components
- 10:16Web APIs vs libraries
- 11:42Image optimization
- 13:46Progressive image loading
- 14:50Data fetching strategies
- 15:54Prefetching data
- 17:42HTTP caching headers
- 19:08Service workers & storage
- 20:36Server-side rendering and hydration
- 21:40Edge computing
- 22:02Zero-kB frameworks
- 23:04Best performance hack
related talks
24mSuperpowers of browser's Web API
37mSecret Shortcuts of Loading Web Performance
26mWeb Performance in modern JavaScript world
41mHow we make Web Apps lightning fast at Microsoft!
38mSecret Shortcuts of Loading Web Performance
21mEvolution of Web Performance
28mDecoding JavaScript: Loading Performance —
21mMonsters of Web Performance