Largest Contentful Paint (LCP)

Measuring perceived load: when the biggest thing on screen finishes painting, and how to make it happen sooner.

Largest Contentful Paint answers the question users care about most on arrival: when does the main thing show up? It's the time until the biggest element in the viewport has painted. Good is ≤ 2.5 s — and getting there means understanding the four separate stages hiding inside that one number.

LCP only considers a specific set of element types — the things big enough to be “the main content.” If one of these sits above the fold (in the initial viewport), optimizing it is your job. Inline SVG drawings, gradients, and form controls don't count:

LCP isn't measured once. As the page renders, the browser keeps re-checking which visible element is largest. Early on, a heading might be the LCP; a moment later a hero image finishes loading, becomes the biggest thing, and it becomes the LCP. The final value is whichever element was largest when loading settled.

There's no single “make LCP fast” switch, because LCP is a sum of four stages. Each has its own cause and its own fix. Toggle the optimizations below and watch the bars collapse toward the 2.5 s line:

The four stages, in order:

1. TTFB — time to the first byte of HTML. Poisons everything after it.
2. Resource load delay — the gap between HTML arriving and the LCP resource even being requested.
3. Resource load time — how long the image itself takes to download.
4. Element render delay — resource is here, but it hasn't painted yet.

Now race it for real. Load the same storefront on three networks and three hero strategies and watch the page paint in front of you — the timeline keeps your previous run so you can see exactly how much each fix buys:

Stage 2 — cut the resource load delay

The most common LCP win. The browser often discovers the hero image late (because it's referenced from JS or CSS) or gives it a low priority. Put it in the initial HTML and tell the browser it's important:

<!-- In the initial HTML, not injected by JS -->
<img src="/hero.webp" fetchpriority="high" width="1200" height="630" />

<!-- Or preload it so the scanner finds it immediately -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

Stage 3 — cut the resource load time

Most LCP elements are images, so shrink the bytes: serve a right-sized image (not a 1800px file shown at 400px), use a modern format like WebP/AVIF, compress it, and serve it from a CDN close to the user.

Stages 1 & 4 — TTFB and render delay

Keep TTFB low with a CDN, less server work, and no needless redirects. Kill render delay by removing render-blocking CSS/JS and avoiding long tasks (and don't gate the LCP behind a client-side A/B-test script that decides which image to show).