Add support for newest version of CLS

[mmocny]

Now that CLS is evolving we should consider adding it to the web-vitals library.

I had previously taken a stab at adding several of the experimental variants to a fork of web-vitals.js. I am not sure if all the complexity I added there is needed if we are going to stick to a single CLS updated in-place.

Also, a simpler snippet for calculating the new CLS in case its useful.

(Related: GoogleChrome/web-vitals-extension#85)

[philipwalton]

Yep, thanks for adding an issue for this. My plan was to time updating this library with the new version around the same time that Lighthouse and CrUX roll out their updates, so all Google tools are consistent.

We'll likely end up making this a major version change, in which case we could potentially publish a pre-release version with the new metric version prior to it being available in other tools (if folks really wanted to play around with it sooner).

[Tiggerito]

It would be nice to get some time to refactor tools that use CLS. I presume logic will have to change for dealing with multiple CLS events. e.g. you can't do summing of delta values.

[philipwalton]

I presume logic will have to change for dealing with multiple CLS events. e.g. you can't do summing of delta values.

You should still be able to do summing of delta values. E.g. if the first session window returns 0.7 and then another session windows returns a value of 0.8, the new metric value would be 0.8 and the delta would be 0.1.

The only thing that would be different that might (arguably) be considered a breaking change is the set of layout-shift entries that contribute to the current value might be completely different after a new max session window is found. If users are expecting that the entries array in the Metric object is only ever adding new entries, then changing the set of entries completely might be unexpected to some.

[mikegeyser]

Hi! :D

We're currently actively optimising for CLS, and as much as I understand the need for consistency across google tools, there is a lead time involved in fixing CLS issues (across some of our teams that are currently struggling with longer-lived pages).

I know we can use @mmocny's snippet (thank you BTW!), but for what it's worth would far prefer it be incorporated in the web-vitals.js script - even if it's a prerelease version. Does that make sense?

[philipwalton]

We're currently actively optimising for CLS, and as much as I understand the need for consistency across google tools, there is a lead time involved in fixing CLS issues (across some of our teams that are currently struggling with longer-lived pages).

Thanks @mikegeyser, yes that makes sense. And I actually heard very similar feedback from someone else yesterday, so I'll try to make sure we have a prerelease version available soon.

[delambo]

The Google Search Console has an annotation that forwards to this CLS update which states that the (a?) change rolled out on Apr 13th? Did CrUX not update on the same timeline? I second that landing this change earlier would be super helpful for userland to debug cls issues 🙏

[tunetheweb]

There have been a few CLS changes: https://chromium.googlesource.com/chromium/src/+/main/docs/speed/metrics_changelog/cls.md

This newer version is a bigger change, with a likely bigger impact for long-lived pages, and I imagine it'll also be annotated in GSC when it lands. But I don't work for Google so that's just a guess on my part 😀

[mikegeyser]

Hey @philipwalton! Sorry for bugging, I was just wondering if a prerelease version was still on the cards?

[philipwalton]

@mikegeyser yes, I plan to get one out at some point this week.

[mikegeyser]

Thank you @philipwalton!

[philipwalton]

I've published v2.0.0-beta.1, which includes the changes to update the CLS definition. If you're installing from npm, you can get the most release prerelease version using the next tag, e.g.:

npm install web-vitals@next