Image Optimization Best Practices with Angular
summary
Chrome Aurora and Angular add a new image directive that lazy loads non‑critical images, accepts a priority flag plus manual preconnect hints, and plugs into built‑in loaders like the imagex loader which flips on auto=format to serve AVIF. Lands' End QA reports a 40% median LCP improvement on mobile and 75% on desktop; a demo app drops median LCP from 4.6s to 1.6s (~65% faster) by adding rawSrcset, sizes, eager priority, and CDN format negotiation.
AI-written summary · about
chapters (10)
- 0:00Start
- 13:35Request and download scripts
- 14:08LCP image downloaded
- 14:24Starting waterfall
- 14:53resource contention
- 15:11resource load delay
- 15:25resource load time
- 16:00Directive: lazy loads by default
- 17:49After: preconnect and priority hints
- 19:38After: using modern image formats
related talks
22mImage Optimization Best Practices with Angular
40mNon-trivial optimization techniques in Angular
27mAngular Performance and Core Web Vitals in 2024
27mAngular Renaissance
30mHow to use Nuxt.js and Chrome
28mAccelerating Angular
26mFast and Beautiful Modern Image Delivery Techniques
30mFast and Beautiful: Modern Image Delivery Techniques