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

Question

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;

Interviewer

Answer 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;

1. Core Web Vitals

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

2. Other Web Vitals

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

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

Interviewer