What Is LCP (Largest Contentful Paint)?
LCP explained: what element counts, the 2.5-second threshold, lab vs field measurement, and the fixes that actually move it.
Largest Contentful Paint (LCP) measures when the biggest visible element — usually the hero image or headline — finishes rendering. It is the Core Web Vital that answers the visitor's first question: 'is this page actually loading?' Google's thresholds: good under 2.5 seconds, poor above 4.0, judged at the 75th percentile of real users.
What counts as the LCP element
The largest image, video poster, or text block in the initial viewport. The candidate can change during load — a headline renders (LCP candidate), then the hero image finishes (new, larger candidate); the final one wins. Knowing your page's LCP element is step one of fixing it: open DevTools' Performance panel or check your field data's element attribution.
The four usual culprits, in fix order
- Oversized hero images: compress, use modern formats (WebP/AVIF), size responsively, and never lazy-load the LCP image — preload it.
- Slow server response: LCP cannot beat TTFB; a 1.5 s server leaves at most 1 s of budget for everything else.
- Render-blocking resources: CSS and synchronous scripts in the head delay first paint of anything — including heavyweight analytics tags, the self-inflicted wound.
- Client-side rendering waterfalls: SPAs that fetch-then-render push LCP behind JavaScript; SSR or static rendering of the hero solves it structurally.
Lab vs field — the LCP trap
Lighthouse's LCP is one synthetic load on simulated hardware; Google ranks on field LCP from real users (CrUX), where mid-range phones on cell connections dominate the percentiles. A 98 lab score with 3.8 s field LCP is the common, ranking-relevant failure — the case for continuous real-user monitoring. Clycyo records LCP per visit on the visitor record, so 'which pages, which devices, since which deploy' is a filter, and the conversion cost of slow paint (quantified here) is visible next to it.