Image Optimization Best Practices with Angular
summary
Angular's NG Optimized Image directive (ngSrc) ships in 14.2 preview and targets LCP; real-site lab tests show Lands' End saw ~40% median LCP improvement on mobile and ~75% on desktop. Demo converts img to ngSrc, adds priority (loading=eager + fetchpriority), inserts preconnect, uses provideImagexLoader to get AVIF, and adds sizes/srcset; WebPageTest runs drop median LCP from 7.8s to 2.2s. The talk shows exact console warnings, the waterfall changes, and the specific code and providers to implement each fix.
AI-written summary · about
chapters (10)
- 0:00Intro
- 0:50Why Angular
- 1:25LCP
- 2:12Image Directive
- 4:46Example App
- 12:04Performance Profiling
- 13:07Waterfalls
- 16:16Lazy Loading
- 17:08Loading Attribute
- 20:23Responsive Images
related talks
22mImage Optimization Best Practices with Angular
40mNon-trivial optimization techniques in Angular
27mAngular Performance and Core Web Vitals in 2024
28mAccelerating Angular
20mImage Optimization - Quick Win for Improving Performance in Vue & Nuxt Apps
17mRethinking Angular Architecture & Performance
27mAngular Renaissance
42mLazy, but Fast: How Taking It Slow Can Speed Up Your App!