Core Web Vitals

Largest Contentful Paint (LCP)

The next scripts shows information about the LCP (opens in a new tab) metric.

You can use it in the browser console or as a snippet in the Chrome DevTools Source tab, take a look at the Introduction section.

Get the LCP element

List the Largest Contentful Paint in the console and add a green dotted line around the LCP element.


const po = new PerformanceObserver((list) => {
  let entries = list.getEntries();
  entries = dedupe(entries, "startTime");
  entries.forEach((item, i) => {
      `${i + 1} current LCP item : ${item.element}: ${item.startTime}`,
    item.element ? ( = "border: 5px dotted lime;") : "";
  const lastEntry = entries[entries.length - 1];
  console.log(`LCP is: ${lastEntry.startTime}`);
po.observe({ type: "largest-contentful-paint", buffered: true });
function dedupe(arr, key) {
  return [ Map( => [item[key], item])).values()];