Optimising Largest Contentful Paint
summary
Explains that Largest Contentful Paint (LCP) is measurable and fixable with concrete steps not fluff citing Core Web Vitals 2.5s target and HTTP Archive numbers (≈53.7% good). Uses WebPageTest, Trio and SpeedCurve to show image LCPs vs SVG and background images (image 3.1s, svg 2.6s artifact, background 4.4s), moving a hosted asset raises LCP 2.1s→3.5s, server‑rendering a JS-built LCP cuts it ~43%, preload cuts a 932ms download to 445ms (~800ms gain), and adding fetchpriority collapses 2.16s queuing to near zero. Advises never lazy load your LCP and test decoding=sync for image candidates.
AI-written summary · about
chapters (14)
- 0:00Optimizing Largest Contentful Paint
- 1:07What is Largest Contentful Paint
- 7:26Solving everything before LCP to improve performance
- 9:56Choosing LCP candidates
- 15:56Preload scanner and LCP
- 17:41SVG images and LCP
- 18:23Video posters for LCP
- 20:08Background images and LCP
- 22:57LCP performance mistakes
- 28:16LCP in JavaScript or off-site
- 32:30Preload for late LCP
- 36:16Fetch priority for LCP
- 40:14Image decoding for LCP
- 42:38Summary
related talks
46mOptimising Largest Contentful Paint
29mA deep dive into optimizing LCP
43mChallenging Assumptions About LCP Best Practices
32mEverything you need to know about Web Performance
25mCore Web Vitals under control
55mHow I brought LCP down to under 350 ms
01h 01mUnveiling the Power of Web Performance Metrics for Testers
15mThe business impact of Core Web Vitals