How to Fix CLS Issues: Cumulative Layout Shift Guide

How to Fix CLS Issues: Cumulative Layout Shift Guide

Bhai, tera page load hote waqt itna jump karta hai jaise earthquake aa gayi ho. User button pe click karne ja raha hai aur achanak ad aa gayi — click chala gaya kisi aur link pe. Tera visitor frustrate hoke bounce kar gaya, aur Google ne teri ranking bhi gira di. Yeh hai CLS ka kamaal — tera page visually stable hi nahi hai. Chal, aaj tujhe sikhata hoon how to fix CLS taaki tera page rock-solid rahe aur rankings bhi improve hon.

What is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift is a Core Web Vital metric that measures visual stability. It quantifies how much page content unexpectedly moves during the loading process. Google calculates CLS by multiplying the impact fraction (how much viewport space is affected) by the distance fraction (how far elements move).

A good CLS score is 0.1 or less. Anything between 0.1 and 0.25 needs improvement. Above 0.25? Your page is basically an earthquake simulator and Google will penalize you for it.

CLS doesn't just measure one big shift — it captures every unexpected layout shift throughout the page's entire lifecycle using session windows. The largest burst of shifts within a 5-second window becomes your CLS score.

Why CLS Matters for SEO

Google officially made Core Web Vitals a ranking signal in 2021, and CLS is one of the three pillars. Pages with poor CLS scores get demoted in search results, especially on mobile where layout shifts are more disruptive.

But rankings aside, bad CLS directly kills conversions. Studies show that a 0.1 increase in CLS can reduce conversion rates by up to 15%. When users accidentally click the wrong element because content shifted, they lose trust in your site immediately.

If you want to learn how to fix CLS, you first need to understand that it impacts both your website speed score and your overall SEO health. Run a free scan to see exactly where your layout shifts are happening.

Step-by-Step Guide to Fix CLS Issues

Step 1: Set Explicit Dimensions on Images and Videos

The number one cause of CLS is media elements loading without reserved space. When an image loads, the browser doesn't know its size until it downloads — so content below jumps down to make room.

Always include width and height attributes on every <img> and <video> tag. This lets the browser calculate the aspect ratio and reserve space before the resource loads.

<!-- Bad: No dimensions — causes layout shift -->
<img src="/hero-banner.jpg" alt="Hero banner">

<!-- Good: Explicit dimensions — browser reserves space -->
<img src="/hero-banner.jpg" alt="Hero banner" width="1200" height="600">

<!-- Better: Modern CSS aspect-ratio approach -->
<img src="/hero-banner.jpg" alt="Hero banner" 
     style="width: 100%; height: auto; aspect-ratio: 2/1;">

This single fix often eliminates 60-70% of CLS issues on most websites.

Step 2: Use CSS Aspect-Ratio for Responsive Containers

For responsive designs where you can't use fixed pixel values, the CSS aspect-ratio property is your best friend. It reserves the exact space needed regardless of viewport size.

/* Reserve space for video embeds */
.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #f0f0f0; /* placeholder color while loading */
}

/* Reserve space for ad slots */
.ad-slot-leaderboard {
  width: 100%;
  min-height: 90px; /* standard leaderboard height */
  aspect-ratio: 728 / 90;
  contain: layout; /* prevents content from affecting surrounding layout */
}

/* Reserve space for dynamic content */
.dynamic-banner {
  min-height: 60px;
  contain: layout size;
}

Step 3: Reserve Space for Ads and Dynamic Content

Ads are CLS killers. They load asynchronously, often seconds after the page renders, and push everything below them down. The fix is to pre-allocate space for every ad slot before the ad loads.

Create placeholder containers with minimum heights matching your ad unit sizes. Use min-height rather than height so the container can grow if needed but never shrinks below the expected ad size.

Never inject ads or promotional banners above the fold after initial render. If you must show dynamic content at the top of the page, reserve that space in your initial HTML.

Step 4: Implement font-display: swap with Size-Adjusted Fallbacks

Custom fonts cause layout shifts when the browser swaps from a fallback font to the loaded web font. The text reflows because font metrics differ between typefaces.

/* Use font-display: swap with size-adjusted fallback */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-font.woff2') format('woff2');
  font-display: swap;
}

