CLS – Cumulative Layout Shift
Cumulative Layout Shift (CLS) is a Core Web Vital that measures visual stability — how much page elements unexpectedly move during loading.
Reviewed by Alexander Yarovenko · Updated: 2026-09-18
What is Cumulative Layout Shift?
Cumulative Layout Shift (CLS) is a Core Web Vital metric that quantifies visual stability. It measures how much visible content unexpectedly shifts position during the loading process. A high CLS score means users experience jarring layout jumps — for example, a button moving just as they try to click it.
CLS Score Thresholds
| Score | Rating |
|---|---|
| 0 – 0.1 | ✅ Good |
| 0.1 – 0.25 | ⚠️ Needs Improvement |
| > 0.25 | ❌ Poor |
Common Causes of High CLS
- Images without explicit
widthandheightattributes - Ads, embeds, or iframes without reserved space
- Web fonts that cause FOUT (Flash of Unstyled Text)
- Dynamically injected content above existing content
- Animations that trigger layout changes
How to Fix CLS
- Always set
widthandheighton all images and video elements - Reserve space for ads with CSS
min-height - Use
font-display: optionalor preload critical fonts - Avoid inserting content above the fold after page load
SEO Impact
Google uses CLS as a ranking signal via the Page Experience update. Pages with poor CLS can be demoted in search results, especially on mobile. Measure your CLS using Google Search Console's Core Web Vitals report or PageSpeed Insights.
How to use this concept in SEO
CLS measures unexpected layout movement over the page lifetime. Reserve dimensions for images, ads, embeds, and dynamic components; avoid injecting content above what the user is reading.
Audit checklist
- Confirm that the implementation matches the page purpose and the user task.
- Check the HTTP response, rendered HTML, canonical, robots rules, and internal links together.
- Use Search Console and analytics to verify the result instead of relying on one crawler signal.
- Test a representative URL on mobile and desktop after deployment.
- Document the expected outcome so regressions can be detected in the next audit.
Practical example
An image card receives width, height, or aspect-ratio before the file loads, so surrounding text no longer jumps when the image appears.
How to validate the result
Record the current crawl, indexation, performance, and traffic state before changing anything. Recheck the affected template and a representative URL after deployment, then monitor Search Console over the following crawl cycle. A technical change is complete only when the live response and Google’s observed state agree.