search

GoogleChrome / web-vitals-extension

A Chrome extension to measure essential metrics for a healthy site
https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en
Apache License 2.0
2.35k stars 105 forks source link

Add support for newest version of CLS #85

Closed mmocny closed 3 years ago

mmocny commented 3 years ago

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

I had previously taken a stab at adding several of the experimental variants to a fork of web-vitals.js as well as to a fork of this extension. 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.

lebreRafael commented 3 years ago

@mmocny so we should not trust on Web Vitals Extension for CLS numbers until this issue is closed, right? The reason I'm asking is that I'm seeing different numbers between the extension and the Performance tab on devtools, and I'm not sure which one is correct.

mmocny commented 3 years ago

The latest version of this extension was just released to the store. Looking at the package.json dependency on web-vitals.js, it includes the version with updated CLS.

It wasn't explicitly mentioned in the blogpost, but I think at this point this bug can be closed.

I'll wait for owners to confirm.

mmocny commented 3 years ago

Also, @lebreRafael , I know for sure that the DevTools CLS numbers are not updated. The situation for DevTools is especially weird since a page recording can take an arbitrary time slide, rather than the full page lifecycle.

lebreRafael commented 3 years ago

If Devtools is outdated that would explain the mismatch, because I'm already using the latest version (1.0.1) of web-vitals-extension, so it should be correct.

@mmocny did you find any issue or something like that saying that Devtools CLS is outdated? If you don't maybe I should open an issue on their repo for that.

lebreRafael commented 3 years ago

I just realized that sometimes I see different numbers between extension and web-vitals JS lib (I'm using it to log CLS on console). Any idea why it is happening?

mmocny commented 3 years ago

I don't have a way to account for that, except in some very odd edge cases (i.e. loading the libraries in different frames, or if the layout-shift entry buffer was already full).

Just to confirm: you are using the 1.0 version of CWV extension and 2.x version of the web-vitals.js library?

lebreRafael commented 3 years ago

yes, CWV 1.0.1 and web-vitals.js 2.1.0

mmocny commented 3 years ago

Could you give an example site where you see a divergence? Or better yet, a simple repro test page?

I am getting the same values across the sites I test locally in console, but I'm not sure how you are embedding web-vitals.js

lebreRafael commented 3 years ago

I'll try to create a repro page and publish in a public repo in the next few days

rviscomi commented 3 years ago

The latest version of this extension was just released to the store. Looking at the package.json dependency on web-vitals.js, it includes the version with updated CLS.

It wasn't explicitly mentioned in the blogpost, but I think at this point this bug can be closed.

I'll wait for owners to confirm.

Yes the latest version of the extension should now be using the updated CLS definition so I think we can close this.