Cumulative Layout Shift (CLS)
A measure of how much visible page content unexpectedly shifts during loading.
Key takeaways
- Cumulative Layout Shift (CLS) is a measure of how much visible page content unexpectedly shifts during loading.
- Set width and height (or an aspect ratio) on every image, video and embed.
- Avoid: injecting banners above existing content after the page has rendered.
What is Cumulative Layout Shift (CLS)?
CLS captures visual stability. Aim for under 0.1 (Google) or under 0.05 (our budget). Reserve space for images, embeds and fonts to prevent shifts.
web.dev's guide to Cumulative Layout Shift explains how the score is calculated.
Why Cumulative Layout Shift (CLS) matters for SEO in 2026
CLS measures how much the page jumps while it loads. Layout shifts cause misclicks and make a site feel cheap, and they're usually simple to prevent once you know the cause.
For a wider view of where this fits, see our full SEO glossary or explore the SEO and GEO service we run for clients.
How to apply Cumulative Layout Shift (CLS) on your site
Knowing the concept is only half of it. Work through these steps in order to put Cumulative Layout Shift (CLS) into practice on your own pages:
- Set width and height (or an aspect ratio) on every image, video and embed.
- Reserve space for ads, banners and cookie notices before they load.
- Load fonts so text doesn't reflow when the web font arrives.
Common mistakes to avoid
Most sites that struggle with Cumulative Layout Shift (CLS) fall into the same traps. Check your pages against each of these before moving on:
- Injecting banners above existing content after the page has rendered.
- Animating properties that move layout instead of using transforms.
- Only testing on a fast connection where shifts happen too quickly to notice.
Questions about Cumulative Layout Shift (CLS)
A measure of how much visible page content unexpectedly shifts during loading.
CLS measures how much the page jumps while it loads. Layout shifts cause misclicks and make a site feel cheap, and they're usually simple to prevent once you know the cause.
Start here: set width and height (or an aspect ratio) on every image, video and embed. Then reserve space for ads, banners and cookie notices before they load.
The most common is injecting banners above existing content after the page has rendered. Another is animating properties that move layout instead of using transforms.