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
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:
You can use beacons for better capturing performance reports on your analytics server: