A deep dive into optimizing LCP
summary
Claim: Largest Contentful Paint needs to be broken into four LCP subparts (TTFB, resource load delay, resource load time, render delay) and optimized in order. Uses HTTP Archive lab data (5.3M runs) and cites 52.7% of sites meeting the 2.5 seconds / 75% target. Builds a photo‑slideshow demo with perf.js, preloads, fetch priority, Squoosh CLI to generate AVIF/WebP/JPEG variants, and toggles server‑side rendering and CDN caching; result: resource delay and render delay shrink to near zero following the recipe and LCP improves per trace. 80-20 principle
AI-written summary · about
chapters (11)
- 0:00Introduction to LCP
- 1:06Understanding LCP metrics
- 3:07Why LCP is hard to optimize
- 4:42Breaking down LCP sub-parts
- 8:00LCP optimization goals
- 9:36Analysis of HTTP archive data
- 12:24Recipe for LCP optimization
- 17:37Real world LCP example
- 20:53Fixing render delays
- 23:24Optimizing image resources
- 27:28Final LCP best practices
related talks
46mOptimising Largest Contentful Paint
46mOptimising Largest Contentful Paint
55mHow I brought LCP down to under 350 ms
43mChallenging Assumptions About LCP Best Practices
32mEverything you need to know about Web Performance
36mHacking Web Performance
01h 01mUnveiling the Power of Web Performance Metrics for Testers
38mCSS and the first meaningful paint