What is LCP (Largest Contentful Paint)?

The metric tries to capture the moment the user says “the page is here”. What is measured is not when the first pixel was painted but when the actual content appeared — because for a user, the page arriving means the thing they came to read arriving.

The element measured is usually an image or a block of text. Which element counts as the LCP element varies by page and by screen size; it can be the hero image on desktop and a heading on mobile. It therefore has to be determined separately at each breakpoint.

The duration divides into four parts, and each part has its own treatment.

1. Time to first byte — the server side; hosting and caching.
2. Resource discovery delay — when did the browser notice the resource? Resources buried in CSS or JavaScript are discovered late.
3. Resource load time — a matter of size and format.
4. Render delay — the resource arrived but could not be painted because of render blockers.

The most common mistake is applying lazy loading to the LCP element: correct for images outside the visible area, that setting delays discovery when applied to the LCP element and raises the time directly.

The value read in field data is the 75th percentile — the time experienced by three quarters of users. The value you measure on your own device is one sample from the best end of that distribution.

The biggest gain in reducing the time usually lies in the third stage — resource size. Using a modern format, providing responsive sizes and producing the image at the size it will actually be shown brings LCP below the threshold on its own for most sites.

The fourth stage concerns render blockers: even when the resource has arrived, no painting happens until the stylesheets are parsed. On this site two stylesheets were merged and their comments stripped, closing two blockages measured at 821 and 221 milliseconds in Lighthouse mobile.

1. Make it visible in the HTML from the server — an image added via a CSS background or JavaScript is discovered late.
2. Use a modern format — AVIF and WebP deliver the same quality in a markedly smaller file.
3. Provide responsive sizes — sending a desktop image to a phone is the most common waste.
4. Give it high priority — a priority hint for the hero image.
5. Do NOT lazy-load it — delaying a resource in the visible area is a net loss.
6. Reduce render blockers — even if the resource arrives, nothing is painted while styles are awaited.

The fifth item is the most frequent counterproductive optimisation: applying lazy loading to all images in bulk makes LCP directly worse.

How to measure it

The thresholds are defined on web.dev: 2.5 seconds or less is good, above 4 seconds is poor. The value should stay under the threshold for 75 percent of visits. Lab measurement helps find the cause; field data is what you decide on.

1. Chrome DevTools → Performance → record → “LCP” marker and element
2. PageSpeed Insights → field data → Largest Contentful Paint (75th percentile)
3. import { onLCP } from 'web-vitals'; onLCP(console.log);

The first step is to see which element is the LCP element: the LCP marker in the DevTools Performance panel points to it. The fix depends on which of the four phases that element loses time in.

If you want your own site measured and fixed at the source, our Core Web Vitals optimization starts from real-user data and delivers LCP, INP and CLS against a budget.