Largest contentful paint
Largest contentful paint (LCP) is a web performance metric that records the time, from the start of navigation, at which the largest image, video or text block in the visible viewport finishes rendering. It is one of the Core Web Vitals and stands in for the moment a user perceives the page's main content as loaded, as distinct from the first pixel or the full load.
The longer version
The browser watches the viewport as the page renders and keeps track of the largest visible element painted so far: a hero image, a video poster, a heading, a block of body text. Each time a larger one appears, the candidate changes. The measurement stops when the user first interacts, and the last candidate's render time is the LCP. Because it is tied to a specific element, the metric can be traced to a cause: the hero image was large and uncompressed, the font that the heading needed arrived late, the element was only inserted after a script ran.
First contentful paint (FCP) marks the first text or image of any kind and can be an early skeleton that says nothing about usefulness. Full page load waits for every resource, including ones below the fold nobody sees. LCP sits between them and is the one that tracks perception. It is also a rendering measurement rather than a network one, so a fast server with a slow client-side render scores badly, which surprises teams that have only ever looked at server response time.
The value differs between a lab run in a headless browser under fixed conditions and the field value gathered from real users on real devices and networks, and the field value is the one the Core Web Vitals assessment is judged on. A page that scores well on a developer's machine and poorly in the field usually has a device or network cause. The commonest delays are an oversized image, an image the browser cannot discover until CSS or JavaScript has run, render-blocking scripts ahead of the content, and a slow server response that pushes everything back. Measuring it is the job of performance tooling, not of a bug report.
Common questions
What is the difference between largest contentful paint and first contentful paint?
First contentful paint records when the first text or image of any kind appears, which can be a loading skeleton. Largest contentful paint records when the largest visible element finishes rendering, which is usually the hero image or main heading. FCP says the page has started; LCP says the main content is there.
What is a good largest contentful paint?
The Core Web Vitals programme publishes a threshold, measured in seconds from navigation start, that a page must meet for most of its real user sessions to count as good. The figure is set and revised by the metric's maintainers, so their current documentation is the reference; the point is that it is judged on field data from the slower sessions, not on a lab run.
Why is my LCP worse in the field than in the lab?
Lab tools run on a fixed machine and network, often faster than a typical user's phone on a mobile connection. Field data comes from real sessions across slow devices, weak networks and cold caches, and the reported value is taken from the slower sessions. A page that renders quickly in the lab and slowly in the field usually has an oversized image or a script blocking render that a fast machine hides.
Which element counts for largest contentful paint?
Images, video poster frames, images loaded as CSS backgrounds and block-level elements containing text are all candidates. The browser tracks the largest one visible in the viewport as the page renders, replaces the candidate each time a bigger one paints, and stops when the user first interacts. On most pages the element is the hero image or the main heading.
How do you improve largest contentful paint?
Find the element first, since the fix depends on it. For an image: compress it, serve it at the displayed size, and make it discoverable in the HTML rather than through CSS or JavaScript, without lazy-loading it. For text: get the font in early or let the fallback show. In every case, remove render-blocking scripts ahead of the content and cut server response time.
Bug reports that arrive ready to triage.
Collect replay, console, network and browser context with the Free plan.