What is LCP (Largest Contentful Paint)?

LCP, or Largest Contentful Paint, measures when the largest image or text block visible in the viewport finishes rendering, relative to when the page started loading. It is one of the three Core Web Vitals. web.dev defines a good LCP as 2.5 seconds or less, measured at the 75th percentile of page loads.

new PerformanceObserver((list) => {
  const entries = list.getEntries();
  console.log("LCP", entries.at(-1).startTime);
}).observe({ type: "largest-contentful-paint", buffered: true });

web.dev splits LCP into four parts: TTFB, resource load delay, resource load duration and element render delay. TTFB comes first, so every millisecond the HTML spends waiting on the origin is a millisecond added to LCP.

• A cold cache raises TTFB for the first visitors after a deploy, and LCP with it.
• Cache warming helps only the TTFB part. It does not shrink images or fix render-blocking scripts.
• Field data at the 75th percentile reflects real visitors in every region, so a page that is warm in one region and cold in another still shows the cold loads.