Largest Contentful Paint (LCP)
Definition: Largest Contentful Paint (LCP) is a Core Web Vitals metric that measures how long it takes for the largest image or text block in the viewport to render; 2.5 seconds or less is considered good.
Also called: LCP
Updated
Which element counts
LCP times the moment the largest visible element finishes rendering in the viewport. Candidates are images, including CSS background images, video poster images and blocks of text. On most pages it is the hero image or the main heading. The metric is good at 2.5 seconds or less and poor above 4 seconds, measured at the 75th percentile of real visits.
Break it into four parts
A slow LCP is easier to fix once you know where the time goes. web.dev splits it into four sub-parts (Optimize LCP):
- Time to first byte: how long the server takes to start responding, including redirects.
- Resource load delay: the gap between the first byte and the browser starting to download the LCP image.
- Resource load duration: how long that download takes.
- Element render delay: the gap between the download finishing and the element appearing on screen.
If time to first byte dominates, look at hosting, caching and redirect chains. If load delay dominates, the browser is discovering the image too late.
Fixes that usually work
- Never lazy-load the LCP image. Give it
fetchpriority="high"instead. - Put the image in the HTML with a normal
imgtag, so the browser finds it without running JavaScript. - Serve modern formats such as AVIF or WebP at the size actually displayed.
- Cache HTML at the edge and remove redirect hops in front of the page.
- If the LCP element is text, make sure web fonts do not block it from rendering.
- Avoid rendering the hero section on the client after a data request.
The Core Web Vitals checker identifies the LCP element and shows which sub-part is slow.