Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) is the Core Web Vitals metric for loading speed: the time from when a visitor starts navigating to when the largest element in the viewport — typically the hero image, video poster, or headline block — finishes rendering. Good is 2.5 seconds or less; over 4 seconds is poor, measured at the 75th percentile of real visits.

What counts as the LCP element?

The browser watches the viewport as the page loads and tracks the largest thing painted so far: an image, a video poster frame, a background image loaded via CSS, or a block of text. Whatever holds the "largest so far" title when loading settles is your LCP element — and on most marketing sites, that's the hero image or the H1.

This is worth checking rather than guessing (PageSpeed Insights names the element), because teams routinely optimize the wrong thing. A cookie banner, a font-swapped headline, or a late-loading carousel slide can steal the LCP title from the element you thought mattered.

How do you improve LCP?

Four fixes cover the large majority of slow LCP scores:

1. Make the LCP element load first, not last. Don't lazy-load the hero image (a shockingly common self-inflicted wound), do preload it, and use fetchpriority="high". In Next.js, that's the priority prop on next/image.
2. Shrink what's being loaded. Serve modern formats (WebP/AVIF), size images to their rendered dimensions, and compress. A 2MB hero PNG is an LCP problem no framework can save.
3. Cut the wait before the browser can even start. Slow server response (TTFB) delays everything downstream. Static generation or edge rendering — which Next.js gives marketing sites almost for free — is the structural fix.
4. Unblock rendering. Render-blocking scripts and stylesheets in the head postpone the first paint of everything, LCP included. Third-party tags are the usual suspects.

The rendering choice matters more than most tuning: a statically generated page starts painting immediately, while a page waiting on server data or client JavaScript starts late and fails LCP on mobile networks. We cover that decision in static vs. dynamic rendering.

FAQ

What is a good LCP score?

2.5 seconds or less at the 75th percentile of real-user visits is "good"; 2.5–4 seconds "needs improvement"; over 4 seconds is "poor." Because the grade uses field data, the target has to hold on mid-range phones and average connections — not just on your office fiber.

Why is my LCP bad even though my site feels fast?

Almost always because you're feeling lab conditions and Google is measuring field conditions: real visitors on slower devices and networks, often landing cold without your cached assets. Check PageSpeed Insights' field section for the real number, then look for the classic culprits — a lazy-loaded hero, an oversized image, or slow server response.

Is LCP more important than the other Core Web Vitals?

It's the one most B2B marketing sites fail first, and it's the most directly tied to bounce — a visitor who's still staring at a blank hero at 4 seconds may never interact at all (which makes INP moot). Fix LCP first, then CLS, then INP, unless your data says otherwise.