Largest Contentful Paint (LCP)
Largest Contentful Paint measures how long it takes for the biggest visible piece of a page, usually a hero image or headline, to actually finish rendering on screen.
Of the three Core Web Vitals, Largest Contentful Paint is the one that most directly matches how a person actually experiences load time. It marks the moment the single largest visible element on the page, almost always a hero image, a big block of text, or a headline, finishes rendering and becomes visible.
It is not measuring when the page starts loading, and not measuring when every last thing on the page has finished. It is measuring the moment that matters to a real visitor, when the main thing they came to see is actually there in front of them. Google’s own threshold for a good experience is 2.5 seconds. Past four seconds, most visitors have already started to leave.
Why it matters to you
This is the vital most likely to actually cost you a visitor mid-visit, not just a ranking position. Someone lands on your homepage from a search result or an ad. If the hero image takes six seconds to appear, a real share of them are gone before they ever see what your business does, and no amount of good copy below the fold gets read by someone who already left.
It is also usually the easiest of the three to fix, and the one with the most obvious single cause. Where accessibility or layout stability issues can be scattered across a whole codebase, a slow LCP is very often one oversized image or one slow server response, both of which have a direct, known fix.
How I set it up
I compress and correctly size every hero image before it ever ships, serving the smallest file that still looks sharp on the device viewing it, rather than a full-resolution photo shrunk down by the browser. I load that image with priority, ahead of fonts, scripts and anything else competing for the same early moment.
Building on a static site framework helps enormously here, because there is no server-side processing delay before the page even starts sending, unlike a content management system generating the page fresh on every visit. The page is already built and ready to go the instant it is requested.
What it looks like in practice
On a real rebuild, PageSpeed results measured on the same day, same test, showed the rebuilt site’s hero content appearing in a fraction of the time the old site took. Nothing about the actual image changed in what a visitor would describe seeing, it was still the same photo, the same headline. What changed was how long they had to wait before it was actually there.
Questions I get about this
- Why does the biggest element matter more than the whole page loading?
- Because that is what a visitor actually judges the page by. Nobody sits there waiting for every last script to finish. They decide the page has loaded, or hasn't, based on whether the main thing they came to see, usually a hero image or the headline, is visible yet. LCP measures the moment that perception forms.
- What's a good LCP score?
- Google's threshold is 2.5 seconds. Under that is considered a good experience. Between 2.5 and 4 seconds needs improvement. Past 4 seconds is considered poor, and that is usually where visitors start actually leaving before the page finishes loading at all.
- What's usually causing a slow LCP?
- Most often it is an oversized, uncompressed image used as a hero graphic, or a slow server taking too long to send the page in the first place. Fonts and scripts loading before the main image can also push it back. It is rarely one dramatic cause, usually a stack of small, fixable ones.
Want this set up properly for your business?
This is the kind of thing I build every week. Grab a time and we will talk through what fits.