Skip to content
WebAuditOS
Start free audit

Test your website now

Free, no card. We read only public pages.

Run free audit →

Performance

What is Largest Contentful Paint, and how do you improve it?

LCP measures when the main content of a page appears. What counts as good, what usually makes it slow, and the fixes that move the number in practice.

Largest Contentful Paint, LCP, is the time from when a page starts loading until its largest visible image or text block appears. Google considers 2.5 seconds or less good, measured at the 75th percentile of real visits. It is usually slowed by a slow server response, a large or late-loaded hero image, or render-blocking scripts and styles.

Published · Last updated

By Michal Měřínský. Audit methodology.

What LCP measures

LCP marks the moment the biggest content element in the viewport finishes rendering: usually a hero image, a video poster or a large heading. It is one of the three Core Web Vitals, alongside Interaction to Next Paint and Cumulative Layout Shift, and it approximates when a visitor feels the page has loaded.

Google's thresholds, measured at the 75th percentile of page loads:

  • Good: 2.5 seconds or less.
  • Needs improvement: up to 4 seconds.
  • Poor: more than 4 seconds.

What makes it slow

LCP can be split into four parts, and every slow LCP is slow in one of them:

  • Time to first byte: the server takes too long to start responding.
  • Resource load delay: the browser discovers the LCP image late, for example because it is set in CSS, injected by JavaScript or lazy-loaded.
  • Resource load time: the image is too large or served from far away.
  • Element render delay: the image has arrived, but scripts or stylesheets block rendering.

How to improve it

  • Make the LCP image discoverable in the HTML as an img element, not a CSS background or a JavaScript-rendered element.
  • Never lazy-load the LCP image. Lazy loading is for images below the fold.
  • Prioritise it:
<img src="/hero.avif" fetchpriority="high" width="1200" height="600" alt="...">
  • Serve modern formats, WebP or AVIF, at the size it is displayed, with srcset for different screens.
  • Reduce server response time with caching, a CDN and faster backend queries.
  • Remove or defer render-blocking scripts and inline the critical CSS.
  • If the LCP element is text, make sure web fonts do not hide it: use font-display swap or optional.

Single-page apps that render everything with JavaScript often have a poor LCP by design, because nothing paints until the bundle runs. Server rendering or pre-rendering the first view usually fixes more than any image tweak.

Lab versus field

Lab tools such as Lighthouse measure one load on a simulated device and network. Field data from the Chrome UX Report measures real visitors over 28 days. Google uses field data for its page experience signals. Use lab results to diagnose and field data to confirm.

Does LCP affect rankings?

Core Web Vitals are part of Google's page experience signals. Google describes them as one factor among many, and relevance matters far more, so a fast page with weak content will not outrank a slower page that answers the query better. A slow LCP costs visitors before it costs rankings.

What a scan can and cannot tell you

WebAuditOS measures LCP on sampled pages in a throttled mobile lab browser: up to 2.5 seconds passes, over 2.5 through 4 seconds warns, and over 4 seconds fails, along with server response time, image formats and responsive image markup, which are the usual causes.

A lab measurement is one load from one location. It cannot show what your real visitors experience on their devices and networks. For that, check field data in PageSpeed Insights or Search Console's Core Web Vitals report.

A good lab LCP with a poor field LCP usually means slow devices, slow networks or a different first view for real visitors, such as a cookie banner.

Short answers

What is a good LCP? 2.5 seconds or less for at least 75 percent of visits.

What is usually the LCP element? A hero image or the main heading.

Should I lazy-load the hero image? No. It delays LCP.

Why is my mobile LCP worse than desktop? Slower CPUs and networks, and often a larger image than the screen needs.

In the product

The checks this maps to

Every check named here runs on every scan, on every plan - what a plan changes is how many pages are crawled, how long the history is kept and what you can do with the result. These are the ids the findings carry, so you can match a line in a report to the explanation above.

Performance

Core Web Vitals: what actually moves LCP, INP and CLS

The three metrics Google ranks on, what makes each one bad in practice, and why a lab tool can tell you about two of them but never about the third.

Performance

How do you read a PageSpeed Insights report?

PageSpeed Insights mixes real-user data and a lab test. What each part means, why the score moves between runs, and which numbers to act on first.