Secret Shortcuts of Loading Web Performance
summary
JavaScript is named the main bottleneck and the demo shows concrete fixes: gzip/brotli, tree‑shaking, bundle analysis with BundlePhobia and import‑cost, and replacing Moment after BundlePhobia flags it as large. A routed app recovers to 100% Lighthouse performance after component-level code splitting using dynamic import plus an IntersectionObserver “useVisible” hook. Images use a progressive low‑quality placeholder pattern. Data prefetching uses SWR on link hover, service workers control cache, and Astro/Qwik enable near zero‑KB initial JS.
AI-written summary · about
chapters (16)
- 0:00Web performance introduction
- 1:06Why performance matters
- 3:14Speaker and JavaScript bottleneck
- 5:01Tools for JavaScript bundle size
- 6:29Code splitting techniques
- 7:54Component-based splitting with visibility hook
- 9:21Image optimization with modern formats
- 11:25Progressive image loading
- 12:54API data fetching with GraphQL
- 15:00Prefetching with useSWR
- 16:27HTTP caching strategies
- 17:32Service workers for caching
- 18:59SSR and hydration in frameworks
- 20:25Edge computing for latency
- 21:08Zero JavaScript frameworks
- 21:51Performance hacks and advice
related talks
38mSecret Shortcuts of Loading Web Performance
24mSuperpowers of browser's Web API
24mSuperpowers of browser's Web API
26mWeb Performance in modern JavaScript world
28mDecoding JavaScript: Loading Performance —
39mFrom make it work to make it fast: quick wins to boost your application
28mFantastic Frontend Performance Tricks & Why We Do Them
21mEvolution of Web Performance