What Is Cumulative Layout Shift?
Cumulative Layout Shift, or CLS, is a metric that quantifies how much the content on a web page moves around unexpectedly while the page is loading and while the user is interacting with it. It is one of the three Core Web Vitals that Google uses as a ranking signal, specifically addressing the visual stability dimension of user experience. You have likely encountered the problem CLS measures: you open a web page, start reading an article, and suddenly the text jumps down because a banner ad loaded above it. Or you go to tap a button on your phone and the entire layout shifts at the last moment, causing you to tap something else entirely.
These unexpected layout shifts are among the most frustrating experiences on the web. They erode user trust, cause accidental clicks, and make your website feel unreliable and poorly constructed. Google recognized this universal pain point and created CLS as a way to quantify it. A page with a CLS score of 0.1 or less is considered to have good visual stability. Scores between 0.1 and 0.25 need improvement, and anything above 0.25 is classified as poor. The lower the score, the more stable the page feels to visitors.
For small business owners, CLS issues can directly cost you customers. Imagine a potential client visiting your contact page on their phone. They scroll to your phone number, begin to tap it, and at that instant a cookie consent banner loads and pushes the phone number down. The user accidentally taps a random link instead, gets frustrated, hits the back button, and calls your competitor. This scenario is not hypothetical. It happens millions of times daily across the web, and it is entirely preventable with proper attention to layout stability. The good news is that CLS fixes are usually among the simplest performance improvements to implement, often requiring only HTML attribute additions or minor CSS changes.
How CLS Is Calculated
CLS is calculated by summing the layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. Each individual layout shift is scored by multiplying two values: the impact fraction and the distance fraction. The impact fraction measures the percentage of the viewport that was affected by the shift. If an element that takes up 40 percent of the viewport shifts down, the impact fraction includes both the original position and the new position of the element, so it might be 60 percent of the viewport. The distance fraction measures how far the element moved as a proportion of the viewport. If the element moved down by 100 pixels on a 900-pixel viewport, the distance fraction is roughly 0.11.
Not all layout shifts count toward CLS. Shifts that occur within 500 milliseconds of a user interaction like a click, tap, or key press are excluded because users expect the layout to change in response to their actions. For example, if a user clicks an accordion to expand a FAQ section and the content below shifts down, that shift is expected and does not increase CLS. However, shifts caused by slow-loading images, injected advertisements, dynamically loaded content, or font swaps are considered unexpected because the user did not initiate them.
Google updated the way CLS is measured in 2022 to use a "session windows" approach. Instead of summing every layout shift from page load to page unload indefinitely, the metric now groups shifts into session windows. A session window is a burst of layout shifts where each shift occurs within one second of the previous one, and the entire window does not exceed five seconds. The CLS score reported is the maximum session window value, not the sum of all windows. This change was made to prevent long-lived pages like single-page applications and infinite-scroll feeds from being unfairly penalized by shifts that accumulate over extended viewing sessions. For typical small business websites where users visit a page and navigate away within minutes, this change has minimal practical impact.
Check your cumulative layout shift (cls) for free
Lumio SEO scans your website in 60 seconds and checks your cumulative layout shift (cls) along with 40+ other SEO factors.
Analyze My Site FreeNo signup required. Results in 60 seconds.
Common Causes of Layout Shift
Images and videos without explicit dimensions are the single most common cause of CLS on small business websites. When an image tag does not include width and height attributes, the browser does not know how much space to reserve for it during the initial layout. The browser renders the surrounding text first, and when the image finally loads, the text gets pushed down to accommodate it. This is especially problematic for hero banners and above-the-fold images that are large enough to displace significant amounts of content. Modern browsers can calculate the aspect ratio from width and height attributes and reserve the correct space even before the image starts downloading.
Web fonts are another major contributor to layout shift. When a custom font loads and replaces the browser's fallback font, any difference in character size, line height, or letter spacing between the two fonts causes all the text on the page to reflow. This effect, called Flash of Unstyled Text or FOUT, can produce substantial layout shifts, especially on text-heavy pages. The font-display CSS property controls this behavior, but the default setting varies between browsers, and many websites do not configure it explicitly. Even with font-display set to swap, which is recommended for performance, there will still be a shift if the custom font has significantly different metrics than the fallback.
Dynamically injected content is a third common source of CLS. This includes advertisements served by third-party ad networks, cookie consent banners, email signup popups, notification bars, and chat widgets that insert themselves into the page layout after the initial render. Each of these elements pushes existing content down or sideways when it appears. Advertisements are particularly problematic because their size is often unpredictable and they load asynchronously from external servers. Cookie consent banners that appear at the top of the page are another frequent offender, especially when they push the main content down instead of overlaying it. For small business sites, even a simple "We use cookies" bar inserted at the top of the page without reserved space can produce enough shift to push the CLS score from good to needs improvement.
How to Fix Cumulative Layout Shift
The most impactful fix for CLS is adding explicit width and height attributes to every image and video element on your site. This tells the browser the aspect ratio of the media before it loads, allowing it to reserve the correct amount of space in the layout. In HTML, this means adding width="800" height="600" (or whatever the actual dimensions are) directly to your image tags. Modern CSS with aspect-ratio support makes this even easier for responsive layouts. If you use a CMS like WordPress, Shopify, or Squarespace, check whether your theme already adds these attributes automatically. Many modern themes do, but older templates and custom-coded sections may not.
For web font shifts, the best approach combines several techniques. First, preload your most important font files using link rel="preload" tags so the browser starts downloading them as early as possible, reducing the window during which the fallback font is visible. Second, use the CSS font-display: swap property to ensure text remains visible while fonts load, accepting a brief layout shift in exchange for faster visible content. Third, use a size-adjusted fallback font that closely matches the dimensions of your custom font. This technique, supported by the CSS size-adjust, ascent-override, and descent-override descriptors, minimizes the visual difference between the fallback and custom font, reducing or eliminating the layout shift when the swap occurs.
For dynamically injected content like ads and banners, the solution is to reserve space in your layout before the content loads. For advertisements, create a container div with explicit min-height that matches the expected ad dimensions. For cookie consent banners, use an overlay design that floats above the page content instead of pushing it down. Chat widgets should appear as floating elements in the corner of the screen rather than being injected into the document flow. For any content loaded asynchronously, use CSS to define the dimensions of the container element so the browser allocates space during the initial render. If you use A/B testing tools or personalization platforms that swap content after page load, ensure the swap happens before the first paint or that the swapped content has identical dimensions to the original.
How Lumio SEO Detects CLS Issues
Lumio SEO measures your page's Cumulative Layout Shift as part of its comprehensive performance analysis. When you submit a URL for review, the tool renders your page in a real browser environment and monitors every layout shift that occurs during loading. The report displays your overall CLS score with clear color coding: green for scores at or below 0.1, yellow for scores between 0.1 and 0.25, and red for scores above 0.25. This instant visual indicator tells you at a glance whether your page meets Google's standard for visual stability.
What sets Lumio SEO apart from basic CLS checkers is its ability to identify the specific elements causing layout shifts. The report lists each shift event with the affected element, the shift magnitude, and the cause category such as images without dimensions, font swap, or injected content. This element-level detail means you know exactly which image needs width and height attributes, which font is causing text reflow, or which third-party script is injecting content and pushing your layout around. Instead of facing an abstract score with no clear path to improvement, you receive a targeted list of fixes.
The tool also provides prioritized recommendations based on the impact each fix would have on your overall CLS score. A single large image without dimensions that causes a 0.15 shift score will be flagged as a higher priority than a small icon shift contributing 0.02. This prioritization is valuable for small business owners who may have limited development resources and need to focus on the changes that will make the biggest difference first. For sites with multiple pages sharing common templates, Lumio SEO's site audit feature can identify CLS patterns across your entire site, revealing template-level issues that, when fixed once, improve CLS on every page using that template simultaneously.