How to Fix Cumulative Layout Shift (CLS) on Your Website
CLS measures how much your page jumps around while loading. Under 0.1 is the target. Here is how to stop the shifting.
Reviewed by Jacob Rhinehart for Strelva's co-founder; products and operations lead responsibilities.
Cumulative Layout Shift, or CLS, measures how much elements move around unexpectedly while your page loads. You have felt it: you go to tap a button and the page jumps, so you tap the wrong thing. Google considers a CLS under 0.1 "good," and it is one of the Core Web Vitals that affects rankings.
Why CLS matters
Layout shifts frustrate users, cause mis-taps, and make a site feel cheap and broken. They also hurt your search position. The usual culprits are images without dimensions, late-loading fonts, ads and embeds, and content injected after the page renders.
How to fix it
- Find the shifts. Record a page load in your browser's Performance panel and look for layout shift markers. Scroll and interact too, since shifts accumulate during the whole session.
- Set dimensions on media. Give every image and video explicit width and height attributes, or a CSS aspect-ratio, so the browser reserves the space before the file loads.
- Reserve space for ads and widgets. Wrap ads, embeds, and third-party widgets in a container with a min-height so they do not push content when they appear.
- Fix font loading. Use font-display: swap and preload your main fonts so text does not reflow when the custom font arrives.
- Handle injected content. Banners, cookie notices, and notifications should overlay with fixed positioning rather than push the page down.
Verify
Confirm CLS is under 0.1 on both mobile and desktop, and that there are no layout-shift markers when you record a full page session. A common trap: cookie consent banners that use static positioning and shove everything down. Switch them to a fixed bottom overlay and a major source of shift disappears.
Frequently asked
What business owners ask next.
What causes most layout shift problems?
Images and videos without set dimensions, web fonts that reflow text when they load, ads and embeds with no reserved space, and content injected after render such as banners and cookie notices. Reserve space for all of them.
How do I stop my cookie banner from causing layout shift?
Use fixed positioning so it overlays content instead of pushing it down. Set position: fixed with bottom: 0 and a high z-index. Most modern consent tools offer a bottom-overlay option in their settings.