core-web-vitalsweb-vitals

Is it possible to get more details from the chrome web vitals extension?

Here is the screenshot.

The extension is developed by Google Web Vitals officially. Is it possible to see which DOM element(s) caused my CLS score from zero to 0.140?

enter image description here

Solution

  • You can get more detailed information in the console.

    Go into Options for the extension:

    How to get at extension options screenshot

    Then turn on console logging:

    Extension options screenshot

    Then in the Console expand the CLS output to get the attribution:

    Example CLS console log

    Hovering over the node in the console (as shown here) will also highlight the affected area in purple.

    It should be noted that these are the shifts, not necessarily the causes of the shift. So if an element is inserted the elements beneath are the ones experiencing the shift and those will be logged here - not the element that caused them to shift. But hopefully this is possible to figure out from this attribution information.