'What is the web-vitals, comming with create-react-app?

I have just recognised that my newly created Reactjs application have a file src/reportWebVitals.js, which is being called in index.js. What is this file/pice of code for?

const reportWebVitals = onPerfEntry => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

reactjs web-vitals

Solution 1:^[1]

It is a third-party library is used to capture and measure user experience metrics comming as a default with create-react-app.

The web-vitals library is a tiny (~1K), modular library for measuring all the Web Vitals metrics on real users, in a way that accurately matches how they're measured by Chrome and reported to other Google tools (e.g. Chrome User Experience Report, Page Speed Insights, Search Console's Speed Report).

They are grouped under two title;

Core Web Vitals

Cumulative Layout Shift (CLS)
First Input Delay (FID)
Largest Contentful Paint (LCP)

Other Web Vitals

First Contentful Paint (FCP)
Time to First Byte (TTFB)

for more detail -> https://github.com/GoogleChrome/web-vitals

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Sedat Polat

'What is the web-vitals, comming with create-react-app?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]