Largest Contentful Paint API

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

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>.

LargestContentfulPaint

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

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']});

• Largest Contentful Paint (LCP)
• LCP in Lighthouse