Preview:
let lastLcp;
const po = new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();
  for (const entry of entries) {
    if (entry.startTime !== lastLcp) {
      console.log(
        `New LCP: ${entry.startTime}ms
Size: ${entry.size} px^2
HTML: ${entry.element ? entry.element .outerHTML.slice(0, 80): "(no element)"}`
      );
      lastLcp = entry.startTime;
    }
  }
});
po.observe({ type: "largest-contentful-paint", buffered: true });
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter