If your website feels jumpy while it loads, buttons move right before a user clicks them, or images pop in and push text around, you have a cumulative layout shift problem. It hurts your Google rankings, frustrates visitors, and quietly kills conversions.
The good news? You don’t need to be a developer to fix most CLS issues. This guide walks you through what causes layout shifts, how to measure them, and the exact design and code adjustments that will bring your score comfortably below 0.1.
What Is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift is one of Google’s Core Web Vitals. It measures the visual stability of your page, in other words, how much content unexpectedly moves around while the page loads.
Every time an element jumps into a new position without a user action (like clicking or scrolling), Google records a shift. Those shifts are added together into a single score.
What Is a Good CLS Score?
| CLS Score | Rating | What It Means |
|---|---|---|
| 0 to 0.1 | Good | Your page feels stable |
| 0.1 to 0.25 | Needs Improvement | Visitors notice jumps |
| Above 0.25 | Poor | Google will penalize you |
The goal is simple: keep your CLS under 0.1.
How to Measure Your Current CLS Score
Before fixing anything, get a baseline. Here are the tools we recommend at PixelBright:
- PageSpeed Insights (pagespeed.web.dev) – Free, just paste your URL
- Chrome DevTools Performance tab – Shows shifts in real time
- Google Search Console – Core Web Vitals report for all your pages
- Web Vitals Chrome Extension – Live score while browsing
Run your homepage and 2 or 3 key landing pages. Note the score, then move on to the fixes below.
The 5 Main Causes of Cumulative Layout Shift
- Images without width and height attributes
- Ads, embeds, and iframes with no reserved space
- Web fonts that swap and reflow text
- Dynamically injected content (banners, popups, cookie bars)
- Animations that use properties other than transform
Let’s fix each one.
Fix 1: Always Set Image Dimensions
This is the number one cause of CLS on most websites. When the browser doesn’t know how tall an image will be, it shows the surrounding text first, then shoves everything down when the image finally loads.
The Fix (Copy Paste Ready)
Add width and height attributes to every image:
<img src="hero.jpg" width="1200" height="600" alt="Hero image">
Modern browsers use these numbers to calculate the aspect ratio and reserve the correct space, even before the image downloads.
For WordPress and Page Builders
- WordPress: Since version 5.5, dimensions are added automatically. Make sure your theme is up to date.
- Elementor / Divi / Bricks: Check image widgets and set explicit sizes rather than “auto”
- Shopify: Use the built in
image_tagfilter which outputs dimensions
Fix 2: Reserve Space for Ads, Embeds, and iframes
Ad units and YouTube embeds are notorious for arriving late and pushing content down.
The Design Fix
Wrap every ad or embed in a container with a minimum height matching the largest expected size:
<div style="min-height: 250px;"><!-- ad code here --></div>
For responsive video embeds, use the aspect ratio trick:
<div style="aspect-ratio: 16/9;"><iframe src="..."></iframe></div>
Fix 3: Tame Your Web Fonts
When custom fonts load, text often changes size and pushes paragraphs around. This is called FOUT (Flash of Unstyled Text) or FOIT (Flash of Invisible Text).
Three Steps to Stable Fonts
- Preload critical fonts in your site header:
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin> - Use font-display: optional instead of swap when possible, this prevents late swaps
- Match your fallback font metrics using the
size-adjust,ascent-overrideanddescent-overrideCSS properties
If you use Google Fonts, self host them. It gives you full control and it’s faster.
Fix 4: Handle Cookie Banners and Popups Properly
A cookie banner that appears at the top of the page and pushes everything down is a CLS disaster.
- Position banners with fixed or sticky positioning at the bottom of the viewport
- Use an overlay instead of pushing content
- Never inject newsletter popups above existing content, always overlay them
Fix 5: Animate the Right Way
Animating properties like width, height, top or margin triggers layout shifts. Instead, use:
transform: translate()for movementtransform: scale()for resizingopacityfor fades
These properties are handled by the browser’s compositor and don’t count toward CLS.
A Quick Checklist Before You Publish
- Every image has width and height attributes
- Ad slots have reserved min-height containers
- Video embeds use aspect-ratio
- Fonts are preloaded and self hosted
- Cookie banners overlay, not push
- Animations only use transform and opacity
- You retested with PageSpeed Insights and scored under 0.1
Real World Impact
On a recent PixelBright client project, we brought a CLS score from 0.34 down to 0.04 by applying only the first three fixes above. Result: a 12% increase in mobile conversions within six weeks, and a noticeable ranking boost on competitive keywords.
Small technical details, big business impact.
Frequently Asked Questions
How do I solve cumulative layout shift quickly?
Start by adding width and height attributes to every image on your site. This single change usually cuts CLS by 40 to 60 percent. Then handle ads, fonts, and cookie banners.
Is CLS only measured on the first page load?
No. Google measures CLS for the entire time a user is on the page, including scrolling and interactions. Any unexpected shift counts, even if it happens ten seconds in.
How do I fix cumulative layout shift in Shopify?
Most Shopify themes handle image dimensions well by default. The usual culprits are third party apps (reviews, popups, chat widgets) and custom fonts. Audit your apps first, then optimize font loading in theme.liquid.
Does CLS affect SEO?
Yes. CLS is part of Google’s Core Web Vitals, which are confirmed ranking signals. A poor CLS score can hold back pages that would otherwise rank well.
Can I fix CLS without a developer?
Most fixes yes, especially on WordPress, Wix, Squarespace, and Shopify. Setting image dimensions, choosing better popup positioning, and optimizing fonts through plugins are all doable without touching raw code. For custom coded sites, you’ll want a developer for the finer tuning.
Need help auditing your website? The PixelBright team runs Core Web Vitals audits and can implement all the fixes above for you. Get in touch through our contact page.