Performance & CWV · Glossary · Updated Apr 2026

Largest Contentful Paint(LCP)

Definition

Largest Contentful Paint (LCP) is the time from navigation start until the largest image or text block in the initial viewport renders. It's one of Google's three Core Web Vitals. Good: ≤ 2.5 seconds at the 75th percentile of real-user visits.

Find related

Long definition

LCP tracks when the biggest above-the-fold element — usually a hero image, a banner, or the main heading block — finishes painting. It's Google's proxy for "did the user see the content they came for, quickly?"

The element considered "largest" is picked by the browser: images, video posters, background images loaded via CSS, and large text blocks all qualify. Off-screen content and anything smaller than the current LCP candidate is ignored.

LCP has four budget components, and an audit should attribute time to each:

Time to First Byte (TTFB) — server work + network to first response byte.
Resource load delay — time from TTFB until the LCP resource starts being fetched.
Resource load time — time to actually download the LCP resource.
Element render delay — time from resource loaded until the browser paints it.

The common pattern for a failing LCP is #2 dominating: render-blocking CSS and JavaScript in the <head> delay the browser's discovery of the LCP image. Fixes that move the needle the most: <link rel="preload" as="image"> on the hero, eliminating render-blocking stylesheets, and serving next-gen image formats (AVIF, WebP).

Common misconceptions

"LCP = when the page finishes loading." No — LCP is a single paint event for one element. The page can keep loading content for seconds after LCP.
"Preloading every image helps LCP." Preloading images that are not the LCP element just competes for bandwidth with the actual LCP candidate and makes things worse. Preload exactly the LCP image.
"LCP only cares about images." Text blocks qualify as LCP candidates. For content-heavy pages (articles, docs), the LCP is often the H1 or the first large paragraph, not an image.
"Lazy-loading the hero saves bandwidth." It usually breaks LCP. Lazy-load images below the fold; leave above-the-fold images eager with fetchpriority="high".

Continue exploring