Glossary · Page speed

LCP (Largest Contentful Paint)

Definition

LCP (Largest Contentful Paint) measures how long the largest image, video or text block in view takes to render; 2.5 seconds or less is good.

LCP explained

LCP reports the render time of the largest image, text block or video visible in the viewport, measured from when the user started navigating to the page. It is a proxy for when the main content has loaded. web.dev rates 2.5 seconds or less as good, 2.5 to 4 seconds as needing improvement and over 4 seconds as poor, at the 75th percentile of page loads.

The LCP element is often a hero image or headline. Common causes of slow LCP are:

  • A slow server response (high Time to First Byte).
  • Render-blocking CSS and JavaScript delaying the first paint.
  • A large, uncompressed hero image, or one discovered late because it is set in CSS or loaded by JavaScript.
  • Lazy-loading the hero image, which delays the very element that matters.
  • Content hidden until scripts or animations run.

Fixes include preloading and prioritizing the LCP image, serving it in a modern format at the right size, rendering main content on the server, and caching pages at a CDN.

Example

Your homepage's LCP element is a headline that starts invisible and fades in with an animation after scripts load, so LCP is far above 2.5 seconds on mobile. Rendering the headline visible in the initial HTML, and animating something else, brings LCP down sharply.

Why it matters

LCP is the moment visitors see that a page is useful. A slow LCP increases the chance they give up before the page has loaded.

Related service

Page Speed Optimization

We fix LCP, INP and CLS issues so pages load fast and respond quickly for real users.

Page speed and Core Web Vitals optimization

FAQ: How do I improve page speed?

Sources

Published by Vidern, founded and led by Malhar Shah. Updated .

Find out what's holding your site back

Get a free SEO audit with prioritized fixes, delivered within 48 hours.