What is LCP? Largest Contentful Paint (LCP)

Maximum Content Drawable (LCP) is an important user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the main content of the page has basically loaded. A fast LCP helps reassure users that the page is valid.

Measuring how quickly the main content of a web page loads and how quickly that content is displayed to the user has long been a challenge for web developers.

Such asloadorDOMContentLoaded (DOM content loaded)These old indicators weren’t great because they didn’t necessarily correspond to what the user saw on the screen.First Contentful Paint (FCP)These newer user-centric performance metrics only capture the very beginning of the loading experience. If a page shows a splash screen or loading indicator, those moments are less relevant to the user.

We have recommended some performance indicators in the past, such asFirst Meaningful Paint (FMP)andSpeed Index Speed Index (SI) (Both metrics are included in the Lighthouse tool) These metrics help capture more of the loading experience after the initial paint, but they are complex, difficult to interpret, and often wrong, which means they still cannot identify the point in time when the main content of the page has loaded.

Sometimes less is better than more.W3C Web Performance Working GroupBased on discussions with Google and research conducted by Google, we found that a more accurate way to measure when the main content of the page has loaded is to look at when the largest element has finished rendering.

What is LCP?

The Largest Contentful Paint (LCP) metric is based on the pageFirst start loadingThe maximum visible area in the visible area is reported at the time pointImage or text blockThe relative time at which the rendering was completed.

What is a good LCP score?

To provide a good user experience, websites should strive to keep the maximum content paint within2.5 secondsor less. To ensure that you are hitting the recommended target for the majority of your users’ visits, a good measurement threshold is75th percentile, and this threshold applies to both mobile and desktop devices

For more information on the research and methodology behind these recommended values, see:Define metric thresholds for core web metrics

What elements are taken into consideration?

According to the currentMaximum Content Drawable APIAccording to the provisions of , the element types considered for maximum content drawing are:

imgelement
Embedded insvgInside the elementimageelement
videoElements (Use Cover Image)
passurl()Function (rather than usingCSS Gradients) elements with background images loaded
Contains text nodes or other inline-level text element childrenBlock-level elements.

Please note that we have intentionally limited the elements to these few types to keep things simple in the initial stages. We may add other elements in the future (e.g.svg , video).

How to determine the size of an element?

The size of an element reported for the largest content drawable is usually the size visible to the user within the viewport. If any element extends outside the viewport, or if any element is clipped or contains invisibleoverflow, these parts are not counted in the element size.

ForOriginal sizeFor resized image elements, the element size reported to the metric is either the visible size or the original size, whichever is smaller. For example, a scaled-down image that is much smaller than its original size will only report the image's displayed size, while an image that has been stretched or blown up to a larger size will only report the image's original size.

For text elements, the metric only considers the size of its text nodes (the smallest rectangle that contains all text nodes).

For all elements, any margins, padding, or borders set via CSS are not taken into account.

Determining which text nodes belong to which elements can sometimes be tricky, especially for elements whose children include both inline elements and plain text nodes, as well as being part of a block-level element. The key point is that each text node belongs to (and only to) its nearest block-level ancestor.Standard terminologyTo explain: Each text node belongs to theContaining BlockThe corresponding element of .

When is largest contentful paint reported?

Web pages are often loaded in stages, so the largest element on the page may change.

To account for this potential change, the browser dispatches alargest-contentful-paintTypePerformanceEntry, which identifies the largest content element. However, after rendering subsequent frames, the browser dispatches anotherPerformanceEntry.

For example, on a page with text and a header image, the browser might initially render only the text portion and issue alargest-contentful-paintItem, whose element attribute usually refers to aporh1 Then, once the first image has finished loading, the browser will dispatch the secondlargest-contentful-paintThe element attribute will refer to theimg .

It is important to note that an element is considered the largest content element only after it has finished rendering and is visible to the user. Images that have not yet loaded are not considered "rendered".Font blocking periodThe same is true for text nodes using web fonts. In this case, the smaller element may be reported as the largest content element, but once the larger element has finished rendering, it will be reported as the largest content element by another element.PerformanceEntryThe subject reports.

In addition to lazy loading images and fonts, the page may add new elements to the DOM as new content becomes available. If any of the new elements is larger than the previous largest content element, the browser will also report a newPerformanceEntry.

If the current largest content element is removed from the viewport (or even from the DOM), it will continue to be the largest content element until a larger element finishes rendering.

