Cumulative Layout Shift (CLS)
A visual stability metric that measures unexpected shifts of content during page load. Part of Core Web Vitals.
In brief
CLS (Cumulative Layout Shift) quantifies how much the layout jumps during loading. A good score is below 0.1, poor above 0.25. High CLS degrades user experience and can harm rankings.
What is CLS
A visual stability metric. Measures unexpected layout shifts during page load. For example, you are reading text, an image without dimensions loads, the text shifts down — that’s poor CLS.
Threshold Values
- Good → < 0.1
- Needs improvement → 0.1 – 0.25
- Poor → > 0.25
Causes of Poor CLS
- Images without dimensions — <img> missing width/height
- Dynamic content — banners, ads inserted after load
- Web fonts — FOIT (Flash of Invisible Text) or FOUT (Flash of Unstyled Text)
- Animations — changing element dimensions
How to Improve CLS
- Set image dimensions — width and height attributes
- Reserve space — for dynamic content (skeleton screens)
- font-display: swap — for web fonts
- Avoid inserting content above existing content
- Use transform — instead of changing width/height/top/left
Code Examples
HTML
<!-- Bad: no dimensions -->
<img src="hero.jpg" alt="Hero">
<!-- Good: with dimensions -->
<img src="hero.jpg" alt="Hero" width="1200" height="600">
<!-- Good: aspect-ratio -->
<img src="hero.jpg" alt="Hero" style="aspect-ratio: 16/9; width: 100%;">CLS is computed as the product of impact fraction (how much viewport shifted) and distance fraction (how far). Google collects data through the Chrome User Experience Report, so test with real users, not just lab tools.
FAQ
Common questions
CLS is one of the three Core Web Vitals that make up the Page Experience factor. Poor CLS leads to high bounce rates (users get annoyed when a 'Buy' button moves), which indirectly affects rankings.
Use Google PageSpeed Insights, Google Search Console (Core Web Vitals report), Lighthouse in DevTools, and the Web Vitals Chrome extension.
Yes, if image dimensions are not specified. With lazy loading, an image may load after scroll and shift content. Always set width/height or use a CSS container with fixed aspect ratio.
FOIT (Flash of Invisible Text) hides text until a web font loads. FOUT (Flash of Unstyled Text) shows a fallback font first then swaps. Both can cause CLS if font replacement changes line height. Use font-display: swap and fallback fonts with similar metrics.
Reserve a fixed space for ads. For dynamic ads, use a container with min-height and skeleton loading so the block doesn't appear suddenly.
Direct contacts
Discuss your project?
Share your goals and website context — I will suggest a practical next step.