Non-trivial optimization techniques in Angular

on YouTube ↗40m

" summary

Angular site performance goes from Lighthouse ~49 to 99 (Cloudflare variant 100) by applying concrete fixes: enable SSR one-line hydration and TransferState to avoid duplicate fetches, use NGOptimizedImage + fetchpriority and preconnect for responsive images, debug srcset with the provided Chrome script, preload route data with app initializers, add content-visibility cut render 160ms→25ms, chunk bootstrap work via scheduling/Zone flags, and swap to an RX Angular virtual-scroll that is 16× faster. All changes are open source and measured.

AI-written summary · about

" chapters (16)

1. 0:00Introduction and setup
2. 0:26Angular performance overview
3. 3:39Largest Contentful Paint optimizations
4. 8:16SSR and ISR techniques
5. 8:57Image optimization with NG OptimizedImage
6. 13:45Debugging responsive images
7. 21:37Preloading data for faster rendering
8. 24:50CSS content visibility for performance
9. 26:13Input (INP) in Angular
10. 27:17Optimizing Angular bootstrap time
11. 29:00Zone.js optimizations
12. 30:50Fine-grained change detection
13. 31:56Task prioritization for smooth UX
14. 36:12DOM rendering order control
15. 36:56Virtual scrolling performance
16. 37:59Summary and resources

" related talks

• 17mRethinking Angular Architecture & PerformanceMark Pieszak · NG Poland 2020
• 32mProfiling Bootstrap Performance of Angular AppsJeff Cross · ngAtlanta 2019
• 45mOptimized Angular apps: smaller, faster, betterMaxim Salnikov · Jfokus 2019
• 23mPerformance optimizations in AngularMert Değirmenci · AngularConnect 2019
• 31mOptimized Angular apps: smaller, faster, betterMaxim Salnikov · Amsterdam JSNation Conference 2018
• 28mAccelerating AngularSimona Cotin · JSDayIE 2023
• 31mAngular Performance: Your App at the Speed of LightChristian Liebel · NG-DE Conference 2019
• 40mOptimized Angular Apps: Smaller, Faster, BetterMaxim Salnikov · iJS 2018