Prior to Chrome 88, the removed element was not considered the largest content element, and removing the current candidate would trigger the browser to dispatch a new one.largest-contentful-paintHowever, this metric has been updated to more accurately reflect the user experience for popular UI patterns such as image carousels where DOM elements are often removed. SeeChangelog for more details.

When the user interacts with the page (by tapping, scrolling, or pressing keys), the browser will immediately stop reporting new items, because user interactions often change the content visible to the user (this is especially true when scrolling).

For analytical purposes, you should report only the most recently distributedPerformanceEntry.

Because the user can open the page in a background tab and focus that tab much later than when the page is first loaded, the maximum contentful paint might not occur until the user focuses the tab.

Loading Time vs. Rendering Time

For safety reasons,Timing-Allow-Originheader, the image's rendering timestamp is not exposed. Instead, only the image's load time is exposed (because load time is already exposed through many other web APIs).

BelowUsage Examplesexplains how to handle elements where render time is not available. However, we always recommend that you set upTiming-Allow-Originheaders, thus making your metrics more accurate.

How to handle element layout and element size changes?

To keep the cost of calculating and distributing new performance entries low, changes to the size or position of an element do not generate new LCP candidates. Only the initial size and position of the element within the visible area are taken into account.

This means that an image that was initially rendered offscreen and then transitioned onto the screen may not be reported as such. This also means that an element that was initially rendered within the viewport and then pushed outside the viewport will still report its initial size as being within the viewport.

Example

Here are some examples of when the largest contentful paint occurs on some popular sites:

In the two timelines above, the largest element changes as content loads. In the first example, new content is added to the DOM and therefore the largest element changes. In the second example, the previously largest content is removed from the viewable area due to a layout change.

While lazy-loaded content is often larger than content already on the page, this is not necessarily the case. The next two examples show the largest content paint appearing before the page is fully loaded.

In the first example, the Instagram logo loads relatively early and remains the largest element even as other content is displayed later. In the Google search results page example, the largest element is a block of text that appears before any images or logos have finished loading. Since all the individual images are smaller than the text, it remains the largest element throughout the loading process.

In the first frame of your Instagram timeline, you may have noticed that the camera icon is not surrounded by a green box. This is because the icon is asvgelements, andsvgThe element is not currently considered an LCP candidate. The first LCP candidate is the text in the second frame.

How to measure LCP

LCP can belaboratoryMeasure oractualMeasured and can be used in the following tools:

Measurement tools

Laboratory Tools

Measuring LCP in JavaScript

To measure LCP in JavaScript, you can useMaximum Content Drawable API The following example shows how to create aPerformanceObserverto listen for the largest-contentful-paint entry and log it in the console.

new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log('LCP candidate:', entry.startTime, entry); } }).observe({type: 'largest-contentful-paint', buffered: true});

The above code shows how tolargest-contentful-paintEntries are logged in the console, but measuring LCP in JavaScript is more complicated. See below for details:

In the example above, each recordedlargest-contentful-paintThe entries represent the current LCP candidates. Usually, the startTime value emitted by the most recent entry is the LCP value, but this is not always the case. Not alllargest-contentful-paintItems can be used to measure LCP.

The following sections list the differences between what the API reports and how the metrics are calculated.

Differences between indicators and APIs

The API distributes largest-contentful-paint entries for pages loaded in background tabs, but these pages should be ignored when calculating LCP.
The API continues to distribute largest-contentful-paint entries after the page moves to the background, but these entries should be ignored when calculating LCP (elements are only considered when the page is always in the foreground).
When the page passesRoundtrip CacheThe API does not report the largest-contentful-paint entry when resuming, but LCP should be measured in these cases because this is multiple different page visits for the user.
The API does not account for elements within iframes, but to correctly measure LCP, you should account for them. Child frames can use the API to report the largest-contentful-paint entry for these elements to the parent frame for aggregation.

Instead of having to remember all these nuances, developers can useweb-vitals JavaScript libraryto measure LCP, the library handles these differences itself (where possible):

import {getLCP} from 'web-vitals'; // Measure and log as soon as LCP is available. getLCP(console.log);

You can refer to the source code of getLCP() for a complete example of how to measure LCP in JavaScript.

In some cases (such as cross-domain iframes), CLS cannot be measured in JavaScript. See the web-vitals library for more details.limitationpart.

What if the largest element is not the most important element?

In some cases, the most important element (or elements) on the page is not the largest element, and developers may be more interested in measuring the rendering time of the former.Element Timing APITo achieve this, the API is aboutCustom IndicatorsDescribed in the article.