Angular Performance and Core Web Vitals in 2024
summary
Explains concrete wins: font style matching eliminates font-driven CLS; using lazy loading, resource hints and priority hints moves the LCP image ahead in the queue; a source‑set debugging script finds exact breakpoints instead of guessing; CSS and image prioritization cut a measured LCP from ~7s to 2.5s. Ships ngx-fast-svg that provides native lazy SVG loading, server‑rendered SVGs and DOM caching so no extra SVG HTTP requests. Uses contain and content-visibility to drop offscreen DOM and cut INP from ~2s to ~60ms on a phone.
AI-written summary · about
chapters (10)
- 0:00Introduction to performance
- 1:49Core Web Vitals explained
- 5:43Cumulative Layout Shift fixes
- 7:50Largest Contentful Paint breakdown
- 11:43Resource hints and prioritization
- 14:54Source set debugging tricks
- 18:48SVG optimization with ngx Fast SVG
- 21:39Interaction to Next Paint optimization
- 23:23CSS-only INP improvements
- 25:51Recap and closing
related talks
56mBoosting Web Performance in 2022
21mB.L.A.Z.I.N.G. - 7 core principles of fast Angular application
38mCSS and the first meaningful paint
25mCore Web Vitals under control
01h 03mBetter performance === greater accessibility
17mRethinking Angular Architecture & Performance
43mCore Web Vitals: How to make your angular app feel like a dream
32mProfiling Bootstrap Performance of Angular Apps