SiteVitals

Largest Contentful Paint (LCP)

LCP marks the moment the biggest thing on screen, usually the hero image or the headline, has finished painting. It is the loading metric Google uses in Core Web Vitals.

Thresholds measured at the 75th percentile of page loads, per Google’s web.dev guidance.

How the browser picks the LCP element

While the page loads, the browser keeps a running “largest element so far”. Each time something bigger paints, it replaces the candidate, and it stops as soon as the visitor taps, clicks or scrolls. The final candidate’s paint time is the LCP.

Scrub through a page load

Largest element painted so far: nothing yet

Final LCP: 2.6 s (hero image) → Needs improvement

The browser keeps replacing its LCP candidate each time a larger element paints, and stops when the visitor first interacts. Fast text doesn't help if a big image arrives late: the image is the one that counts.

The four parts of LCP

Google splits every LCP into four phases. The speed test shows them for your page under “Your largest element”.

PhaseWhat happensTypical fix
Time to first byteServer sends the HTMLEdge caching, fewer redirects
Resource load delayBrowser discovers the imagePut the image in the HTML (not in JS or CSS), add fetchpriority="high" or a preload
Resource load timeImage downloadsAVIF/WebP, correct size via srcset, image CDN
Element render delayImage is ready but not painted yetRemove render-blocking CSS/JS, avoid client-side rendering the hero

On a well-optimised page, the two “delay” phases should be close to zero. Google’s analysis of Chrome data found load delay, not download time, is the biggest part for most sites with poor LCP.

Common causes of a slow LCP

  • The hero image is lazy-loaded, or injected by JavaScript after the page runs.
  • It is set as a CSS background, so the browser can’t find it until the stylesheet has loaded.
  • It is a multi-megabyte JPEG served at desktop size to phones.
  • A cookie banner or popup becomes the largest element and loads late.
  • Slow server response pushes everything back (check the TTFB checker).

Questions people ask

What is Largest Contentful Paint?

LCP is the time from when the page starts loading until the largest image or text block in the viewport has rendered. It is the Core Web Vital for loading speed.

What is a good LCP?

2.5 seconds or less at the 75th percentile of page loads. Between 2.5 and 4 seconds needs improvement; over 4 seconds is poor.

Which elements can be the LCP element?

Images (including inside SVG), video poster images or first frames, elements with a CSS background image loaded via url(), and block-level elements containing text. Elements with zero opacity and full-viewport low-content images are ignored.

Should I lazy-load my hero image?

No. loading="lazy" on the LCP image delays it until layout is known, which typically adds hundreds of milliseconds. Lazy-load images below the fold only, and add fetchpriority="high" to the hero.