Largest Contentful Paint (LCP): Definition, Thresholds, Fixes

What is Largest Contentful Paint (LCP)?

Largest Contentful Paint (LCP) is a Core Web Vital that measures how long it takes, counted from the moment the visitor starts navigating, for the largest image, text block or video in the viewport to finish rendering. Google rates 2.5 seconds or less as good, judged at the 75th percentile of real page loads, separately for mobile and desktop.

Because the clock starts at navigation, redirects, connection setup and a slow server response all count. LCP is one of three Core Web Vitals, next to INP (responsiveness) and CLS (visual stability).

LCP thresholds

A page passes when the 75th percentile of its page loads is in the good range. Mobile and desktop are judged separately. The thresholds are maintained on web.dev.

Which element counts as the LCP element?

The browser reports the largest of these elements that is visible in the viewport:

• <img> elements (the first frame for animated images)
• <image> elements inside an <svg>
• <video> elements, using the poster image or the first frame
• Elements with a CSS url() background image (not gradients)
• Block-level elements that contain text

Only the visible part counts, and Chromium ignores elements with zero opacity, elements that cover the whole viewport and placeholder images. The candidate can change while the page loads, for example when a hero image arrives after a headline. The browser stops reporting once the visitor taps, scrolls or presses a key, and pages loaded in a background tab are not counted.

The four parts of LCP

Every LCP time splits into four sub-parts. web.dev gives this guide for how a well-tuned page spends its time, to be read relative to each other rather than as absolute numbers:

Fix the part that is out of proportion on your page. A long load delay needs a different fix than a slow time to first byte.

Example: a hero image the browser finds late

A shop sets its hero photo as a CSS background-image in an external stylesheet. The browser cannot see the image in the HTML, so it waits for the CSS before it starts the download. That shows up as a large resource load delay. Moving the photo into an <img> with a high fetch priority lets the browser find it straight away:

<img src="/img/hero-1200.avif" alt="Product dashboard"
     width="1200" height="675" fetchpriority="high">

Serving a smaller file (see image size) then shortens the load duration.

How to improve LCP

• Make the LCP resource discoverable in the initial HTML, with src or srcset in the markup rather than added by JavaScript.
• If the image is only referenced from CSS or JavaScript, preload it with <link rel="preload">.
• Set fetchpriority="high" on the LCP image. web.dev warns it stops helping when it is set on more than one or two images.
• Never lazy-load the LCP image. Lazy loading is for images below the fold.
• Shrink the file: resize it to the displayed size and use a modern format such as AVIF or WebP.
• Cut server response time with caching and a CDN, and avoid redirect chains.

Common LCP mistakes

• Lazy-loading the hero image.
• Hiding the hero behind a JavaScript carousel or client-side render, so it is discovered late.
• Optimising the image while the server still takes seconds to respond.
• Putting fetchpriority="high" on every image.
• Testing only on a fast desktop connection and trusting that number.

How to measure LCP

Lab tools such as Lighthouse and Chrome DevTools measure one controlled load and name the LCP element, which makes them good for debugging. Field data comes from real visitors, for example the Chrome UX Report, and is what the Core Web Vitals pass or fail is based on. The two often disagree because real devices, networks and locations vary. To log LCP in the browser:

new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const last = entries[entries.length - 1];
  console.log('LCP:', last.startTime, last.element);
}).observe({ type: 'largest-contentful-paint', buffered: true });

LCP in testing and monitoring

LoadFocus page speed monitoring runs scheduled Lighthouse audits from 25 cloud regions and records Core Web Vitals including LCP, so a heavier hero image or a slower server shows up as a trend. The free Core Web Vitals checker shows the 75th-percentile LCP of real Chrome users for a URL. The step-by-step fixes for all three metrics are in our Core Web Vitals optimization guide. More reading: how to monitor Core Web Vitals with alerts and reports and 10 steps to a faster website.

FAQ: Largest Contentful Paint

What is a good LCP score?

2.5 seconds or less at the 75th percentile of page loads. Between 2.5 and 4.0 seconds needs improvement, and over 4.0 seconds is poor.

Why does Lighthouse show a different LCP than Search Console?

Lighthouse measures one simulated load. Search Console reports field data from real visitors over a period of time, on many devices and networks. Use the lab number to find causes and the field number to judge the result.

How do I find my LCP element?

Run a Lighthouse audit and open the Largest Contentful Paint element diagnostic, or record a trace in the Chrome DevTools Performance panel. In code, the element property of the largest-contentful-paint entry points to it.

Should I lazy-load my hero image?

No. web.dev says never to lazy-load the LCP image, because it adds delay before the download even starts. Lazy-load images further down the page instead.

Why is LCP slower on mobile?

Phones usually have slower processors and connections, and the smaller viewport can make a different element the largest one. Core Web Vitals are therefore judged separately for mobile and desktop.