🖼️LCP Optimization: Fixing Largest Contentful Paint
The definitive guide to diagnosing and improving your Largest Contentful Paint score — the most impactful Core Web Vital for SEO rankings.
Largest Contentful Paint (LCP) measures how long it takes for the largest content element above the fold to become visible. It's Google's primary measure of "loading experience" and the Core Web Vital with the biggest SEO ranking impact.
Largest Contentful Paint (LCP) (s)
What Counts as the LCP Element?
- <img> elements
- <image> elements inside SVGs
- <video> poster images
- Elements with a CSS background-image
- Block-level elements (div, p, section) containing text — if larger than all images
Finding Your LCP Element
Open Chrome DevTools → Performance tab → Record a page load → look for "LCP" markers. Or use PageSpeed Insights (pagespeed.web.dev) which highlights the LCP element with a screenshot and element selector.
LCP Causes and Fixes
| Root Cause | Solution |
|---|---|
| Slow server response (TTFB) | Upgrade hosting, add CDN, optimize database queries |
| Render-blocking resources | Defer/async non-critical JS; preload critical CSS |
| LCP image not preloaded | Add <link rel="preload"> for the LCP image |
| LCP image too large | Compress to WebP; use srcset for responsive sizing |
| LCP image lazy loaded | Remove loading="lazy" from the LCP element |
| Large LCP text block with web font | font-display: swap + preconnect to font origin |
Adding <link rel="preload" as="image" href="/hero.webp"> in your <head> is often the single highest-impact LCP fix. It tells the browser to fetch the image immediately rather than discovering it when parsing the CSS or HTML body.
LCP for Different Page Types
For image-heavy pages (e-commerce, portfolios), the LCP element is almost always the hero image. For text-heavy pages (articles, docs), LCP is often the first large text block. The fixes differ: image pages need image optimization and preloading; text pages benefit from font optimization and deferred non-critical styles.