Understanding CLS: How to Stop Layout Shifts from Ruining UX

You're reading an article, about to tap a link, and suddenly the page jumps. You accidentally click an ad. Congratulations — you've just experienced a layout shift, and your users hate it as much as you do.

Google quantifies this frustration with Cumulative Layout Shift (CLS), one of three Core Web Vitals that directly impact your search rankings and ad Quality Score.

What CLS Measures

CLS calculates the sum of all unexpected layout shifts that occur during the entire lifespan of a page. Each shift is scored by multiplying two factors:

Impact fraction: The percentage of the viewport that moved
Distance fraction: How far the elements shifted

A CLS score below 0.1 is considered "Good." Between 0.1 and 0.25 is "Needs Improvement." Anything above 0.25 is "Poor."

The Top 5 Causes of Layout Shifts

1. Images Without Dimensions

When you load an <img> tag without explicit width and height attributes, the browser doesn't know how much space to reserve. Once the image loads, everything below it gets pushed down.

Fix: Always set width and height attributes, or use CSS aspect-ratio:

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

2. Ads, Embeds, and Iframes Without Reserved Space

Third-party embeds — ad units, YouTube videos, social widgets — are the worst offenders. They inject content with unknown dimensions.

Fix: Reserve a container with minimum dimensions:

.ad-slot {
  min-height: 250px;
  min-width: 300px;
}

3. Web Fonts Causing FOUT/FOIT

When a custom font loads, text can reflow if the fallback font has different metrics. This is called Flash of Unstyled Text (FOUT).

Fix: Use font-display: swap combined with a size-adjusted fallback:

@font-face {
  font-family: 'BrandFont';
  src: url('/fonts/brand.woff2') format('woff2');
  font-display: swap;
  size-adjust: 105%;
}

4. Dynamically Injected Content

Banners, cookie notices, and notification bars that push content down after the initial render.

Fix: Use position: fixed or position: sticky so injected elements overlay rather than displace content.

5. Late-Loading CSS

If your CSS loads asynchronously or is split into multiple files that arrive at different times, styles can cause reflows.

Fix: Inline critical CSS in the <head> and load the rest asynchronously with rel="preload".

How to Diagnose CLS Issues

Chrome DevTools Performance Tab

Open DevTools → Performance → Record
Scroll through the page
Look for "Layout Shift" entries in the timeline
Click each one to see which elements moved

Web Vitals Extension

Install the Web Vitals Chrome Extension to see CLS in real-time as you browse.

PageSpeed Insights

Run your URL through PageSpeed Insights. The Diagnostics section will list "Avoid large layout shifts" with specific element selectors.

CLS Thresholds and Rankings

CLS Score	Rating	SEO Impact
0 – 0.1	Good	Positive ranking signal
0.1 – 0.25	Needs Improvement	Neutral to negative
> 0.25	Poor	Active ranking penalty

The Business Case for Fixing CLS

Layout shifts don't just annoy users — they cost money:

Misclicks lead to accidental navigation, inflating bounce rates
Cart abandonment spikes when buttons shift under a user's finger
Ad revenue drops when users develop "banner blindness" from accidental clicks
Google Ads Quality Score penalizes pages with poor CLS, raising your CPC

A study by Vodafone found that improving CLS by 31% led to a 15% increase in sales and an 11% increase in cart-to-visit rate.

Quick Wins to Improve CLS Today

Add width and height to every <img> and <video> tag
Reserve space for ad slots with CSS min-height
Preload your custom fonts
Use font-display: optional for non-critical fonts
Move cookie banners to position: fixed
Set up automated CLS monitoring to catch regressions before users do

Monitor CLS Continuously

CLS issues often creep in after a new deployment — a designer adds a banner, a developer changes font stacks, or an ad network updates their SDK. The only way to catch these regressions is continuous monitoring.

BadPageSpeed tracks CLS alongside all Core Web Vitals for every page you care about. Start monitoring for free →

Google quantifies this frustration with Cumulative Layout Shift (CLS), one of three Core Web Vitals that directly impact your search rankings and ad Quality Score.

What CLS Measures

CLS calculates the sum of all unexpected layout shifts that occur during the entire lifespan of a page. Each shift is scored by multiplying two factors:

Impact fraction: The percentage of the viewport that moved
Distance fraction: How far the elements shifted

A CLS score below 0.1 is considered "Good." Between 0.1 and 0.25 is "Needs Improvement." Anything above 0.25 is "Poor."

The Top 5 Causes of Layout Shifts

1. Images Without Dimensions

When you load an <img> tag without explicit width and height attributes, the browser doesn't know how much space to reserve. Once the image loads, everything below it gets pushed down.

Fix: Always set width and height attributes, or use CSS aspect-ratio:

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

2. Ads, Embeds, and Iframes Without Reserved Space

Third-party embeds — ad units, YouTube videos, social widgets — are the worst offenders. They inject content with unknown dimensions.

