About

First Contentful Paint (FCP) ¹⁾:

• is a page load timing metrics
• that measures the time:
  • from navigation
  • to the time when the browser renders the first bit of content from the DOM (which may be text, an image, SVG, or even a canvas element)

It captures the very beginning of the loading experience.

The FCP will occurs you when a splash screen or a loading indicator is seen by the user (The icon while loading is known as a wiki/Throbber)

However, the page is still not usable for the user, the Largest Contentful Paint metrics captures the page usability.

How to measure it ?

With:

• the performance timeline interface if available
• perfume

Example:

• All results are reported to the analyticsTracker callback

new Perfume({
  analyticsTracker: options => {
    const { metricName, data, eventProperties, navigatorInformation, vitalsScore, } = options;
    if(metricName !== 'fcp'){
      return;
    }  
    console.log('firstContentfulPaint duration:'+data);
  },
});