Measuring Performance in Create React App

Create React App includes a built-in tool for measuring the real life performance of your app. It is called reportWebVitals and it measures a set of metrics that aim to capture the user experience of a web page.

This set is called web vitals and includes:

  • First Contentful Paint

  • Largest Contentful Paint

  • Time To First Byte

  • Cumulative Layout Shift

  • First Input Delay

Under the hood Create React App uses a third-party library called web-vitals.

Usage#

To use this feature there is a function reportWebVitals, which takes another function as an argument.

This argument function will be provided with an object of type:

Sending Beacons#

You can use beacons for better capturing performance reports on your analytics server:

Sources#