This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

What is the FCP

First Content Rendering (FCP) measures the time it takes for a page to complete rendering on screen from the start of any portion of the page content being loaded. For this metric, “content” refers to text, images (including background images), < SVG > elements, or non-white

elements.

First Content Rendering (FCP) is an important user-centric measure of perceived load speed because it marks points in the page load timeline when the user first sees anything on screen, and quick FCP helps to assure the user that something is going on.

While some content has been rendered, not all of it has been rendered. This is an important difference between first Content Rendering (FCP) and *Largest Contentful Paint (LCP)*, which measures when the main content of a page has finished loading.

FCP indicators:

0-1.8 good 1.8-3.0 generally 3 above bad unit s

Measure FCP in JavaScript

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'paint', buffered: true});
Copy the code

However, there are many different scenarios between the actual metrics and the API that increase the complexity of our metrics calculations, and the Chrom team recommends that we use the Web-Vitals library to measure THE FCP instead of remembering these subtle differences.

Improve the FCP

  • Remove resources that block rendering
  • Smaller CSS
  • Remove the unused CSS
  • Preconnect to the desired source
  • Reduced server response time (TTFB)
  • Avoid multiple page redirects
  • Preload key requests
  • Avoid heavy network load
  • Service static assets using efficient caching strategies
  • Avoid DOM size
  • Minimize critical request depth
  • Ensure that the text remains visible during page font loading
  • Keep the number of requests low and the transfer size small

FCP eliminates blocking rendering

  • Script tags and link tags block rendering in general.

  • What are the key resources

    • The Coverage TAB of Chrome DevTools recognizes how much CSS and JS code is loaded and how much of that loaded code is used. We try to transfer the CSS styles and JS code we need to draw the first time.