What Is Largest Contentful Paint
Which Element Counts as the LCP Element
Largest Contentful Paint (LCP) is the time it takes for the largest visible content element in the viewport to render. It is a loading metric: it tells you when the main part of the page has appeared, not when every resource has finished downloading.
The candidate elements are images, video poster images, background images loaded through CSS and blocks of text. The browser picks the largest one that is visible during the initial load. Hidden or covered elements do not count. The choice can change while the page loads if a larger element appears, and it is fixed once the visitor first clicks, taps or presses a key.
The Four Sub-Parts of LCP
LCP can be split into four phases, which helps explain why a value is slow:
- Time to first byte, the delay before the browser receives the first part of the HTML response. This is covered in depth in the time to first byte topic.
- Resource load delay, the gap between the browser discovering the LCP resource and starting to download it.
- Resource load duration, the time spent downloading the LCP resource itself.
- Element render delay, the gap between the resource arriving and the element appearing on screen.
Each phase has different causes. A slow server affects the first part, a large file affects the third, and scripts or stylesheets that block painting can extend the last. Looking at the phases shows where the time is going.
Common Causes of a Poor LCP
The most frequent cause is a large image that is the largest element on the page, such as a hero photo wider than the screen and far heavier than it needs to be. The second is a slow server response, which delays everything after it. The third is a resource that is discovered late, for instance a background image referenced only from a stylesheet, which the browser cannot start fetching until that stylesheet has been processed.
Other causes include stylesheets and scripts that delay the first paint of the main element, and lazy loading applied to an image that appears at the top of the page. Image sizing and formats are described in the image optimization topic, and blocking resources in the render-blocking resources topic.
Frequently asked questions
What is a good LCP score?
An LCP of 2.5 seconds or less is good. Between 2.5 and 4 seconds it needs improvement, and above 4 seconds it is poor. The value is judged at the 75th percentile of page loads in field data, so most visits need to meet the threshold, not just a few.
Why does my LCP differ between tests?
Lab tests simulate one device and network, while field data reflects many visitors. Location, caching state and device size can all change which element is the LCP and how long it takes. Lab results help diagnose problems, and field data shows the experience your visitors really have.