LCP (Largest Contentful Paint)

Largest Contentful Paint is the Core Web Vital that reports when the largest eligible image or text block within the initial viewport is rendered, measured from the start of the page navigation. Candidates can include images, video poster images, eligible background images, and groups of text nodes. The candidate may change as larger content appears, and measurement normally stops after the first user input or scroll.

Why it matters: A good LCP is 2.5 seconds or less; above 2.5 and up to 4 seconds needs improvement, and above 4 seconds is poor. Evaluate the 75th percentile of page visits separately for mobile and desktop. Field data shows what real visitors experienced, while a lab trace helps identify the candidate and reproduce a slow load; the two can differ by viewport, content, cache, network, device, and user state. Diagnose LCP as four parts: Time to First Byte, resource load delay, resource load duration, and element render delay. Make the likely LCP resource discoverable in the initial HTML, do not lazy-load it, assign high fetch priority only where justified, reduce server and redirect time, size and deliver the asset appropriately, remove avoidable render-blocking work, and render useful content without waiting for unnecessary client-side code. Confirm that an apparent improvement did not simply change the winning candidate or shift time into another subpart.