What Is Cumulative Layout Shift (cls)

Photo by Brett Jordan on Unsplash

A page that jumps while someone is trying to read, click, or buy creates instant friction. A button moves just as a visitor taps it, an article headline shifts below an ad, or a product image suddenly pushes the checkout link down the screen. These disruptions are measured by Cumulative Layout Shift (CLS), a Core Web Vital that reveals how visually stable your website feels during loading and interaction.

Improving CLS is not simply a technical exercise. It protects user trust, reduces accidental clicks, supports conversions, and helps create the polished page experience search engines and visitors expect.

What Is Cumulative Layout Shift and Why Does It Matter?

Cumulative Layout Shift measures unexpected movement of visible page elements while a page loads. A layout shift occurs when an element changes its rendered position without a user intentionally triggering that movement. For example, if a banner loads above a paragraph and pushes the paragraph downward, that is an unexpected layout shift.

CLS focuses on visual stability rather than loading speed alone. A site can appear to load quickly but still feel frustrating if late-loading images, advertisements, web fonts, consent banners, or embedded content continually move the page around.

High layout instability can harm key user experience signals, including:

• Engagement: Visitors may leave when content is difficult to read or interact with.
• Conversions: Shifting calls to action, forms, and checkout controls can lead to missed clicks or accidental selections.
• Accessibility: Users relying on magnification, keyboard navigation, or assistive technology can find moving interfaces especially difficult.
• Brand confidence: A stable page feels professional; a jumping page can feel unreliable.

Google uses Core Web Vitals, including CLS, within its broader page experience and ranking systems. While visual stability is only one of many SEO factors, reducing layout shifts supports a faster, more usable experience that can help visitors and search engines interact with your content more effectively.

How CLS Is Calculated

CLS is based on the layout shift score generated when visible elements move unexpectedly. The score combines two measurements: impact fraction and distance fraction.

• Impact fraction: The portion of the viewport affected by unstable elements before and after a shift. The more screen area involved, the greater the impact.
• Distance fraction: How far an unstable element moves relative to the viewport size. Larger movements create a larger score.

In simple terms, the browser multiplies the affected area by the distance moved. If a large content block shifts far down the page, it creates a more serious layout shift than a small icon moving a few pixels.

CLS is cumulative, meaning it considers shift events over a page visit through session windows rather than judging one isolated movement. Not every movement counts: layout changes that happen within roughly 500 milliseconds of a user interaction, such as opening an accordion after a click, are generally expected and are not treated the same way as unexpected shifts during page load.

Google CLS Thresholds: Good, Needs Improvement, and Poor

Google’s Core Web Vitals guidance uses the following CLS thresholds:

• Good: 0.1 or less
• Needs improvement: More than 0.1 up to 0.25
• Poor: More than 0.25

Core Web Vitals field data is commonly assessed at the 75th percentile of page visits. In practice, this means your goal is not merely to create one ideal test result on a fast desktop connection. You need a stable experience for the vast majority of real visitors, including people on mobile devices, slower networks, and varied screen sizes.

What Causes Unexpected Layout Shifts?

Most high CLS scores come from page elements that load or resize after the browser has already positioned surrounding content. Diagnosing the source requires looking closely at the loading sequence.

Images and Video Without Reserved Dimensions

When an image lacks explicit width and height attributes or a defined CSS aspect-ratio, the browser cannot reserve the correct space before the file arrives. As the image loads, it expands and pushes nearby content. This is one of the most common and preventable CLS issues.

Ads, Banners, and Third-Party Embeds

Advertising slots, affiliate widgets, social media posts, maps, reviews, chat tools, and embedded videos often load asynchronously. If the container has no fixed or minimum height, the embed can suddenly insert itself into the layout. Ads are particularly challenging because creative sizes can vary.

Web Fonts and Text Reflow

Custom web fonts may load after fallback fonts have already rendered. If the new font has different character widths, line height, or spacing, headings and paragraphs can reflow. This can move content far below the text block, especially on mobile layouts.

Dynamic Content Inserted Above Existing Content

Cookie notices, promotional bars, “related articles” modules, inventory alerts, personalization features, and delayed API responses can shift a page when inserted above content the visitor is already viewing. Unless a user requested the change, avoid injecting new material at the top of the page without reserving space.

How to Measure and Diagnose CLS

A reliable CLS workflow combines lab testing with field data. Lab tools help you reproduce issues; real-user data shows what actual visitors experience.

• PageSpeed Insights: Review both field data from the Chrome UX Report and Lighthouse lab diagnostics. Look for the CLS assessment and the “Avoid large layout shifts” opportunity.
• Chrome DevTools: Use the Performance panel to record a page load. Enable layout shift regions to visually identify moving elements and inspect the timeline for shift events.
• Lighthouse: Run Lighthouse in Chrome DevTools or PageSpeed Insights for a controlled test of performance, accessibility, and layout stability.
• Google Search Console: Check the Core Web Vitals report to find groups of URLs categorized as good, needing improvement, or poor on mobile and desktop.
• Real-user monitoring (RUM): Use a RUM platform or the PerformanceObserver API to collect CLS data from actual page visits. This is valuable for identifying device-specific, template-specific, or third-party-script problems that lab tests may miss.

When investigating, test key templates rather than only the homepage: product pages, articles, category pages, landing pages, checkout flows, and pages with ads or embeds. A single unstable template can affect hundreds or thousands of URLs.

Practical Ways to Reduce CLS

Effective CLS fixes begin with one principle: reserve space before content arrives. Apply these improvements across your site templates and component library.

• Add image dimensions: Include accurate width and height attributes for images, or use CSS aspect-ratio for responsive media containers.
• Reserve media space: Set predictable dimensions for videos, iframes, carousels, and embedded widgets. Use placeholders or skeleton states that match the final component size.
• Define ad slot sizes: Create dedicated ad containers with fixed dimensions or sensible minimum heights. Avoid collapsing an empty ad area if an ad may load later.
• Control dynamic modules: Do not insert notices, promotions, or personalized content above existing page content unless space was already allocated. Place nonessential updates below the fold where possible.
• Optimize font loading: Preload critical font files, use properly selected fallback fonts, and consider CSS font metric overrides such as size-adjust to minimize text reflow. Review font-display behavior carefully rather than assuming one setting fits every site.
• Animate safely: Use CSS transform and opacity for visual animations instead of properties that trigger layout recalculation, such as changing top, left, width, or height.

Frequently Asked Questions About CLS

What is a good CLS score?

A good Cumulative Layout Shift score is 0.1 or lower. Scores above 0.1 need attention, while scores above 0.25 are considered poor under Google’s Core Web Vitals guidance.

What causes a high Cumulative Layout Shift score?

High CLS commonly results from images without dimensions, late-loading ads, embeds without reserved space, font swaps that change text size, and dynamic content inserted above visible content.

How can I check my website’s CLS score?

Use PageSpeed Insights for field and lab data, Chrome DevTools and Lighthouse for debugging, Search Console for URL-group reporting, and real-user monitoring for visitor-level performance data.

Does CLS affect Google rankings?

CLS is part of Google’s Core Web Vitals and broader page experience signals. It is one consideration among many ranking systems, but improving it also creates a more stable and conversion-friendly website.

How do I fix CLS caused by images, ads, or fonts?

Set explicit image dimensions or aspect ratios, reserve fixed space for ad slots and embeds, and manage font loading with preloading, compatible fallback fonts, and metric adjustments that reduce text reflow.

Ready to see how your site stacks up? Run a free SEO audit and get a clear picture of what's holding your rankings back.