You go to tap a button, the page jumps, and you tap an ad instead. That frustration has a name: Cumulative Layout Shift. This article explains what causes CLS, why it hurts users and search rankings, and the concrete steps to fix it. You will learn how to stop your layout from moving after it loads.
What CLS Measures
Cumulative Layout Shift is one of Google’s Core Web Vitals. It measures how much visible content moves unexpectedly while the page loads. A high score means elements jump around; a low score means the page stays stable. Shifts that happen right as content becomes interactive are the most damaging, because that is when users try to act.
The nature of the problem is timing. The browser renders what it has, then more content arrives, gets sized, and pushes everything else down. Every push is a shift.
Why It Happens
Images and Media Without Dimensions
When an image has no width and height, the browser does not reserve space for it. Text renders first, then the image loads and shoves the text down. The same applies to videos and embeds.
Ads, Embeds, and Iframes
Third-party content often loads late and with unknown size. If you do not reserve a slot for it, it appears suddenly and displaces surrounding content.
Web Fonts Swapping
A custom font that loads after a fallback can change text metrics, causing a reflow. This is a smaller shift but still counts.
Content Injected Above Existing Content
Banners, cookie notices, or dynamically added elements inserted at the top push everything below them down.
A Real Scenario
A news site loaded its article text quickly, but a leaderboard ad slot at the top had no reserved height. As readers started reading, the ad loaded and pushed the entire article down by its height. Many users lost their place or clicked the wrong thing. The fix was simple: reserve the ad’s known height with a fixed container, so the space existed before the ad arrived. The article no longer moved.
How to Fix It
| Set image dimensions | Always include width and height attributes so the browser reserves space. |
| Reserve space for dynamic slots | Give ads, embeds, and iframes a fixed minimum height container. |
| Preload key fonts | Preload important fonts and use font-display settings that limit swap impact. |
| Avoid inserting content on top | Add banners below existing content, or reserve their space in advance. |
| Animate with transform | Use transform for motion instead of properties that change layout position. |
Common Mistakes and How to Fix Them
Testing only on a fast connection. On fast networks shifts happen too quickly to notice. Fix: throttle the network in dev tools to expose late-loading elements.
Removing width and height for responsive images. Modern browsers use those attributes to compute an aspect ratio even when the image scales. Fix: keep the attributes and let CSS handle responsiveness.
Ignoring third-party content. Ads and widgets are common CLS sources. Fix: wrap each in a sized container.
Measuring once and moving on. CLS is a field metric affected by real conditions. Fix: monitor it continuously, not just in a single lab test.
Action Checklist
- Add width and height to every image, video, and iframe.
- Reserve fixed space for ads, embeds, and late widgets.
- Preload critical fonts and control the swap behavior.
- Place new banners and notices without pushing existing content down.
- Use transform-based animation instead of layout-changing properties.
- Test with network throttling and check CLS in a Core Web Vitals tool.
Conclusion
CLS is fixable because its causes are predictable: unsized media, unreserved slots, and content injected above the fold. Reserve space before content arrives and the jumping stops. Next step: throttle your connection, load your most important page, and note every element that moves, then reserve space for each one.
FAQ
What is a good CLS score?
Google’s guidance treats a CLS of 0.1 or below as good and above 0.25 as poor. Aim to stay in the good range for most page loads.
Does CLS affect SEO?
CLS is part of Core Web Vitals, which Google uses as a ranking signal. A better score helps both users and search performance, though content relevance still matters most.
Why does my page look fine but still fail CLS?
Shifts can happen faster than you perceive, especially on quick connections. Real users on slower networks experience them. Throttle your test to reproduce the issue.
Do animations cause CLS?
Only animations that change layout position, such as top or margin. Animating with transform moves elements visually without triggering layout shifts.
References
web.dev by Google, Core Web Vitals and Cumulative Layout Shift documentation, a recognized authority on web performance metrics.