Largest Contentful Paint (LCP)

LCP measures when the largest visible element (image, text block, video) is rendered during load. Target: under 2.5 seconds.

Updated

The 4 sub-parts of LCP

  • TTFB: time to first byte; work on the Server, CDN and caching.
  • Resource load delay: the LCP image must be discoverable in the HTML (not in CSS or injected by JS); add a Preload when needed.
  • Resource load duration: file weight; see AVIF/WebP formats and srcset.
  • Element render delay: render-blocking CSS and JS; see defer & async and inline critical CSS.

LCP image checklist

<img src="/img/hero.avif" width="1200" height="630" fetchpriority="high" alt="Description">
  • never use loading="lazy" on this image (Lazy loading);
  • set width and height to avoid a shift (CLS);
  • serve it from the same origin or a preconnected CDN.

Diagnose

Compare field and lab data in PageSpeed Insights, then open Chrome DevTools' Performance panel. Reference: web.dev/lcp.