Glossary
Largest Contentful Paint
Largest Contentful Paint measures the moment the largest content element visible in the viewport has finished rendering. It is a proxy for the question a visitor is actually asking — has the page loaded yet — and it is measured from when navigation started. Good is 2.5 seconds or less at the 75th percentile of real visits. Because the largest element is usually an image or a block of text, the metric is dominated by how quickly that one resource can be delivered and painted.
What counts as the largest element
Image elements, including background images loaded through CSS, and the poster image of a video.
Block-level elements containing text nodes, measured by the area of the text itself rather than the container.
Only elements visible in the viewport at their moment of rendering count. Content below the fold is irrelevant to the metric.
The element can change during loading: an early text block may hold the title until a larger image arrives and takes it. The final value is the last such change before the first interaction.
The four phases of the delay
Time to first byte: how long the server took to begin responding. Everything else waits on it.
Resource load delay: the gap between the first byte arriving and the browser beginning to fetch the element — usually because it was discovered late, in CSS or after a script ran.
Resource load time: how long fetching the element itself took, driven by its size and the connection.
Element render delay: the gap between the resource arriving and it being painted, usually caused by the main thread being busy or by render-blocking resources still outstanding.
Breaking a bad measurement into these four phases identifies which one to work on, and they require entirely different fixes.
What usually dominates
A slow server. If the first byte arrives at 1.5 seconds, a 2.5-second target is nearly impossible regardless of anything else.
A hero image discovered late: referenced in CSS, or set by JavaScript, so the browser cannot begin fetching it while parsing the HTML.
An oversized hero image, sent at full resolution to a phone.
Render-blocking CSS and synchronous scripts in the head, which prevent anything painting until they have loaded and executed.
Web fonts with a blocking load strategy, which hold back text rendering entirely.
How to measure and improve it
PageSpeed Insights reports the LCP element by name in its laboratory run, which is the fastest way to know what is being measured.
In the browser's performance panel, the LCP marker identifies the element and the timeline shows which phase consumed the time.
`<link rel="preload">` for a hero image removes discovery delay. `fetchpriority="high"` raises its priority without a separate request.
Serving the image at the size it is displayed, in a modern format, addresses load time. Nothing addresses a slow server except making it faster.
Frequently asked questions
- What is a good LCP?
- 2.5 seconds or less at the 75th percentile of real visits. Above 4 seconds is classified as poor.
- Which element does LCP measure?
- The largest image or text block visible in the viewport when it renders. It can change during loading, and the last value before the first interaction is reported.
- Why is my LCP bad when my page looks fast?
- Usually because the measurement comes from slower devices and networks than yours, or because the largest element renders later than the content you notice first.
Sources
Related
VeriFixScan crawls a site and applies its checks to every page it reaches, keeping the evidence behind each finding. Scanning one website is free.
Scan a website