web-vitals icon indicating copy to clipboard operation
web-vitals copied to clipboard

Suggestion to track all attributions

Open psabharwal123 opened this issue 1 year ago • 4 comments

hi this is not a bug but a feature request to track all attributions that caused a particular CLS, in the attribution build. the logic behind this is as follows - lets say we have 5 layout shifts within 5s, first one has score of .15 and other 4 have score between .1 and .14, now attribution would always be given to first shift (even with reportAllChanges) but it is important for us to track attribution of each shift, as we need to fix each one for the CLS to be considered good.

psabharwal123 avatar Apr 22 '24 21:04 psabharwal123

This can be measured with a simple performance observer:

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // Count layout shifts without recent user input only
    if (!entry.hadRecentInput) {
      console.log("LayoutShift value:", entry.value);
    }
  }
});

observer.observe({ type: "layout-shift", buffered: true });

The main benefit of the library is to manage all the complexities and calculations to calculate the CLS metric from those raw layout shifts. Without the need of that, the raw underlying layout-shifts can be used.

Can you explain if there’s something you would expect the library to do on top of that?

tunetheweb avatar Apr 22 '24 21:04 tunetheweb

we would still like to use the library because, as you said, it mnages complexities like CLS being all layout shifts within 5s period that are no more than 1s apart. simple performance observer would not provide that.

It would be nice if attribution build can provide details about each attribution that makes up the score and not just the one that has most impact

psabharwal123 avatar Apr 22 '24 22:04 psabharwal123

Oh sorry I misread. The metric entries object should contain a list of all the entries. The attribution build then just filters that down to the largest one for you, but you have them all if you need them.

tunetheweb avatar Apr 22 '24 22:04 tunetheweb

in that case we would have to repeat all of the logic that attribution build has for each entry, for eg. getting selector, etc

psabharwal123 avatar Apr 22 '24 22:04 psabharwal123