Largest ContentFul Paint (LCP)

About

Largest ContentFul Paint (LCP) ¹⁾

• is a web core vital metrics of page load
• that measures the time:
  • from navigation
  • to the time when the browser renders the largest image or text block visible within the viewport (ie above the fold)

It captures when the page is fully usable by the user (Not when a splash screen or a loading indicator is seen by the user (ie first contentful paint) but after), relative to when the page first started loading.

How to measure ?

With the PerformanceObserver

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate: '+entry.startTime);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});