/* Size-adjusted fallback to minimize reflow */
@font-face {
  font-family: 'CustomFont-Fallback';
  src: local('Arial');
  size-adjust: 105%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

body {
  font-family: 'CustomFont', 'CustomFont-Fallback', sans-serif;
}

The size-adjust and override properties make your fallback font match the dimensions of your web font as closely as possible. This means when the swap happens, text barely moves.

Step 5: Use CSS Transform Animations Instead of Layout-Triggering Properties

Animations that change width, height, top, left, margin, or padding trigger layout recalculations and cause CLS. Always animate using transform and opacity instead — these properties run on the compositor thread and never cause layout shifts.

/* Bad: Animating height causes layout shift */
.accordion-content {
  height: 0;
  transition: height 0.3s ease;
}
.accordion-content.open {
  height: auto; /* triggers layout shift */
}

/* Good: Use transform for animations */
.notification-toast {
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.notification-toast.visible {
  transform: translateY(0);
  opacity: 1;
}

Step 6: Use CSS Containment

The contain property tells the browser that an element's internals won't affect the outside layout. This prevents layout shifts from propagating to surrounding content.

Apply contain: layout or contain: content to widgets, embeds, and any dynamically loaded sections. This isolates their layout calculations from the rest of the page.

Step 7: Avoid Late-Loading Content Injection Above the Fold

Never use JavaScript to inject content above the current viewport position after the page has rendered. This includes:

• Cookie consent banners that push content down (use overlay or bottom-fixed position instead)
• Dynamically loaded navigation bars
• Promotional banners injected via third-party scripts
• Chat widgets that expand into the content area

If you must add content dynamically, add it below the fold or use fixed/sticky positioning so it overlays rather than displaces existing content.

Common CLS Mistakes That Developers Make

Lazy loading above-the-fold images. Never lazy-load your hero image or any image visible in the initial viewport. Use loading="eager" (the default) for above-fold images and loading="lazy" only for below-fold content.

Using auto-playing carousels without fixed heights. Carousels that switch between slides of different heights cause massive CLS. Always set a fixed height or aspect ratio on your carousel container.

Injecting client-side rendered content. SPAs and client-rendered components that populate after hydration cause shifts. Use server-side rendering or skeleton placeholders with matching dimensions.

Forgetting about web font FOUT. Even with font-display: swap, if your fallback font has very different metrics, you'll get CLS. Always use size-adjusted fallback fonts.

Not testing on slow connections. CLS is worst on slow 3G connections where resources load sequentially over several seconds. Always test with network throttling enabled. Use your website speed test results to identify which resources load late.

Tools to Measure and Fix CLS

Understanding how to fix CLS starts with measuring it accurately. Here are the best tools:

• SlapMyWeb Audit — Our free scan identifies every layout shift on your page with specific elements and fix suggestions
• Chrome DevTools Performance Panel — Record a page load and look for "Layout Shift" entries in the Experience lane
• PageSpeed Insights — Shows field data (real user CLS) and lab data
• Web Vitals Extension — Real-time CLS monitoring as you browse your site
• Lighthouse — Highlights which elements contribute most to CLS

FAQ

What is a good CLS score?

A good CLS score is 0.1 or below. Google considers this "good" in Core Web Vitals assessment. Scores between 0.1 and 0.25 need improvement, while anything above 0.25 is classified as poor and will negatively impact your search rankings.

Does CLS affect Google rankings?

Yes, CLS is one of three Core Web Vitals that Google uses as a ranking signal. Pages with poor CLS scores (above 0.25) can be demoted in search results, especially when competing pages have better scores. The impact is strongest on mobile search results.

How do I find what's causing CLS on my page?

Use Chrome DevTools Performance panel to record a page load — layout shift events appear in the Experience row and highlight the shifted elements. You can also run a free SlapMyWeb scan which identifies specific elements causing shifts and provides code fixes.

Can CLS be zero?

Yes, achieving a CLS of 0 is possible but rare in practice. Static pages with no images, no ads, no custom fonts, and no dynamic content can score zero. For most real-world sites, aim for under 0.05 — that's excellent and leaves headroom for occasional minor shifts.

Ready to check your site? Run a free website audit and get a prioritized report with copy-paste code fixes in 30 seconds.