Largest Contentful Paint (LCP)

A Core Web Vital that measures how long the largest visible element takes to load — good is ≤2.5 seconds.

LCP measures the render time of the largest content element visible in the viewport, typically an image, video poster, or a large block of text. It is the closest proxy to "when does the page feel loaded" from a user perspective. The LCP element is determined at render time — it is whatever is the biggest element visible when the page first displays.

Common LCP elements include hero images, banner images, large headings, and background images. Images are the most common LCP element and also the most fixable. Key optimisation techniques: serve images in modern formats (WebP, AVIF), add fetchpriority="high" and loading="eager" on the LCP image, preload the LCP image with <link rel="preload">, use a CDN to serve images close to users, and reduce server response time (TTFB).

LCP is measured from the navigation start to when the element is first rendered and stable. It stops being measured after the user first interacts with the page. Poor LCP (>4s) usually indicates server-side slowness, render-blocking resources, or unoptimised images.