What is CLS? SEO Guide for Beginners

Learn what CLS (Cumulative Layout Shift) means in SEO, why it matters, and how to use it to improve your search rankings.

Cumulative Layout Shift (CLS) is a Core Web Vital metric that measures the largest burst of unexpected layout shift scores for every unexpected layout shift that occurs during the entire lifecycle of a page. In plain terms, it quantifies how much your page elements jump around as the page loads. Per web.dev, the official thresholds (assessed at the 75th percentile of page loads across mobile and desktop) are: a CLS of 0.1 or less is good, between 0.1 and 0.25 needs improvement, and greater than 0.25 is poor.

Why CLS Matters for SEO

Layout shifts are one of the most frustrating user experiences on the web. You start reading an article, and suddenly the text jumps down because a banner ad loaded above it. You try to click a button, and it shifts right as you tap, causing you to hit the wrong link. These unexpected movements erode user trust and directly hurt engagement.

Google includes CLS as one of three Core Web Vitals because it measures visual stability, a core aspect of user experience. Sites with poor CLS scores create friction that drives users away. When users bounce quickly because the page keeps shifting, Google sees that as a negative signal about your content quality.

CLS is particularly impactful on mobile devices where screen space is limited. A layout shift of 50 pixels on a desktop monitor is annoying but manageable. That same 50-pixel shift on a phone screen can move content completely out of view. I have seen e-commerce sites lose conversions because their "Add to Cart" button kept jumping as product images and review widgets loaded asynchronously.

How CLS Works

CLS is calculated by multiplying the impact fraction (the area of the viewport affected by the shift) by the distance fraction (how far the element moved). The browser tracks all unexpected layout shifts that occur during the page lifecycle and sums up the worst session window of shifts.

A layout shift is "unexpected" if it happens without the user initiating it. Shifts caused by user clicks, taps, or keyboard input are excluded from the CLS score. The shifts that count are those caused by images loading without defined dimensions, ads injecting into the page, fonts swapping and changing text size, or dynamic content inserted above existing content.

The score uses a "session window" approach. It groups shifts that occur within 1 second of each other, with a maximum window of 5 seconds. The largest single session window becomes your CLS score. This means a single burst of shifts is worse than the same total shift spread across the entire page lifecycle.

How to Improve CLS on Your Site

Always set width and height on images and videos - When the browser knows an element's dimensions before it loads, it reserves the correct amount of space. Use the width and height HTML attributes or CSS aspect-ratio property on every media element.
Reserve space for ads and embeds - If you display ads, social embeds, or other dynamically-loaded content, use CSS to define a minimum height for the container. This prevents the content below from jumping when the ad loads.
Avoid inserting content above existing content - Never dynamically inject banners, cookie notices, or promotional elements above the main content after the page has started rendering. Place dynamic elements at the top of the DOM or use fixed/sticky positioning.

Preload custom fonts - Font loading causes layout shifts when the browser swaps from a fallback font to your custom font and the text changes size. Use font-display: swap combined with <link rel="preload" as="font"> and match your fallback font metrics to your custom font.

Use CSS containment - Apply contain: layout or contain: content to elements that might change size independently. This tells the browser that changes within the element should not affect the layout of surrounding content.

Common Mistakes to Avoid

Images without dimensions: This is the number one cause of CLS. When an image has no defined width and height, the browser allocates zero space for it. When the image loads, everything below it shifts down. Always declare dimensions.

Late-loading third-party scripts: Ad networks, analytics tools, and chat widgets often inject content after page load. Audit your third-party scripts and ensure they either load early with reserved space or use non-layout-affecting positioning like fixed or absolute.

Dynamic font loading without fallback matching: If your custom font renders at a different size than the system fallback, the entire page text shifts when the font loads. Use tools like Fontaine or next/font to generate size-adjusted fallback fonts that closely match your custom font.

In Practice

The single most common CLS cause is an image with no reserved space. The browser allocates zero height for it, then shoves everything below it down once the image arrives. The fix is to declare the intrinsic width and height attributes so the browser can compute an aspect ratio and reserve the correct space before a single byte of the image downloads.

Before (the image has no dimensions, so content jumps when it loads):

<img src="puppy.jpg" alt="Puppy with balloons">

After (web.dev's recommended pattern, dimensions declared):

<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

With the attributes present, modern browsers set a default aspect-ratio of auto 640 / 360 on the element, which holds the slot open. To keep the image responsive without reintroducing a shift, pair it with this CSS so it scales to its container while preserving the reserved ratio:

img {
  width: 100%;
  height: auto;
}

That combination keeps the layout stable across viewport sizes and is the difference between a 0.00 contribution and a multi-tenth jump on a hero image.

What Are Core Web Vitals? - the three-metric set that CLS belongs to, alongside loading and interactivity.
What is LCP? - the loading-performance Core Web Vital, measured in seconds rather than a unitless score.
What is INP? - the interactivity Core Web Vital that replaced First Input Delay.
What is Page Experience? - Google's broader ranking signal that wraps Core Web Vitals together.
What is Page Speed? - the wider loading-performance concept CLS sits inside.

Key Takeaways

CLS measures how much your page layout shifts unexpectedly. Google recommends a score of 0.1 or less, assessed at the 75th percentile.
Always set explicit dimensions on images, videos, and ad containers to prevent layout shifts.
Avoid dynamically inserting content above the fold after the page starts rendering.
Test CLS using PageSpeed Insights field data or the Chrome DevTools Performance panel to identify which elements are causing shifts.