GlossarySEO
What is Largest Contentful Paint (LCP)?
Also called: LCP, largest contentful paint element
Definition
Largest Contentful Paint (LCP) is a Core Web Vital measuring how long it takes for the largest image or text block in the viewport to render. Google's target is 2.5 seconds or less for 75% of page loads.
Largest Contentful Paint (LCP), explained
web.dev defines LCP as the render time of the largest image, text block or video visible in the viewport, relative to when the user first navigated to the page. The elements it considers are <img> elements, <image> elements inside an SVG, <video> elements (poster image or first frame), elements with a CSS url() background image, and block-level elements containing text. On most landing pages the LCP element is the hero image or the main headline.
The thresholds are 2.5 seconds or less for good, up to 4 seconds for needs improvement, and over 4 seconds for poor, measured at the 75th percentile of page loads, separately for mobile and desktop. Field data from real Chrome users decides whether you pass in Search Console.
web.dev breaks LCP into four parts, which tells you where to look. Time to First Byte: how long the server takes to respond. Resource load delay: how long before the browser starts fetching the LCP image. Resource load duration: how long the image takes to download. Element render delay: time between the resource arriving and the element actually painting, often caused by render-blocking CSS or JavaScript.
The usual fixes follow from those parts. Serve pages from a CDN or statically to cut TTFB. Make the hero image discoverable in the HTML rather than injected by script, don't lazy-load it, and consider fetchpriority="high" on it. Compress it to WebP or AVIF at the size it's displayed. And trim render-blocking resources in the head.
Why it matters for founders
LCP is the metric people feel as "this page is slow". It's often the one that fails on landing pages built around a big hero screenshot.
Example
Your hero screenshot is a 1.8MB PNG with loading="lazy". You convert it to a 180KB WebP, remove lazy loading, add fetchpriority="high", and field LCP drops under 2.5 seconds over the next month.
Common mistakes
- Lazy-loading the LCP image.
- Hero images injected by JavaScript or set as CSS backgrounds loaded late.
- Oversized images scaled down in the browser.
- Judging LCP from a fast laptop instead of field data.
Sources
Checked
Related terms
- Core Web VitalsCore Web Vitals are three Google metrics for real-user page experience: Largest Contentful Paint (loading), Interaction to Next Paint (responsiveness) and Cumulative Layout Shift (visual stability).
- Time to First Byte (TTFB)Time to First Byte (TTFB) is the time from starting to navigate to a page until the first byte of the response arrives. It's not a Core Web Vital, but it delays everything after it, including LCP.
- Lazy loadingLazy loading delays loading images, iframes or content until they're about to scroll into view. It speeds up pages, but content must load without clicks or scrolling or Google may never see it.
- Render-blocking resourcesRender-blocking resources are CSS and JavaScript files the browser must download and process before it can show anything on screen. Lighthouse flags them because they delay first paint.