search

Zizzamia / perfume.js

Web performance library for measuring all performance vitals metrics
https://zizzamia.github.io/perfume/
MIT License
3.13k stars 112 forks source link

CLS calculation #192

Closed carloscohen2202 closed 2 years ago

carloscohen2202 commented 2 years ago

Dear Leonardo,

first of all, we want to say “thank you” for your great perfume.js library. We have been using it for a while to read the Google Core Web Vitals in our shop and optimize our performance. Thanks a lot for that!

For a couple of days we compared the CLS values gained from perfume.js with the ones that we saw on the Google Search Console. Despite the fact that the quantity of users / measurements is different - the results were quite different so we decided to take a look at the calculation of this metric. At https://web.dev/cls/#what-is-cls we’ve learned that the CLS should be the maximum session value of all sessions (in Chrome translated as “cluster”). We took a closer look at the perfume.js implementation and saw that we’re adding the CLS events (see https://github.com/Zizzamia/perfume.js/blob/95ee7744f32f532c2f4f08054ce31fc2bf77108f/src/cumulativeLayoutShift.ts#L12 ) instead of looking for a maximum. The logic at that point seems to differ a bit from the one purposed at https://web.dev/cls/#measure-cls-in-javascript .

We would like to know if you agree with us and plan to correct this in a future version?

Best regards and stay healthy, Jan & Carlos

Zizzamia commented 2 years ago

Ciao @carloscohen2202, thank you for the ping and sorry for the late reply.

Something I am been thinking for quite a while if it's time to make Perfume.js a superset of the Web Vitals package, by importing the package into Perfume and add some extra functionality on top of it.

This will help stay always align with Google updates, and also keep the extra features that Perfume wants to experiment and offers.

What's your thoughts on this?

chrisweidya commented 2 years ago

Hi @Zizzamia, riding on this thread, I noticed that the clsFinal reported value differs to that of web-vitals's cls. I investigated both libraries and it seems that Perfume captures the later layout-shift event values (presumably because it was initialised later?). Any layout-shift values before that doesn't seem to be captured?

I think making Perfume.js a superset of Web Vitals package is a great idea as this would streamline the data collection mechanism.

Zizzamia commented 2 years ago

Alright, now Perfume.js is a super set of Web Vitals, starting from v8.0.0. Which will help have better parity of data with the official Web Vitals.

Please, if you see anything that is not working let me know and I will take care of it.

carloscohen2202 commented 2 years ago

Thanks a lot @Zizzamia