Largest Contentful Paint (LCP) is a Core Web Vitals metric that measures the time it takes for the largest visible element in the viewport to render after a page begins loading. It approximates how quickly a page appears to be loaded from the user’s perspective.

LCP is one of three Core Web Vitals (along with INP and CLS) used by Google as a search ranking signal.

What counts as the LCP element

The largest contentful element is determined automatically. It is typically:

A hero image
A video poster image
A large block of text (heading or paragraph)
A background image (when applied to the body or a hero element)
A <canvas> or SVG element (in some cases)

The LCP element can change during page load as larger elements render. The final LCP is the largest element rendered before the user scrolls or interacts with the page.

LCP thresholds

Google’s published thresholds:

Score	Threshold
Good	Under 2.5 seconds
Needs improvement	2.5–4.0 seconds
Poor	Over 4.0 seconds

These thresholds apply to the 75th percentile of real-user data, meaning at least 75% of page loads must meet the threshold for a site to be classified at that level.

How LCP is measured

LCP can be measured in two ways:

Field data. Real users browsing the site, aggregated in the Chrome User Experience Report (CrUX). This is the basis for Google’s ranking signal
Lab data. Simulated tests in tools like PageSpeed Insights, Lighthouse, and WebPageTest

Field and lab data can differ significantly because lab tests use a single device and network configuration, while real users vary widely.

Common factors that affect LCP

LCP depends on the time spent in four phases:

Time to First Byte (TTFB). Server response time
Resource load delay. Time before the LCP resource starts loading
Resource load duration. Time to download the LCP resource
Element render delay. Time after the resource is loaded before it is rendered

Common causes of poor LCP:

Slow server response. High TTFB delays everything
Render-blocking resources. CSS or JavaScript in the head that delays rendering
Large hero images. Big, unoptimized images that take time to download
Late-loading hero images. The image is not prioritized in the loading order
Client-side rendering. JavaScript must download and execute before the page can render
Web fonts. Late-loading custom fonts delay text rendering

Common optimizations

Use a CDN to reduce TTFB
Optimize and resize hero images. Use modern formats (WebP, AVIF) and appropriate dimensions
Preload the LCP resource. Use <link rel="preload"> to hint the browser
Use fetchpriority="high" on the LCP image (modern browsers prioritize it)
Eliminate render-blocking resources. Inline critical CSS, defer non-critical JavaScript
Use efficient image hosting. Many CDNs include automatic image optimization
Server-render or pre-render the page rather than relying on client-side rendering
Pre-load fonts with appropriate font-display settings
Upgrade hosting if TTFB is consistently high

LCP by site type

LCP performance varies by how the page is built and hosted:

Site type	Typical LCP characteristics
Pre-rendered static site on a CDN	Often well under 2.5s; HTML and assets cached at edge
Server-rendered site with caching	Often under 2.5s; depends on cache hit rate
Server-rendered site without caching	Variable; can exceed 2.5s on shared hosting
Client-side rendered SPA	Often over 2.5s; JS must download and execute first
Hosted CMS (Squarespace, Wix, Webflow) on default templates	Often above 2.5s

These are general patterns; specific results depend heavily on configuration.

Where to check LCP

PageSpeed Insights, both lab and field LCP for any URL
Chrome DevTools → Performance, diagnose LCP candidate, timing breakdown, and improvement opportunities
Google Search Console → Core Web Vitals, field LCP grouped by URL pattern
Web.dev measure, diagnostic tool with specific recommendations

LCP vs FCP

First Contentful Paint (FCP) is the time until any content (text, image, etc.) is rendered. LCP is the time until the largest visible content element is rendered. FCP is usually faster than LCP; both are useful but measure different things.

LCP is the more user-meaningful metric: it approximates when the page feels “done loading” rather than just when something appears.

Common misconceptions

“LCP is the same as page load time.” LCP measures when the largest visible element renders, not when the entire page finishes loading.
“Improving LCP requires changing infrastructure.” Many LCP improvements come from optimizing the LCP element itself (image size, format, prioritization) without changing hosting.
“A passing lab LCP guarantees a passing field LCP.” Real users vary in device and network; lab tests don’t capture this variance.
“LCP only includes images.” Text blocks, videos, and background images can all be the LCP element.