Include a performance relayer

Created by: 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