What Is CLS? How to Fix Cumulative Layout Shift
Understand Cumulative Layout Shift and learn how to prevent unexpected movement caused by images, ads, fonts, dynamic content, and layout changes.
What Is Cumulative Layout Shift?
Cumulative Layout Shift (CLS) measures unexpected visual movement during a page visit. A page can feel unstable when text, buttons, images, or other elements move after the user has started interacting with it.
Common Causes of Layout Shift
Images Without Dimensions
If the browser does not know an image's dimensions before it loads, surrounding content may move when the image appears. Define image dimensions or use an appropriate aspect ratio.
Ads and Embedded Content
Reserve space for advertisements, videos, maps, and other dynamic components instead of allowing them to push existing content around.
Web Fonts
Font loading can change text metrics and cause visible changes. Test your font-loading strategy and reduce unnecessary font variants.
Dynamic UI Components
Notifications, banners, cookie interfaces, and injected content can cause shifts if they appear without reserved space.
How to Reduce CLS
- Set dimensions for images and videos.
- Reserve space for ads and embeds.
- Avoid inserting content above existing content.
- Use stable placeholders for dynamic components.
- Review font loading behavior.
- Test pages on real devices and different network conditions.
Read our Core Web Vitals guide for LCP, CLS, and INP together.
Conclusion
Good CLS optimization is largely about giving the browser enough information to allocate layout space before content arrives. Stable layouts make pages easier to use and interact with.