Responses (0)
Text
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.
1
import reportWebVitals from './reportWebVitals';
2
3
reportWebVitals(console.log);
4
// This will report metrics into a console.
This argument function will be provided with an object of type:
1
interface Metric {
2
name: 'CLS' | 'FCP' | 'FID' | 'LCP' | 'TTFB';
3
value: number;
4
delta: number;
5
id: string;
6
isFinal: boolean;
7
entries: PerformanceEntry[];
8
}
Sending Beacons#
You can use beacons for better capturing performance reports on your analytics server:
1
function sendToAnalytics(metric: Metric) {
2
const body = JSON.stringify(metric);
3
const url = 'https://example.com/analytics';
4
5
if (navigator.sendBeacon) {
6
navigator.sendBeacon(url, body);
7
}
8
}
Sources#
Clap
0|0