Cumulative Layout Shift (CLS) — Content Jumping and Layout Instability Fix
About Cumulative Layout Shift (CLS)
Fix high Cumulative Layout Shift (CLS) scores caused by images without dimensions, dynamic content insertion, and web fonts causing text reflow. This guide covers everything you need to know about this topic, including common causes, step-by-step solutions, and answers to frequently asked questions.
Here are the key things to understand: CLS measures visual stability — how much the page layout shifts during loading. Google considers CLS good if under 0.1, needs improvement between 0.1-0.25, and poor over 0.25. Layout shifts are counted when visible elements change position after being initially rendered. CLS is a Core Web Vital metric used as a search ranking signal. User-initiated layout changes (clicking a button, typing) do not count toward CLS. Understanding these fundamentals will help you diagnose and resolve this issue more effectively.
The most common reasons this occurs include: Images and videos without explicit width and height attributes. Ads, embeds, or iframes inserted dynamically that push content down. Web fonts causing text to reflow when custom fonts load and replace fallback fonts (FOIT/FOUT). Dynamic content injected above existing content (banners, notifications, cookie consents). Identifying the root cause is the first step toward finding the right solution.
To resolve this, follow these recommended steps: Add width and height attributes to all images and videos: <img width='800' height='600'>. Use aspect-ratio CSS: aspect-ratio: 16/9 to reserve space before the image loads. Reserve space for ads and embeds using min-height on their containers. Optimize font loading: use font-display: swap and preload critical fonts. Inject dynamic content below the fold or in reserved placeholder spaces. If these steps do not resolve the issue, consider consulting additional resources or a qualified professional.
This article is part of our Browser Errors collection on Error Codes Wiki. We provide comprehensive, up-to-date information to help you find solutions quickly.
Quick Answer
Why do images cause layout shift?
Without width/height attributes, the browser does not know the image dimensions until it loads. It renders the page with zero space for the image, then shifts content down when the image arrives. Setting dimensions lets the browser reserve space.
Overview
Fix high Cumulative Layout Shift (CLS) scores caused by images without dimensions, dynamic content insertion, and web fonts causing text reflow.
Key Details
- CLS measures visual stability — how much the page layout shifts during loading
- Google considers CLS good if under 0.1, needs improvement between 0.1-0.25, and poor over 0.25
- Layout shifts are counted when visible elements change position after being initially rendered
- CLS is a Core Web Vital metric used as a search ranking signal
- User-initiated layout changes (clicking a button, typing) do not count toward CLS
Common Causes
- Images and videos without explicit width and height attributes
- Ads, embeds, or iframes inserted dynamically that push content down
- Web fonts causing text to reflow when custom fonts load and replace fallback fonts (FOIT/FOUT)
- Dynamic content injected above existing content (banners, notifications, cookie consents)
Steps
- 1Add width and height attributes to all images and videos: <img width='800' height='600'>
- 2Use aspect-ratio CSS: aspect-ratio: 16/9 to reserve space before the image loads
- 3Reserve space for ads and embeds using min-height on their containers
- 4Optimize font loading: use font-display: swap and preload critical fonts
- 5Inject dynamic content below the fold or in reserved placeholder spaces