Include a performance relayer

[housseindjirdeh]

Is your proposal related to a problem?

There's no easy way to measure real-user performance on a React site.

For CRA, it would be great if there was a way to measure track performance metrics via a simple function. Developers would be able to log values to the console and/or send results to an analytics endpoint for all users on their site.

Describe the solution you'd like

web-vitals is a tiny lib (~1KB) that measures useful performance metrics on a page ("Web Vitals"):

• First Contentful Paint
• Largest Contentful Paint
• Time To First Byte
• Cumulative Layout Shift
• First Input Delay

It would be nice if CRA had this library installed by default and exposed to the user via a simple function. For example:

// index.js

import React from 'react';
...
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to measure performance in your app, uncomment the following line. 
// You can pass in any function to handle these values (for example, send to an analytics endpoint).
// Learn more: https://bit.ly/CRA-vitals
// reportWebVitals(console.log);

Describe alternatives you've considered

There's always the option to not change the default behavior of CRA and just point users to the web-vitals library in the docs so that they can include it themselves. However:

• Users are less likely to install and plug in a library than uncomment a single line of code (similar to how a service worker can be registered in CRA)
• If we include the web-vitals lib by default so users can measure core metrics (TTFB, FCP, LCP, etc...), we could also expand this to include additional custom metrics in the future. For example, what if we wanted users to be able to relay the render times for all, or some, of their components? (I've landed similar functionality in Next.js to track useful custom metrics)

Definitely open to hearing opinions on this however. If it is overkill to include a new library to CRA by default, then adding a new page to the docs to show how could be a good first step 👍

Additional context

Some other framework tooling have added this feature or are planning to in the near future:

• This feature was recently added to Next.js (see the Measuring Performance page in their docs).
• Nuxt.js have shipped a nuxt-vitals module to make it easier to send performance metric results to analytics
• Gatsby is planning to add this functionality

[iansu]

We're very interested in adding this to Create React App! Is it just a matter of adding the web-vitals library and exposing this function in our templates? We're planning to do a release very soon so I'd love to get this in. Let us know if you're able to submit a PR or if you'd like someone from the project to do it.

[housseindjirdeh]

Awesome!

Is it just a matter of adding the web-vitals library and exposing this function in our templates?

Yep! It's relatively straightforward, and the library will take care of firing the callback every time any of the web vital metrics are determined. Super simple example here.

It might be worthwhile to have a page in the docs that show how it can be used to relay to analytics as well. We can probably just point directly to the section in the README too.

We're planning to do a release very soon so I'd love to get this in. Let us know if you're able to submit a PR or if you'd like someone from the project to do it.

If someone can submit a PR that would be great! If not, I can try and find some time in the coming weeks :)