Upgrade to web-vitals v3

[AbhiPrasad]

Problem Statement

Web Vitals v3 is currently in beta.

Allows us to start tracking INP, which can replace FID.

https://web.dev/inp/

Writing your own PerformanceObserver to measure INP can be difficult. To measure INP in JavaScript, it's advised that you use the web-vitals JavaScript library, which exports an onINP function to do this work for you. At the moment, getting INP data is only possible in version 3 of web-vitals, currently in beta, which can be installed with the following command:

npm install web-vitals@next --save

You can then get a page's INP by passing a function to the onINP method:

import {onINP} from 'web-vitals';
onINP(({value}) => {
 // Log the value to the console, or send it to your analytics provider.
 console.log(value);
});

As with other methods exported by web-vitals, onINP accepts a function as an argument, and will pass metric data to the function you give it. From there, you can send that data to an endpoint for collection and analysis.

Solution Brainstorm

https://www.npmjs.com/package/web-vitals/v/next

https://github.com/GoogleChrome/web-vitals/compare/next

Seems like its around ~2kb larger. Can we address that?

[AbhiPrasad]

Release candidate has been released: GoogleChrome/web-vitals#250 (comment)

[AbhiPrasad]

Has been released: GoogleChrome/web-vitals#250 (comment)

https://github.com/GoogleChrome/web-vitals/releases/tag/v3.0.0

https://github.com/GoogleChrome/web-vitals/blob/main/CHANGELOG.md#v300-2022-08-24

[vladanpaunovic]

For the moment and scope of this issue, we are only interested to upgrade to web vitals v3.

We shouldn't invest time supporting the INP for the time being as this is something we are looking to get more requests from the performance team.

[AbhiPrasad]

Note, @timfish's work in #5987 does not include code for INP. That will have to be vendored separately (cc @k-fish)