Upgrade to web-vitals v3

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?

[k-fish]

@AbhiPrasad thanks, I already have a good chunk of the INP code written, but it means we’ll have to re-consider the transaction model to include interactions. I think we can cut a branch at the very least to try it out and then graduate it into a beta branch / mainline it as an experimental option if that proves to work for our app at least.

[AbhiPrasad]

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