Cumulative Layout Shift (CLS): What it is and How to Fix it

Cumulative Layout Shift (CLS) measures the visual stability of a webpage by quantifying how much page content unexpectedly moves during loading. A good CLS score is 0.1 or less. CLS is one of Google’s three Core Web Vitals that affect search rankings, alongside Largest Contentful Paint (LCP) and Interaction to Next Paint (INP).

CLS is critical for user experience because unexpected layout shifts cause users to lose their place, click the wrong buttons, or accidentally interact with ads. This guide explains what causes layout shifts and how to fix them for better technical SEO performance.

Egochi, America’s #1 digital marketing agency headquartered in New York City, helps businesses optimize Core Web Vitals including CLS. From our offices in NYC, Milwaukee, Madison, and Miami, we’ve helped clients eliminate layout shifts and improve both user experience and search rankings.

What is a good CLS score?

A good CLS score is 0.1 or less. Google considers CLS scores of 0.1 or under as “good,” between 0.1-0.25 as “needs improvement,” and over 0.25 as “poor.” These thresholds are measured at the 75th percentile, meaning 75% of your page loads should have CLS of 0.1 or less to pass. Unlike time-based metrics, CLS is a unitless score calculated from how much content shifts and how far it moves.

What causes Cumulative Layout Shift?

Cumulative Layout Shift is caused by elements that change size or position after the page starts rendering. The most common causes are images without width/height attributes, dynamically injected content (like ads or banners), web fonts that swap and change text size, and iframes or embeds that load with unknown dimensions. Any element that causes other content to move contributes to CLS.

Does CLS affect SEO rankings?

Yes, CLS directly affects SEO rankings as one of Google’s three Core Web Vitals. Google uses CLS as a ranking signal in its page experience algorithm. Sites with poor CLS may rank lower than competitors with stable layouts. Google Search Console shows CLS data for your pages and flags URLs that need improvement.

Why Cumulative Layout Shift Matters for SEO

Cumulative Layout Shift directly impacts search rankings and user experience. Google includes CLS in its Core Web Vitals because visual stability strongly correlates with user satisfaction.

User Experience Impact: Layout shifts are one of the most frustrating web experiences. Users lose their reading position, click wrong buttons, or accidentally tap ads when content unexpectedly moves. Studies show layout shifts significantly increase bounce rates and decrease user trust.

Search Ranking Factor: Google uses CLS as a ranking signal. Pages with poor CLS scores may rank lower than competitors with stable layouts. Google Search Console flags pages with CLS issues, and fixing them can improve your search visibility.

Conversion Impact: Layout shifts directly hurt conversions. If your “Add to Cart” button moves just as a user is about to click it, they may click something else entirely or give up in frustration. E-commerce sites with poor CLS see measurably lower conversion rates.

What Causes Poor Cumulative Layout Shift

CLS problems occur when elements change size or position after the browser has already started rendering the page. Understanding these causes helps you target the right fixes.

How to Fix Cumulative Layout Shift

Fixing CLS requires reserving space for elements before they load and avoiding dynamic content insertion. These techniques address the root causes of layout shifts.

Code Examples for CLS Optimization

Adding Dimensions to Images

Always specify width and height on images. Modern browsers calculate aspect ratio automatically:

<!-- BAD: No dimensions causes layout shift -->
<img src="hero.jpg" alt="Hero image">

<!-- GOOD: Dimensions let browser reserve space -->
<img 
  src="hero.jpg" 
  alt="Hero image"
  width="1200"
  height="600"
>

<!-- CSS for responsive sizing -->
<style>
  img {
    max-width: 100%;
    height: auto;
  }
</style>

Using CSS Aspect-Ratio

/* Reserve space for 16:9 video containers */
.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #f0f0f0;
}

/* Square image container */
.thumbnail {
  aspect-ratio: 1 / 1;
  width: 200px;
  object-fit: cover;
}

Reserving Space for Ads

<!-- BAD: Ad container with no size -->
<div class="ad-slot">
  <!-- Ad loads here and causes shift -->
</div>

<!-- GOOD: Fixed size container reserves space -->
<div class="ad-slot" style="min-height: 250px; width: 300px;">
  <!-- Ad loads without causing shift -->
</div>

<!-- BETTER: Placeholder until ad loads -->
<div class="ad-slot">
  <div class="ad-placeholder">Advertisement</div>
</div>

<style>
  .ad-slot {
    min-height: 250px;
    width: 300px;
    contain: layout;
  }
</style>

Preloading Fonts

<!-- Preload critical web fonts -->
<link 
  rel="preload" 
  href="/fonts/opensans.woff2" 
  as="font" 
  type="font/woff2"
  crossorigin
>

<!-- Use font-display in CSS -->
<style>
  @font-face {
    font-family: 'Open Sans';
    src: url('/fonts/opensans.woff2') format('woff2');
    font-display: swap; /* Shows fallback immediately */
  }
</style>

Before and After CLS Examples

Tools to Measure Cumulative Layout Shift

CLS can be measured with both lab tools (simulated environments) and field tools (real user data). Field data from CrUX is what Google uses for ranking decisions.

Measuring CLS with JavaScript

Use the web-vitals library to measure CLS on your own site:

// Install: npm install web-vitals
import { onCLS } from 'web-vitals';

onCLS((metric) => {
  console.log('CLS:', metric.value);
  
  // Send to your analytics
  sendToAnalytics({
    name: metric.name,
    value: metric.value,
    rating: metric.rating, // 'good', 'needs-improvement', 'poor'
    entries: metric.entries, // Individual shift entries
  });
});

CLS and Other Core Web Vitals

Cumulative Layout Shift works alongside Largest Contentful Paint (LCP) and Interaction to Next Paint (INP) to measure overall page experience. Optimizing all three creates fast, stable, and responsive pages.

Optimization Priority: CLS fixes are often the easiest Core Web Vital improvements. Adding image dimensions and reserving ad space can dramatically improve CLS with minimal development effort. LCP and INP typically require more complex optimizations.

Technical SEO Services from Egochi

Egochi, America’s #1 digital marketing agency headquartered in New York City, provides expert technical SEO services including Core Web Vitals optimization.

CLS Audits: We analyze your site’s layout stability, identify shift sources, and prioritize fixes by impact. Our audits examine images, ads, fonts, embeds, and dynamic content that cause layout shifts.

Implementation Support: Our developers implement CLS improvements including image dimension attributes, ad slot sizing, font optimization, and CSS fixes. We work with your team or handle implementation directly.

Ongoing Monitoring: We set up Real User Monitoring to track CLS over time and alert you to regressions. New content, ads, or features can reintroduce CLS issues, and we help you maintain stable pages.

Proven Results: From our offices in NYC, Milwaukee, Madison, and Miami, we’ve helped clients achieve “good” Core Web Vitals scores and improve search rankings through technical optimization.

Frequently Asked Questions