What is Largest Contentful Paint (LCP)?

Largest Contentful Paint measures the time it takes for the biggest visible content element above the fold to finish rendering. In commerce storefronts this is almost always the hero image, a product photo on a PDP or the headline on a landing-page. LCP is the most quoted of the Core Web Vitals because it captures the perceived moment when a page feels "ready".

Definition

LCP records the render time of the largest image, video poster or text block within the viewport at first paint. The value comes from the LargestContentfulPaint browser API, reported on the 75th percentile via the Chrome User Experience Report. Google considers values up to 2.5 seconds as good, up to 4 seconds as needs improvement, and anything beyond as poor. LCP is influenced by Time to First Byte from the render origin, the size and priority of the LCP resource, render-blocking CSS or JS in the critical path, and client-side hydration that delays paint when frameworks ship as first-party-JS.

Why it matters

LCP correlates closely with conversion. A one-second delay on a PDP measurably drops add-to-cart rates and lowers revenue per session, especially on mobile. Because hero assets dominate the metric, image-optimization and prioritized fetching become high-leverage interventions. LCP also exposes architectural choices: a slow upstream commerce API, an under-provisioned origin or an oversized React bundle all surface as LCP regressions. As part of the page-experience signal it feeds into search-engine-optimization-seo and intersects with conversion-rate-optimization-cro work.

Use cases

Headless teams on Next.js or Astro typically address LCP by preloading the hero image, serving AVIF or WebP from a content-delivery-network-cdn and rendering above-the-fold markup via SSR or Edge Rendering on Vercel Edge or Cloudflare Workers. ISR is used to keep PDPs and category pages warm so the LCP resource is delivered from cache. Teams also adopt fetchpriority="high" on the LCP image, defer non-critical first-party-JS, and trim third-party tags loaded through their content-management-system-cms tag manager. LCP dashboards segmented by template and device guide release decisions and headless replatforming business cases.

Related

Explore Performance and Core Web Vitals · Composable Headless Frontend.