What Is LCP (Largest Contentful Paint)? Thresholds, Causes, and Fixes

Short answer: Largest Contentful Paint is the time from navigation to the moment the largest image or text block in the viewport is rendered. It is one of the three Core Web Vitals. Google's guidance is 2.5 seconds or less for a good experience, measured at the 75th percentile of real visits. On most pages the LCP element is a hero image or a headline.

Table of Contents

1. What LCP Measures
2. Thresholds
3. The Four Parts of LCP
4. Common Causes of Slow LCP
5. Measuring It Properly
6. Key Takeaways

What LCP Measures

It answers the visitor's question "has the page shown up yet?". The browser tracks the largest element painted in the visible area and reports the time of the last such candidate before the user interacts.

Elements that can be the LCP element include images, video poster images, elements with a CSS background image, and blocks of text.

Thresholds

The assessment uses the 75th percentile: three quarters of visits should be at or under the threshold. An average hides the slow tail, which is where visitors on older phones and weaker networks sit.

The Four Parts of LCP

LCP time is the sum of four phases. Knowing which is large tells you what to fix.

On many sites the largest part is not the download. It is the delay before the browser even learns the image exists.

Common Causes of Slow LCP

1. The hero image is lazy-loaded. loading="lazy" on an above-the-fold image delays it.
2. The image is set in CSS or injected by JavaScript, so the browser's preload scanner cannot find it early.
3. The image is far larger than displayed. A 3000-pixel image in a 400-pixel slot (image optimisation).
4. Slow server response. Nothing can start until the HTML arrives.
5. Client-side rendering. The page is blank until JavaScript downloads, runs, and fetches data.
6. Render-blocking scripts and stylesheets in the head.
7. Web fonts blocking text. If the LCP element is a headline, text hidden while a font loads delays it.
8. Third-party scripts competing for bandwidth and the main thread (auditing them).
9. A carousel as the hero, which loads several large images at once (carousels).

A quick fix for a hero image:

<img src="/hero-800.webp" width="800" height="450"
     fetchpriority="high" alt="Product dashboard">

No loading="lazy", explicit dimensions, and a high fetch priority.

Measuring It Properly

There are two kinds of measurement.

• Lab tests (Lighthouse and similar) run on one simulated device. Good for debugging. They do not represent your visitors.
• Field data comes from real visits. It reflects actual devices, networks, and pages.

Field data is what matters, and it often disagrees with the lab. A page scoring well on a developer's laptop can be poor at the 75th percentile on mid-range Android phones over mobile data (low-end devices).

Break field data down by:

• Page. One slow template hides behind a site-wide figure.
• Device type.
• Country or region.

DeepSync's performance report collects LCP, INP, CLS, and related timings from real sessions and shows them by page, so a slow page can be found and then watched in a recording to see what the visitor experienced (performance). Web vitals are part of the Pro plan.

Then connect speed to outcomes: compare conversion for sessions with good and poor LCP on the same page (vitals and conversion). Keep in mind slow sessions also differ in device and network, so treat the gap as a guide to priority, not an exact forecast.

Key Takeaways

• LCP is when the main content appears; aim for 2.5 seconds at the 75th percentile.
• It has four parts; find which one is large.
• Never lazy-load the LCP image.
• Measure from real visitors, by page and device.

Conclusion

LCP is the visitor's first impression of speed. Find the element, find the slow phase, and fix that one thing.

Start free with DeepSync.