Measure interactivity metrics in performance tests

[swissspidy]

This is a follow-up to #58360.

While we have some good load time metrics so far, we don't measure interactivity metrics yet.

We're particularly looking at these 3 metrics:

• ​Total Blocking Time (TBT)
• ​First Input Delay (FID)
• ​Interaction to Next Paint (INP)

They can be measured using libraries like Lighthouse or ​https://github.com/GoogleChrome/web-vitals.

Interactivity metrics require some sort of interaction during the test, so we need to figure out specifics.

[swissspidy]

Note that TBT is a lab metric that is not covered by web-vitals.js

In JS it could be done with something like

var totalBlockingTime = 0;
var observer = new PerformanceObserver(function (list) {
  let perfEntries = list.getEntries();
  for (const perfEntry of perfEntries) {
    totalBlockingTime += perfEntry.duration - 50;
  }
  console.log({ totalBlockingTime });
});
observer.observe({ type: "longtask", buffered: true });

(​source)

[flixos90]

On the one hand, I'd argue we don't need to measure TBT because FID and INP are far more meaningful.

On the other hand, the reason TBT is used in some tooling is because it's the only way to reliably get a glimpse of interactivity in automated tests. The problem with both FID and INP is that they require actual interactions to happen. How could we implement that in a way that works across our test suites? What would the interactions be that we implement? I feel like this may end up an arbitrary decision, so I'm not sure about how feasible it is.

In other words, I think we should implement either FID and INP or TBT. The first one would be ideal, but the latter may be realistically the only option.