---
title: LCP Explained: Largest Contentful Paint (and how to improve it)
description: LCP is the Core Web Vital that answers 'when does the page feel loaded?' Here's exactly what it measures, what counts as good, and the handful of fixes that move it most.
canonical: https://watchfor.io/blog/lcp-explained
---

# LCP Explained: Largest Contentful Paint (and how to improve it)

2026-01-29 · WatchFor Team · Performance · performance, core-web-vitals, seo

LCP is the Core Web Vital that answers 'when does the page feel loaded?' Here's exactly what it measures, what counts as good, and the handful of fixes that move it most.

Of the three [Core Web Vitals](/blog/core-web-vitals-explained), **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](/blog/ttfb-explained) — 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:

1. **Lower your TTFB.** If the server is slow to respond, nothing renders fast — [cache and use a CDN](/blog/how-to-speed-up-your-website). This is the foundation.
2. **Optimise the LCP image.** [Compress and resize it](/blog/image-optimization), serve modern formats, and **preload** it so the browser fetches it early.
3. **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*.
4. **Remove render-blocking resources.** Defer non-critical CSS/JS so the browser can paint the main content sooner.
5. **Use a CDN.** Serving the hero from a [nearby edge](/blog/what-is-a-cdn) 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](/blog/lighthouse-explained)) — 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](/docs/monitors/performance) 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](/blog/core-web-vitals-explained), [TTFB](/blog/ttfb-explained); test with the free [Core Web Vitals checker](/core-web-vitals-checker).

---

Canonical page: https://watchfor.io/blog/lcp-explained · All articles: https://watchfor.io/blog/all.md · Site guide: https://watchfor.io/llms.txt