Cumulative Layout Shift (CLS)
Understand Cumulative Layout Shift and its impact on user experience and search engine rankings.
What is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) is a Core Web Vital metric that measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. It quantifies how often users experience unexpected layout shifts.
Why CLS Matters
- Affects user experience and frustration levels
- Impacts Google's search rankings
- Influences overall perception of site quality
Factors Affecting CLS
Images without dimensions
Specify width and height for all images
Ads, embeds, and iframes
Reserve space for dynamically injected content
Web Fonts
Optimize font loading to prevent layout shifts
Dynamically injected content
Avoid inserting content above existing content
Animations
Use transform animations instead of properties that trigger layout changes
Actions waiting for network response
Use skeleton screens or placeholder UI
How to Optimize CLS
| Technique | Description |
|---|---|
| Set size attributes on images and video elements | Always include width and height attributes or set via CSS aspect ratio boxes |
| Reserve space for ad slots | Statically reserve space for ad slots to prevent layout shifts when ads load |
| Avoid inserting new content above existing content | Unless in response to user interaction |
| Use CSS transform for animations | Instead of properties that trigger layout changes |
| Preload fonts | Use font:preload along with font-display: optional to prevent layout shifts due to font loading |
Pro Tip
Use tools like Chrome DevTools' Performance panel or Lighthouse to identify and measure layout shifts on your pages. This will help you pinpoint specific elements causing CLS issues.
Optimizing for Cumulative Layout Shift can significantly improve your website's user experience and potentially boost your search engine rankings. By addressing the factors that contribute to layout shifts, you can create a more stable and enjoyable browsing experience for your users.