Fix: Reserve a container with minimum dimensions:

.ad-slot {
  min-height: 250px;
  min-width: 300px;
}

3. Web Fonts Causing FOUT/FOIT

When a custom font loads, text can reflow if the fallback font has different metrics. This is called Flash of Unstyled Text (FOUT).

Fix: Use font-display: swap combined with a size-adjusted fallback:

@font-face {
  font-family: 'BrandFont';
  src: url('/fonts/brand.woff2') format('woff2');
  font-display: swap;
  size-adjust: 105%;
}

4. Dynamically Injected Content

Banners, cookie notices, and notification bars that push content down after the initial render.

Fix: Use position: fixed or position: sticky so injected elements overlay rather than displace content.

5. Late-Loading CSS

If your CSS loads asynchronously or is split into multiple files that arrive at different times, styles can cause reflows.

Fix: Inline critical CSS in the <head> and load the rest asynchronously with rel="preload".

How to Diagnose CLS Issues

Chrome DevTools Performance Tab

Open DevTools → Performance → Record
Scroll through the page
Look for "Layout Shift" entries in the timeline
Click each one to see which elements moved

Web Vitals Extension

Install the Web Vitals Chrome Extension to see CLS in real-time as you browse.

PageSpeed Insights

Run your URL through PageSpeed Insights. The Diagnostics section will list "Avoid large layout shifts" with specific element selectors.

CLS Thresholds and Rankings

CLS Score	Rating	SEO Impact
0 – 0.1	Good	Positive ranking signal
0.1 – 0.25	Needs Improvement	Neutral to negative
> 0.25	Poor	Active ranking penalty

The Business Case for Fixing CLS

Layout shifts don't just annoy users — they cost money:

Misclicks lead to accidental navigation, inflating bounce rates
Cart abandonment spikes when buttons shift under a user's finger
Ad revenue drops when users develop "banner blindness" from accidental clicks
Google Ads Quality Score penalizes pages with poor CLS, raising your CPC

A study by Vodafone found that improving CLS by 31% led to a 15% increase in sales and an 11% increase in cart-to-visit rate.

Quick Wins to Improve CLS Today

Add width and height to every <img> and <video> tag
Reserve space for ad slots with CSS min-height
Preload your custom fonts
Use font-display: optional for non-critical fonts
Move cookie banners to position: fixed
Set up automated CLS monitoring to catch regressions before users do

Monitor CLS Continuously

BadPageSpeed tracks CLS alongside all Core Web Vitals for every page you care about. Start monitoring for free →

What CLS Measures

The Top 5 Causes of Layout Shifts

1. Images Without Dimensions

2. Ads, Embeds, and Iframes Without Reserved Space

3. Web Fonts Causing FOUT/FOIT

4. Dynamically Injected Content

5. Late-Loading CSS

How to Diagnose CLS Issues

Chrome DevTools Performance Tab

Web Vitals Extension

PageSpeed Insights

CLS Thresholds and Rankings

The Business Case for Fixing CLS

Quick Wins to Improve CLS Today

Monitor CLS Continuously

Ready to stop wasting ad spend?

Share this article

Related Articles

How to Debug a Jumping UI to Fix CLS

How to Optimize Your Above the Fold Content for LCP

Fix Cumulative Layout Shift (CLS): Stop Your Page From Jumping

Fix Largest Contentful Paint (LCP): Speed Up Your Biggest Element

Share this article

Related Articles

How to Debug a Jumping UI to Fix CLS

How to Optimize Your Above the Fold Content for LCP

Fix Cumulative Layout Shift (CLS): Stop Your Page From Jumping

Fix Largest Contentful Paint (LCP): Speed Up Your Biggest Element

What CLS Measures

The Top 5 Causes of Layout Shifts

1. Images Without Dimensions

2. Ads, Embeds, and Iframes Without Reserved Space

3. Web Fonts Causing FOUT/FOIT

4. Dynamically Injected Content

5. Late-Loading CSS

How to Diagnose CLS Issues

Chrome DevTools Performance Tab

Web Vitals Extension

PageSpeed Insights

CLS Thresholds and Rankings

The Business Case for Fixing CLS

Quick Wins to Improve CLS Today

Monitor CLS Continuously

Ready to stop wasting ad spend?

Share this article

Related Articles

How to Debug a Jumping UI to Fix CLS

How to Optimize Your Above the Fold Content for LCP

Fix Cumulative Layout Shift (CLS): Stop Your Page From Jumping

Fix Largest Contentful Paint (LCP): Speed Up Your Biggest Element

Share this article

Related Articles

How to Debug a Jumping UI to Fix CLS

How to Optimize Your Above the Fold Content for LCP

Fix Cumulative Layout Shift (CLS): Stop Your Page From Jumping

Fix Largest Contentful Paint (LCP): Speed Up Your Biggest Element