What is Largest Contentful Paint (LCP)?

LCP is one of Google's three Core Web Vitals metrics that measure how performance impacts the user experience. This metric measures how long it takes the largest image, text block, or video visible in the viewport to render, counted from when the visitor first navigates to the page. The other two Core Web Vitals are Interaction to Next Paint (INP), which measures responsiveness, and Cumulative Layout Shift (CLS), which measures visual stability.

Page load time has a significant impact on your website's user experience. Moreover, Core Web Vitals metrics are among the signals that Google considers in its search rankings.

Elements that count toward LCP

Only a few element types can be a page’s LCP element. Google’s LCP documentation (last updated September 4, 2025) lists them:

• <img> elements (for animated formats like GIFs, the first frame counts)
• <image> elements inside an <svg>
• <video> elements, timed from the poster image or the first frame, whichever renders earlier
• Background images loaded with the CSS url() function
• Block-level elements containing text

Some elements never qualify: invisible elements, backgrounds that cover the full viewport, and low-entropy placeholder images (the blurry stand-ins shown while the real image loads). In practice, the LCP element on most pages is the hero image or the main headline text block.

The browser doesn’t pick the LCP element just once. It reports a first candidate as soon as content paints, then reports a new candidate each time something larger renders: a headline often holds the title early in the load, then loses it when the hero image finishes. Size means visible size, so only the area an element actually shows inside the viewport counts. Measurement ends as soon as the visitor scrolls, taps, or presses a key, or when the tab moves to the background, and the last candidate reported stands as the page’s LCP element.

Before you optimize anything, confirm which element the browser actually picked: PageSpeed Insights and Chrome DevTools both name the final LCP element.

What is a good LCP score?

Google considers an LCP of 2.5 seconds or less good, measured at the 75th percentile of page loads and segmented across mobile and desktop. The full bands:

• Good: 2.5 seconds or less
• Needs improvement: between 2.5 and 4 seconds
• Poor: more than 4 seconds

By their nature, LCP times can never be lower than First Contentful Paint (FCP) times, and the two are equal when the first content painted is also the largest, as on a text-only page whose headline renders first. Google’s target for FCP is 1.8 seconds or less, meaning the first content appears quickly, while LCP tracks when the largest eligible content appears. A large gap between the two can point to an LCP element that is discovered, loaded, or rendered late.

Checking your LCP score

PageSpeed Insights and the Core Web Vitals report in Google Search Console show field data: the LCP real Chrome users recorded on your pages, collected through the Chrome User Experience Report (CrUX). Lighthouse and Chrome DevTools show lab data: one test run under controlled conditions.

The two often disagree, and that’s expected. Field LCP includes redirect time and the server’s Time to First Byte exactly as real visitors experience them, aggregated across every device, connection, and location your audience brings, while a lab test is a single run under one controlled setup. Use field data to judge real-user performance, because that’s what Google evaluates, and use lab tools to reproduce a slow load and diagnose its cause.

Improving a slow LCP

A slow LCP doesn’t have a single cause, so diagnose before you fix: a Chrome DevTools performance trace breaks the LCP timing into subparts, showing whether the time goes to the server response, to loading the LCP resource, or to rendering it. Then apply the fix that matches. These are the most common causes:

• Slow server response: add server-side caching or a CDN, or move to hosting with a faster response time.
• Render-blocking CSS and JavaScript: defer noncritical scripts and inline the CSS the first paint needs.
• A large, unoptimized hero image: compress it, size it to the space it fills, and never apply lazy loading to the LCP element, because that delays exactly the element this metric times.
• Client-side rendering: if JavaScript assembles the page in the browser, the largest element can’t render until the scripts finish, so render the main content on the server instead.

If your LCP is above 2.5 seconds, start with our guide to improving Core Web Vitals.