Lazy, but Fast: How Taking It Slow Can Speed Up Your App!
summary
Live demo builds a small Angular app and shows concrete wins: replace eager routes with lazy loading routes and a defer block to cut main.js from ~30.33 KB to ~4.39 KB (over 70% smaller), use ng-optimized-image with fetchPriority for LCP images, and enable partial hydration via Angular SSR so a bottom section hydrates on viewport. Lighthouse climbs from about 58 to nearly double after these changes, and the demo chunks load as expected.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 1:06Why laziness speeds up web performance
- 3:34Four key performance techniques
- 6:02Optimizing images with ngOptimizedImage
- 7:50Lazy loading routes
- 12:25Deferring non-essential components
- 17:30How hydration makes SSR apps interactive
- 21:28Incremental hydration
- 25:08Live demo setup
- 30:27Initial performance baseline
- 33:41Postponing expanded movie details
- 35:53Applying lazy loading to routes
- 37:18Implementing incremental hydration
- 39:53Final performance improvements
- 40:38Summary
- 41:00Q&A
related talks
40mOptimized Angular Apps: Smaller, Faster, Better
01h 01mPerformant Angular Applications
17mRethinking Angular Architecture & Performance
20mTools for Fast Angular Applications
32mProfiling Bootstrap Performance of Angular Apps
40mNon-trivial optimization techniques in Angular
22mBuilding Fast Angular Applications from End
31mOptimized Angular apps: smaller, faster, better