Largest Contentful Paint Test
What is it?
Largest Contentful Paint (LCP) measures the time at which the largest visible element in your page's viewport, typically a hero image or main heading, finishes rendering. LCP is one of Google's Core Web Vitals and a direct ranking factor, used as a proxy for when the user perceives the page as effectively loaded.
Why LCP matters
LCP captures the moment the user feels the page has actually loaded. Until the largest element renders, the page can still feel half-finished even if smaller elements have appeared. Google's recommended threshold for a "good" experience is LCP at or under 2.5 seconds at the 75th percentile of users, and this threshold has been stable since LCP became a Core Web Vital.
Because the LCP element is usually the hero image or main headline, optimizing LCP often comes down to a small number of targeted changes around that single element. Preloading the hero image, marking it with fetchpriority="high", ensuring it ships in a modern format and at the right size, and serving it without lazy-loading typically delivers the largest gains. For pages where the LCP element is text rather than an image, optimizing web font loading and avoiding render-blocking CSS produce the same kind of improvement.
Common causes of slow LCP
- Hero image loaded lazily: remove
loading="lazy"from the LCP image; it should load eagerly. - LCP image not preloaded: add a preload hint in the head so the browser fetches it before parsing the rest of the document.
- LCP image too large or in legacy format: resize to displayed dimensions and serve as WebP or AVIF.
- Slow TTFB or render-blocking resources: address the underlying issues; LCP cannot be fast if the page is slow to start.
- Client-side rendered hero content: server-render or pre-render the LCP element so it appears in the initial HTML.
This test measures your page's LCP and identifies the LCP element. The fix guide below covers preloading, prioritizing, and resizing the hero image, plus the rendering and font techniques that improve LCP for text-dominated pages.
Pass rate:
-
Top 100 websites: %This value indicates the percent of top 100 most visited websites in the US that pass this test (in the past 12 months).
-
All websites: 53%This value indicates the percent of all websites analyzed in SEO Site Checkup (500,000+) in the past 12 months.
| 2021 | N/A |
|---|---|
| 2022 | 92% |
| 2023 | 90% |
| 2024 | 77% |
100
75
50
25
0
How do I fix it?
Largest Contentful Paint (LCP) measures when the largest visible element in the viewport, such as a hero image or main heading, finishes rendering. LCP is one of Google's Core Web Vitals and a direct ranking factor, used as a proxy for when the user perceives the page as effectively loaded. Fixing this issue means identifying the LCP element and ensuring it loads as early as possible.
Where to make the change
- Identify the LCP element: open Chrome DevTools, run a Performance trace, and find the LCP marker. The element it points at is the one to optimize.
- Application code or templates: preload the LCP image, give it
fetchpriority="high", and ensure it is in the initial HTML rather than injected by JavaScript. - Server and CDN: reduce TTFB and ensure the LCP image is served from a fast, geographically close origin.
Common causes and how to resolve them
- Hero image loaded lazily: remove
loading="lazy"from the LCP image; it should load eagerly. - LCP image not preloaded: add
<link rel="preload" as="image" href="/hero.jpg" fetchpriority="high">in the head so the browser fetches it before parsing the rest of the document. - LCP image too large or in legacy format: resize to displayed dimensions and serve as WebP or AVIF.
- Slow TTFB or render-blocking resources: address the underlying TTFB and render-blocking issues; LCP cannot be fast if the page itself is slow to start.
- Client-side rendered hero content: server-render or pre-render the LCP element so it appears in the initial HTML.
- Web fonts delaying LCP text: use
font-display: swapso the LCP heading renders immediately in a fallback font.
Best practices
- Target sub-2.5 second LCP at the 75th percentile: the official Core Web Vitals threshold for a "good" experience.
- Preload the LCP image: the single highest-impact LCP optimization on most sites.
- Use
fetchpriority="high": tells the browser to prioritize the resource ahead of others. - Ship modern image formats: AVIF and WebP cut hero image bytes substantially, which directly lowers LCP.
