Understanding largest contentful paint
LCP measures when the main thing on the page appears. Here is how to find that thing and make it arrive sooner.
What it measures
Largest contentful paint records the moment the biggest image or text block in the viewport finishes rendering. It is a reasonable stand-in for "when did the page look ready" because the largest element is usually the one a visitor came to see: a hero image, a headline, a product photo.
The common target is 2.5 seconds at the 75th percentile of real visits.
Find the element first
Before optimizing anything, identify which element is the LCP candidate on each important page. Browser developer tools highlight it directly. The answer is often surprising: a cookie banner, a decorative background, or a large paragraph of legal text can win if it is bigger than the intended hero.
The four phases
LCP time breaks down into four parts:
- Time to first byte, before the browser knows anything.
- Resource load delay, the gap between the first byte and the moment the browser starts fetching the LCP resource.
- Resource load time, how long that fetch takes.
- Element render delay, the gap between the resource arriving and the element actually painting.
Most slow LCP scores are dominated by one phase. Measure them separately and fix the largest.
Reducing load delay
Load delay is high when the browser discovers the LCP image late, for example because it is set as a CSS background or injected by JavaScript. Put the image in the HTML as a plain img element, avoid lazy loading it, and add fetchpriority="high". These three changes alone often cut a second.
Reducing load time
The fetch itself gets faster with smaller files and shorter distances. Serve a modern format at the right dimensions, and serve it from a cache close to the visitor.
Reducing render delay
Render delay is caused by anything that blocks painting after the resource has arrived: render-blocking stylesheets, synchronous scripts in the head, or a client-side framework that must hydrate before showing content. Server rendering the main content and keeping the critical CSS small address most of it.
Text can be the LCP too
When the largest element is a headline, the font becomes the bottleneck. A web font that blocks text rendering delays LCP directly. Use a fallback that displays immediately and swap in the web font when it arrives.
Watch the field data
Lab tests run on one device with one network profile. Field data shows the full distribution. A page can score well in the lab and poorly in the field because real visitors arrive on slower phones, through slower networks, from farther away.