Cumulative Layout Shift (CLS)
Measures how much page content visually shifts while loading. Target: below 0.1. The main culprits are images without specified dimensions.
Cumulative Layout Shift, CLS for short, is one of the three Core Web Vitals and measures the visual stability of a page while it loads.
What layout shifts are
You know the feeling: you are about to click a button, a second later an ad loads above it and you accidentally click the ad. That is a layout shift. Google assesses the sum of all such shifts over the entire lifetime of the page, not just during the initial load.
Thresholds
A CLS score below 0.1 is good. Between 0.1 and 0.25 needs improvement. Above 0.25 is poor. The score has no unit and is calculated from the share of the affected viewport multiplied by the distance of the shift.
Common causes of CLS
Images without width and height attributes. The browser only knows the dimensions after the download and then has to recalculate the layout. Web fonts without fallback adjustment. If the fallback font is wider than the custom font, the text jumps after loading. Banners and cookie notices that appear later and push content down. Dynamic ads with variable height.
How to avoid CLS
Set width and height on every img tag, even in a responsive layout. The browser derives the aspect ratio from them and reserves space. For web fonts, use size-adjust and ascent-override so the fallback takes up exactly as much space as the real typeface. Put ad slots in fixed containers. Show cookie banners as an overlay on top of the content, not as a block that pushes it aside.
Related terms
Want to improve your website?
We analyse your site and tell you honestly what is worth fixing. The initial consultation is free.
Free initial consultation