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:

<img> elements.
<image> elements inside an SVG.
The poster images of <video> elements.
Elements with a background-image.
Groups of text nodes, such as <p>.

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

Specification
Largest Contentful Paint # sec-largest-contentful-paint-interface

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	Yes	No	77	77	No	Yes	No	12.0
`element`	77	79	No	No	Yes	No	77	77	No	Yes	No	12.0
`id`	77	79	No	No	Yes	No	77	77	No	Yes	No	12.0
`loadTime`	77	79	No	No	Yes	No	77	77	No	Yes	No	12.0
`renderTime`	77	79	No	No	Yes	No	77	77	No	Yes	No	12.0
`size`	77	79	No	No	Yes	No	77	77	No	Yes	No	12.0
`toJSON`	77	79	No	No	Yes	No	77	77	No	Yes	No	12.0
`url`	77	79	No	No	Yes	No	77	77	No	Yes	No	12.0