What is Largest Contentful Paint (LCP)?
LCP is a loading metric that measures the moment a page looks loaded. Rather than timing when the first byte arrives or when every script has finished, it watches the viewport and records when the largest piece of content (an image, a video poster frame, a block of text) has been painted on screen. That is a good proxy for when a visitor feels the page is there. Google's thresholds are 2.5 seconds or less for good, up to 4 seconds for needs improvement, and anything slower as poor, measured at the 75th percentile of real visits.
It is one of the three Core Web Vitals, alongside Interaction to Next Paint for responsiveness and Cumulative Layout Shift for visual stability, and together they form Google's page experience signal.
Why it matters
Why LCP matters
Because the hero is the page. On most marketing sites the largest element above the fold is a photograph or a film still, and it is the first thing a visitor judges the brand on. If it arrives late, the visitor is looking at a blank or a placeholder for the seconds that decide whether they stay. LCP turns that experience into a number that Google uses in ranking and that a client can see in Search Console, which has made it the most discussed performance metric on image-heavy sites.
For a fashion house, a beauty brand or anyone whose site is mostly pictures, the tension is real. The visual has to be beautiful and it has to be fast, and the second does not come free; it is a design and engineering decision made together.
In practice
How LCP works in practice
- 01
Field data comes from real visitors through the Chrome User Experience Report and is what Google uses; PageSpeed Insights shows it beside a lab measurement from Lighthouse that is useful for diagnosis. The tools name the LCP element, and the fix follows from what it is. If it is an image: serve it in a modern format, at the right size for the screen, from a CDN, with a preload hint, and never lazy-load it. If it is text: make sure the web font loads fast or falls back cleanly, and that nothing is hiding the text until a script runs.
- 02
Beneath the element itself are the usual foundations: a fast server response, render-blocking scripts and styles kept out of the way, critical CSS inlined so the first paint is not waiting on a stylesheet, and third-party tags deferred. Each change is checked against the field number, because the lab score can improve while real visitors on real phones see nothing different.
Watch out
What people get wrong about LCP
Lazy-loading the hero. The one image that should arrive first is the one most often tagged to arrive last, because lazy-loading was applied to every image in the template. The other mistake is optimizing for the lab score on a desktop connection and ignoring the field data from phones on cellular, which is what Google reads. The third is a hero that changes: a carousel or a video that swaps the largest element after load can produce an LCP measurement that never settles, and a single still image is both faster and, usually, better design.
