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 

 and it measures a set of metrics that aim to capture the user experience of a web page. 

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

, 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[];
}

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);
  }
}

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Measuring Performance in Create React App</h1><p>Create React App includes a built-in tool for measuring the real life performance of your app. It is called <code>reportWebVitals</code> and it measures a set of metrics that aim to capture the user experience of a web page. </p><p>This set is called <a href="https://web.dev/vitals/" rel="noopener noreferrer nofollow">web vitals</a> and includes:</p><ul><li><p>First Contentful Paint</p></li><li><p>Largest Contentful Paint</p></li><li><p>Time To First Byte</p></li><li><p>Cumulative Layout Shift</p></li><li><p>First Input Delay</p></li></ul><p>Under the hood Create React App uses a third-party library called <code><a href="https://github.com/GoogleChrome/web-vitals/" rel="noopener noreferrer nofollow">web-vitals</a></code>.</p><h2><a name="usage" id="usage">Usage</a></h2><p>To use this feature there is a function <code>reportWebVitals</code>, which takes another function as an argument. </p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-iilix" id="cm-iilix">import reportWebVitals from './reportWebVitals';

reportWebVitals(console.log);
// This will report metrics into a console.</textarea><p>This argument function will be provided with an object of type:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-yeMDy" id="cm-yeMDy">interface Metric {
    name: 'CLS' | 'FCP' | 'FID' | 'LCP' | 'TTFB';
    value: number;
    delta: number;
    id: string;
    isFinal: boolean;
    entries: PerformanceEntry[];
}</textarea><h2><a name="sending-beacons" id="sending-beacons">Sending Beacons</a></h2><p>You can use beacons for better capturing performance reports on your analytics server:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-HME5f" id="cm-HME5f">function sendToAnalytics(metric: Metric) {
  const body = JSON.stringify(metric);
  const url = 'https://example.com/analytics';

  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body);
  }
}</textarea><h2><a name="sources" id="sources">Sources</a></h2><ul><li><p><a href="https://create-react-app.dev/docs/measuring-performance/" rel="noopener noreferrer nofollow">Measuring Performance</a></p></li><li><p><a href="https://web.dev/vitals/" rel="noopener noreferrer nofollow">Web Vitals</a></p></li><li><p><code><a href="https://github.com/GoogleChrome/web-vitals/" rel="noopener noreferrer nofollow">web-vitals</a></code> library</p></li></ul>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Measuring Performance in Create React App

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript