Page (Load|Speed) Metric - First Contentful Paint (FCP)



First Contentful Paint (FCP) 1):

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 ?



  • All results are reported to the analyticsTracker callback
new Perfume({
  analyticsTracker: options => {
    const { metricName, data, eventProperties, navigatorInformation, vitalsScore, } = options;
    if(metricName !== 'fcp'){
    console.log('firstContentfulPaint duration:'+data);

Discover More
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)...
Page Load - Navigation (Browsing)

navigation is the first point in time of a page load. This is the trigger of the page load. It happens when clicking: on a anchor (hyperkink) on a submit form on any element (such as button) that...
Browser Devtool Performance Page Load Timing
Page Load Event (Timing)

Page load timing are events that occurs during a page load. The snapshot below is the timing timeline in the devtool performance tab of a page load. where: FP - is the first paint - the paint of...
Page Load Metrics - Time to First Bit (TTFB)

Time to First Bit (TTFB) is the time it takes for the server to send the first byte of data after the user makes a request. First Contentful Paint
Page Loading Key Moment
Web - Timeline of a page load (Page Speed|Page Latency)

Page load is the latency performance metrics that cumulates: TCP latency (ie how fast, the network will receive the HTTP request and send back the HTTP response ) HTTP latency (ie how fast the web...
Page Loading Key Moment
Web Page - Painting

Painting is the last step of the rendering phase for a page load. This phase takes the box model tree created during the layout rendering phase and positions each pixels accordingly to the screen. ...

Share this page:
Follow us:
Task Runner