What is CLS? SEO Guide for Beginners

Cumulative Layout Shift (CLS) is a Core Web Vital metric that measures the total amount of unexpected visual movement of page content during the loading process. It quantifies how much your page elements jump around as the page loads. A good CLS score is 0.1 or less. Anything above 0.25 is rated as poor by Google.

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

1. 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.

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.

Key Takeaways

• CLS measures how much your page layout shifts unexpectedly. Google recommends a score of 0.1 or less.
• 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.