Of the three Core Web Vitals, LCP is the one users feel most directly: it's the moment the page stops looking empty and the main content shows up. Get it wrong and your site feels sluggish no matter how light the rest is. Here's how to understand and fix it.
What LCP measures
LCP (Largest Contentful Paint) measures how long it takes for the largest visible element in the viewport to render — usually a hero image, a big heading, or a banner. It's Google's proxy for "the page feels loaded."
Why the largest element? Because that's typically the main thing the user came to see. When it appears, the page feels ready.
What counts as good
| LCP | Verdict |
|---|---|
| ≤ 2.5s | Good |
| 2.5s – 4s | Needs improvement |
| Over 4s | Poor |
Aim for under 2.5 seconds for the 75th percentile of real visits — that's the threshold Google uses for "good."
What slows LCP down
LCP is the sum of several delays, and the culprit is usually one of these:
| Cause | What's happening |
|---|---|
| Slow server response | High TTFB — the page can't render until the server replies |
| Heavy hero image | A huge, unoptimised image takes ages to download |
| Render-blocking resources | CSS/JS blocking the browser from painting |
| Lazy-loaded hero | The most important image deferred when it shouldn't be |
| Client-side rendering delay | JS has to run before the main content appears |
How to improve it
The fixes map directly to the causes:
- Lower your TTFB. If the server is slow to respond, nothing renders fast — cache and use a CDN. This is the foundation.
- Optimise the LCP image. Compress and resize it, serve modern formats, and preload it so the browser fetches it early.
- Don't lazy-load the hero. Lazy loading is great for below-the-fold images — but never for the LCP element, which should load immediately.
- Remove render-blocking resources. Defer non-critical CSS/JS so the browser can paint the main content sooner.
- Use a CDN. Serving the hero from a nearby edge cuts the download time for distant users.
The 80/20 of LCP: it's almost always either a slow server (TTFB) or a heavy hero image. Fix those two and most LCP problems disappear.
Lab vs. field
You'll measure LCP two ways, and they can differ:
- Lab (a tool like Lighthouse) — consistent, great for debugging, but one device.
- Field (real users) — what Google actually uses for ranking, reflecting real phones and networks.
Optimise in the lab, but confirm with field data — and keep monitoring it, since a new hero image can quietly wreck LCP later.
The bottom line
| In one line | |
|---|---|
| What | When the largest visible element renders. |
| Good | Under 2.5 seconds. |
| Top causes | Slow server (TTFB) and heavy hero images. |
| Fix | Lower TTFB, optimise & preload the hero, don't lazy-load it. |
LCP is "when does it feel loaded?" — and the answer is mostly set by your server speed and your biggest image. Sort those two, and your pages feel fast where it counts most.
Related: Core Web Vitals explained, TTFB; test with the free Core Web Vitals checker.