What is ReportWebVitals.js?

nBase structure after CRA

Web Vitals

// App.js on your Root folder...reportWebVitals(console.log);
  • delta : difference between currenct value and last-reported value. (Always same on first report)
  • entries: list of calculated metric value
  • id : unique id indicates specific measurement tool. It is being used when we manage duplicated values.
  • name: metric name (CLS, FCP, FID, LCP, TTFB)
  • value : measured value (Smaller is better)

Metrics

Image from https://web.dev/vitals/
  • Largest Contentful Paint (LCP): measures loading performance. To provide a good user exepreience, LCP should occur within 2.5 seconds of when the page first starts loading.
  • First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of 100 millisieconds or less.
  • Cumulative Layout Shift(CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less
  • Time to First Byte (TTFB) : meaures the time between the request for a resource and when the first byte of a response begins to arrive.
  • First Contentful Paint (FCP): measures the time when the page starts loading to when any part of the page’s content is rendered on the screen.
FCP explained

How to get it?

function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
const url = 'https://example.com/analytics';

// Use `navigator.sendBeacon()` if available, falling back to `fetch()`
if (navigator.sendBeacon) {
navigator.sendBeacon(url, body);
} else {
fetch(url, { body, method: 'POST', keepalive: true });
}
}

reportWebVitals(sendToAnalytics);
function sendToAnalytics({ id, name, value }) {
ga('send', 'event', {
eventCategory: 'Web Vitals',
eventAction: name,
eventValue: Math.round(name === 'CLS' ? value * 1000 : value), // values must be integers
eventLabel: id, // id unique to current page load
nonInteraction: true, // avoids affecting bounce rate
});
}

reportWebVitals(sendToAnalytics);

Wrap-up

Reference

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What is Context API and Build Dark Mode App with it

Sketch your city with ArcGIS API for JavaScript

An accessible “Load more” implementation

How to Upload files to Cloudinary with Nodejs & Mongodb

React vs Angular

Let’s discuss optimization in React(Hooks)

React Hooks & CSS Styling

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Daniel

Daniel

More from Medium

How to fix `create-react-app` 4.0.3, which is behind the latest release (5.0.0)

Why does my useEffect call twice in React 18?!

decodingReact

An Introduction to ESLint