LargestContentfulPaint: id property

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The id read-only property of the LargestContentfulPaint interface returns the ID of the element that is the largest contentful paint.

Value

A string containing the ID of the element, or the empty string if there is no such ID.

Examples

Logging the largest contentful paint element ID

This example uses a PerformanceObserver notifying of new largest-contentful-paint performance entries as they are recorded in the browser's performance timeline. The buffered option is used to access entries from before the observer creation.

js

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1]; // Use the latest LCP candidate
  console.log(lastEntry.id);
});
observer.observe({ type: "largest-contentful-paint", buffered: true });

Specifications

Specification
Largest Contentful Paint
# dom-largestcontentfulpaint-id

Browser compatibility

BCD tables only load in the browser