CLS (Cumulative Layout Shift) is a Core Web Vitals metric that measures the total amount of unexpected movement of visible content elements while a page is loading. A high CLS leads to frustrating experiences, such as the text a user is reading suddenly shifting or the user clicking the wrong button.
Target values:
- Good: below 0.1
- Needs improvement: 0.1 – 0.25
- Poor: above 0.25
The main causes of CLS:
- Images and videos without specified dimensions
- Dynamic loading of ad or iframe spaces
- Text resizing while web fonts are loading (FOIT/FOUT)
- Banners or cookie notices added on top of content afterward
Tip: Add width and height attributes to all images, use font-display: swap for web fonts, and do not add anything on top of content without user interaction.