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

Better CLS logging #122

Closed tunetheweb closed 1 year ago

tunetheweb commented 1 year ago

With #119 the CLS logging looks like this:

image

That is each shift is an object, made up of the nodes that shifted. Organisationally, this makes sense but practically this is less than ideal as it leads to two extra clicks to get to the objects to highlight them in the main screen and also messy logs as the array prototype is shown:

image

This PR changes it log the elements directly, rather than in an object, so they can quickly be hovered over to see the element affected - exactly as how it works for LCP logging:

image

It also removes the prototypes. It is a bigger log by default, and less structured, but I think cleaner.

The grouping is still apparent IMHO, as each shift is separated by a "Layout shift - score: X.XX" line:

image