CLS Optimization: Ensuring Visual Stability
Cumulative Layout Shift (CLS) measures visual stability — how much elements unexpectedly shift during loading. CLS has the highest mobile pass rate at 81 percent among the three CWV.
Key Takeaways
- ✓CLS target: below 0.1
- ✓Dimensions for images and videos are the most important measure
- ✓Web Fonts with font-display: swap prevent FOIT/FOUT shifts
- ✓Ads and dynamic content need reserved placeholder space
- ✓CLS is measured throughout the entire page lifecycle
CLS concerns visual stability and is often the easiest CWV problem to solve.
Common CLS Causes
Images without dimensions: When width and height are missing, the browser does not reserve space. After loading, the entire content shifts. Solution: Always specify width and height attributes or CSS aspect-ratio.
Web Fonts: When loading custom fonts, the text area can jump (FOIT/FOUT). Solution: font-display: swap and preload fonts with link rel=preload.
Dynamic content: Ads, cookie banners, and embedded widgets that appear after the initial load. Solution: Reserve fixed placeholders (min-height) for dynamic areas.
Late-loading elements: Lazy-loaded images inserted while scrolling. Solution: Use aspect-ratio containers.
Measuring CLS
PageSpeed Insights shows the CLS value and identifies the biggest shift causes. Chrome DevTools Performance Panel visualizes each individual layout shift with timing and impact.
Data & Statistics
Ads ohne reservierten Platz sind die haeufigste CLS-Ursache auf kommerziellen Websites
Web Almanac (2025)“Layout shifts are frustrating. They can cause users to click the wrong button or lose their reading position.”
— Philip Walton, Google Chrome DevRel