Largest Contentful Paint (LCP)

Largest Contentful Paint measures the render time of the largest image, text block, or video in the viewport. The clock starts when the visitor navigates. It stops when that element finishes painting.

It's the moment the page first looks like it arrived. That's why Google made it a Core Web Vital, and why it carries the second-largest weight in the Lighthouse performance score.

The thresholds

Google sets three bands:

Measure at the 75th percentile of page loads, and segment mobile and desktop separately. An average hides the slow quarter of your visitors. Mobile and desktop are different pages in practice, so one combined number tells you very little.

Which element is my LCP element?

Only a restricted set of elements can be the largest contentful paint:

• <img> elements
• <image> elements inside an <svg>
• <video> elements, timed from the poster image or the first frame
• Any element with a CSS url() background image
• Block-level elements that contain text

The specification keeps the list short on purpose. In practice your LCP element is almost always the hero image or the headline. Find it first — optimise anything else and you'll move nothing.

The three parts you can fix

LCP isn't one number. It's a chain, and each link has a different fix.

1. Server time. Everything before the first byte arrives — redirects, connection setup, and the server's own work. A CDNA network of edge servers that serve your content from near the visitor. in front of the origin removes most of the distance.
2. Resource load time. How long the LCP image takes to download after the browser discovers it. Preload it, compress it, and serve a size that matches the viewport.
3. Render delay. The gap between the resource arriving and the browser painting it. Render-blocking CSS and JavaScriptCSS/JS in the <head> that the browser must fetch before it can paint. is the usual cause.

Render delay is the part teams most often miss. The image can arrive in 200 ms and still paint a second later, because the main thread is busy parsing a stylesheet.

Why does my LCP change between tools?

Lab tools like Lighthouse simulate one load on one connection from one place. Field data records real visitors on real networks. The two disagree, and neither is wrong.

Lab numbers also move with where you measure from, because server time is part of the chain. That's the case for testing from more than one place, and it's why every Lightscore run pins the Lighthouse and Chromium versions. A change in your score should mean a change in your site, not a change in the tool.

Runs of the same page also disagree with each other. We measured how much of that is just noise across 130 runs of our own.