Cumulative Layout Shift

[Inersha]

Does anyone know of any good tools for debugging pages with high CLS (Cumulative Layout Shift) scores in Core Web Vitals?

I've got a few pages showing a CLS of around 0.25 and I'm not sure what's causing it exactly. I know it's influenced by the layout shifting around as the page loads, but from generally watching the page as it loads and looking for jumps I can't see what would be affecting the score.

Has anyone found a methodical way to work on improving CLS? Or do you know of examples of things that commonly cause higher scores?

[elegancedesign.net]

Hello Inersa,

From my experience CLS comes most frequently from:
- Late-loaded fonts
- Images that do not have proper dimensions (width/height) before they load
- Late loaded css/js for elements that are in the viewport

Unfortunately there is no "common" rule for fixing that.

Good explanation (recommended by google) is:
https://www.datadab.com/blog/fix-***...-layout-shift/

[Inersha]

Hello Inersa,

From my experience CLS comes most frequently from:
- Late-loaded fonts
- Images that do not have proper dimensions (width/height) before they load
- Late loaded css/js for elements that are in the viewport

Unfortunately there is no "common" rule for fixing that.

Good explanation (recommended by google) is:
https://www.datadab.com/blog/fix-***...-layout-shift/

That's perfect, thank you.

The page you linked to mentions the Chrome Dev Tools > Performance tab, which looks to be exactly what I'm looking for.

[PROFRBcom]

Once I read the documentation, I was able to fix the CLS on our site. Well, hack fix it, but deal with it insofar as CWV is concerned