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>

AUTHOR

Alex Bespoyasov

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: Under the hood Create React App uses a…

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

Measuring Performance in Create React App

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript