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

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

Browser compatibility

BCD tables only load in the browser

See also