Secret Shortcuts of Loading Web Performance
summary
Demonstrates concrete wins in React: dynamic import and component-based lazy loading offload a heavy third section into its own chunk so initial bundle size and Lighthouse blocking drop, a custom useVisible hook uses IntersectionObserver to trigger load on scroll, and progressive image loading swaps a low‑quality placeholder for a high‑res image on onload. Data prefetch uses SWR prefetch-on-hover to populate cache so pages render instantly. Mentions bundlephobia, import‑cost, service workers, Next/Remix/Qwik and measurable score and network improvements.
AI-written summary · about
chapters (16)
- 0:00Web performance introduction
- 2:28Why performance matters
- 4:13Core Web Vitals basics
- 8:06JavaScript bottlenecks
- 11:19Lighthouse detection
- 13:48Lazy loading components
- 16:16Image optimization
- 18:06Progressive image loading
- 21:18GraphQL prefetching
- 23:29Prefetching data
- 24:51Caching strategies
- 27:25Service worker caching
- 28:50Server-side rendering and progressive hydration
- 30:17Zero-kB frameworks
- 33:11Web performance impact
- 36:03Conclusion
related talks
37mSecret Shortcuts of Loading Web Performance
24mSuperpowers of browser's Web API
24mOptimising React’s TTI
24mSuperpowers of browser's Web API
16mThe Evolution of Web Performance
26mWeb Performance in modern JavaScript world
32mPractical Performance Tips Building Progressive Web Apps
39mFrom make it work to make it fast: quick wins to boost your application