Largest Contentful Paint, often shortened to LCP, is a web performance metric introduced by Google to measure how quickly a user perceives the main content of a page loading. In practical terms, it marks the moment when the largest visual element inside the browser viewport is fully rendered. That element can be an image, a block of text, a video or a large graphic element.
The Largest Contentful Paint value is expressed in seconds and is measured both in the field, with real user data, and in the lab with tools like Lighthouse. It reflects what the person actually sees on screen. Together with Interaction to Next Paint and Cumulative Layout Shift, it helps define the Core Web Vitals, the set of indicators Google uses to assess page experience. INP replaced First Input Delay in March 2024.
What Largest Contentful Paint measures
Largest Contentful Paint measures the time between the start of page loading and the moment the largest element visible in the browser window finishes being painted. So it is not the first element that appears, but the one with the largest area, which usually captures the user’s attention. This distinction matters because a headline or a main image can dominate the scene even if it appears after other, smaller content.
The metric is updated dynamically: if an even larger element emerges during loading, the Largest Contentful Paint value is recalculated. The final figure corresponds to the last large element rendered before the user interacts with the page, for example with a scroll or a click.
How the largest element is identified
The calculation is based on observing candidate elements within the viewport. The browser compares the size of each element and records the render time of the largest one. Candidates include images, videos, background images loaded via CSS and blocks of text.
Which elements count
Not every element on the page contributes to Largest Contentful Paint. Content outside the visible window, images with zero dimensions and hidden elements are excluded, for example. The comparison only happens between what the user can actually see at load time.
How it differs from First Contentful Paint
Unlike metrics such as First Contentful Paint, which signals the appearance of the first content, Largest Contentful Paint focuses on the most significant element. That makes it closer to how the user actually perceives loading speed.
LCP, ranking and browsing experience
Core Web Vitals are part of the page experience signals Google considers in ranking, without stating a weight: content relevance matters more. A slow LCP mainly affects experience: someone who sees the main content late may leave the page before reading it.
Improving this metric means making the page faster in the part that matters most. For an e-commerce site, for example, the largest element might be the featured product image; for a blog, it might be the article title or a cover image.
The three performance bands and the reference values
Google classifies Largest Contentful Paint into three performance bands, based on the value measured at the seventy-fifth percentile of visits. These thresholds help you quickly interpret the quality of the experience offered.
| Band | LCP value | Google’s rating |
|---|---|---|
| Good | Up to 2.5 seconds | Fast loading |
| Needs improvement | Between 2.5 and 4 seconds | To be optimized |
| Poor | Over 4 seconds | Insufficient |
The thresholds are the same for mobile and desktop. The rating is based on the 75th percentile of visits, over a 28-day window in field data.
The four parts of LCP
To understand where time is lost, it helps to break LCP down into four consecutive phases:
- Server response time (TTFB): from when the request starts to the first byte of the response.
- Resource load delay: the time before the browser starts downloading the image or font of the main element.
- Resource load duration: the download time of the resource, which depends on weight, format and network.
- Element render delay: the time between the end of the download and the moment the element is actually painted, often caused by CSS or JavaScript blocking rendering.
The longest phase points to the priority fix: a slow server is not solved by compressing images, and vice versa.
Where to start to cut load times
Optimizing this metric requires targeted work on the resources that make up the largest element. The most effective strategies involve reducing server response times, eliminating render-blocking resources and prioritizing visible content.
Compress images and serve lighter files
Images are often the largest element on the page. Compressing them, using modern formats like WebP or AVIF and specifying the correct dimensions helps reduce loading times. Lazy loading should be applied to off-screen images, never to the main image: on the LCP element it delays appearance and makes the metric worse. For the main image, the fetchpriority=”high” attribute is useful, as it asks the browser to download it first.
Text and fonts: show the content right away
When the largest element is a block of text, the delay can depend on font loading. Preloading the essential characters and using font swap display lets you show the text before the final font is available.
Where to read field and lab data
Largest Contentful Paint is detected with both field and lab tools. Field tools collect data from real users, while lab tools simulate controlled conditions. Among the best known are PageSpeed Insights, which combines both sources, and the Core Web Vitals section in Search Console. Web performance monitoring libraries also let you collect the value directly from users’ browsers.
Operational best practices
- Reduce server response times by optimizing hosting, cache and database.
- Remove or defer render-blocking resources, such as stylesheets and non-critical code files.
- Preload the image or main content that acts as the largest element, with high priority (fetchpriority=”high”) and without lazy loading.
- Compress images and convert them to lighter modern formats.
- Apply lazy loading to everything outside the visible window.
- Reduce font weight and preload the essential characters.
- Monitor the metric regularly with real data, not just synthetic tests.
- Optimize content delivery through content delivery networks.
Frequently asked questions about Largest Contentful Paint
What exactly does Largest Contentful Paint measure?
It measures the time needed for the largest visual element in the browser window to be fully rendered, giving an indication of perceived loading speed.
What value is considered good?
A value of 2.5 seconds or less is considered good. Between 2.5 and 4 seconds performance needs improvement, while over 4 seconds it is poor.
Does Largest Contentful Paint affect ranking?
Yes, it is part of the Core Web Vitals, which Google considers among page experience signals. Google does not state the weight: it counts less than relevance and content quality.
Which elements can be the largest element?
Images, videos, background images loaded via CSS and large blocks of text can be, as long as they are visible in the browser window.
How do you improve this metric?
By optimizing the server, images, fonts and render-blocking resources, as well as preloading the main content and deferring what is not visible.
Where do you check the Largest Contentful Paint value?
You can check it through PageSpeed Insights, Search Console and performance monitoring tools that collect data from real users.
From the glossary to the projectDoes your site meet the Core Web Vitals thresholds?Performance optimization works on loading speed and Core Web Vitals for a better user experience.Discover Core Web Vitals optimization
Related entries:
Core Web Vitals Lcp google Cls core web vitals Cumulative Layout Shift