dom / latest / largest_contentful_paint_api.html /

Largest Contentful Paint API

The Largest Contentful Paint (LCP) API enables monitoring the largest paint element triggered on screen.

Concepts and Usage

The Largest Contentful Paint metric provides the render time of the largest image or text block visible within the viewport, recorded from when the page first begins to load. The API supports the following elements:

Interfaces

LargestContentfulPaint

Reports details about the largest image or text paint before user input on a web page.

Examples

The following example shows an image and a large paragraph of text. An observer is registered to get the largest contentful paint while the page is loading.

<img src="large_image.jpg">
<p id='large-paragraph'>This is large body of text.</p>
const observer = new PerformanceObserver((list) => {
  let perfEntries = list.getEntries();
  let lastEntry = perfEntries[perfEntries.length - 1];
  // Process the latest candidate for largest contentful paint
});
observer.observe({entryTypes: ['largest-contentful-paint']});

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
Largest_Contentful_Paint_API
77
79
No
No
64
No
77
77
No
55
No
12.0
element
77
79
No
No
64
No
77
77
No
55
No
12.0
id
77
79
No
No
64
No
77
77
No
55
No
12.0
loadTime
77
79
No
No
64
No
77
77
No
55
No
12.0
renderTime
77
79
No
No
64
No
77
77
No
55
No
12.0
size
77
79
No
No
64
No
77
77
No
55
No
12.0
toJSON
77
79
No
No
64
No
77
77
No
55
No
12.0
url
77
79
No
No
64
No
77
77
No
55
No
12.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Largest_Contentful_Paint_API