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.

import reportWebVitals from './reportWebVitals';

reportWebVitals(console.log);

// This will report metrics into a console.

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

interface Metric {

    name: 'CLS' | 'FCP' | 'FID' | 'LCP' | 'TTFB';

    value: number;

    delta: number;

    id: string;

    isFinal: boolean;

    entries: PerformanceEntry[];

}

Sending Beacons#

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

function sendToAnalytics(metric: Metric) {

  const body = JSON.stringify(metric);

  const url = 'https://example.com/analytics';

  if (navigator.sendBeacon) {

    navigator.sendBeacon(url, body);

  }

}

Sources#

• Measuring Performance

• Web Vitals

• web-vitals library