Performant Angular Applications
summary
Demo app shows a blocking Fibonacci calc inside a non-lazy module that makes the home page wait; converting it to lazy-loaded feature modules isolates that CPU work. Uses source-map-explorer and Coverage to find unused code, replaces oversized images (page was 37.7 MB) and a 18 MB GIF with optimized assets and an MP4, and serves format/quality automatically via Cloudinary f_auto,q_auto. Lighthouse score rises from ~38 to 96; images lazy-load into viewport and Network Information API disables autoplay on slow connections.
AI-written summary · about
chapters (13)
- 0:00Introduction and setup
- 2:28Why web performance matters
- 8:28Measuring and testing performance
- 15:57Optimizing Angular applications
- 17:41Demo: Slow Angular app
- 27:58Demo: Fast Angular app
- 33:01Removing unused code
- 39:27Optimizing media assets
- 48:02Preloading fonts and lazy loading
- 53:43Adapting to network conditions
- 57:36Unused code coverage tool
- 58:41Final Lighthouse results
- 59:25Q&A and resources
related talks
42mLazy, but Fast: How Taking It Slow Can Speed Up Your App!
45mLazy Loading: Supercharge your Angular apps!
40mOptimizing an Angular application
31mMobile-friendly web apps with Angular
32mProfiling Bootstrap Performance of Angular Apps
24mSuperpowers of browser's Web API
22mBuilding Fast Angular Applications from End
16mDear non-performant app