The frustrating experience of clicking a button that moves
You have lived this scenario: you are reading an article on your phone, you reach a link you want to follow, your finger moves toward it, and at the exact instant you are about to tap, an ad banner loads above it and the entire content shifts downward. Instead of clicking the link, you have tapped an advertisement you never wanted to see. Or worse: you have confirmed a purchase instead of canceling it because the button moved just before your finger touched the screen.
This frustration has a technical name: Cumulative Layout Shift (CLS), one of the three Core Web Vitals metrics that Google uses as a ranking signal. CLS quantifies how much visible elements shift unexpectedly on a page during its loading and use. Google draws a clear line: below 0.1 is good, between 0.1 and 0.25 needs improvement, and above 0.25 is poor.
What matters for SEO is that CLS does not only affect user experience — which would already be sufficient reason to fix it — but is a direct ranking factor. According to Web Almanac data from HTTPArchive published in 2025, 38% of mobile websites have a CLS above 0.1, meaning more than a third of the web delivers a visually unstable experience that Google penalizes. And the business impact is measurable: a European retailer documented a 15% increase in conversions after reducing their CLS from 0.25 to 0.05, a change that did not alter the content or design, only the stability with which it was presented.
What CLS is and why Google penalizes it
Cumulative Layout Shift is a metric that quantifies the sum of all unexpected layout shift scores that occur during the entire lifetime of a page. Each individual shift is calculated by multiplying two factors: the impact fraction (the percentage of the viewport occupied by the shifted elements) and the distance fraction (how far those elements moved relative to the viewport).
A critical technical detail: CLS only counts unexpected shifts. If a user clicks a button and content expands as a direct result of that interaction, that movement does not count as CLS because the user expected it. Only shifts that occur without user interaction — during loading, from dynamic content injection, or from element resizing — contribute to the score.
Google modified the CLS calculation method in 2021, moving from the cumulative total to a “session window” model that groups shifts occurring within 5-second intervals, with a maximum of 1 second between shifts. The final score is the window with the highest accumulation, not the total sum. This change benefited single-page applications (SPAs) and pages with progressively loading content, as a late shift no longer dragged the entire score.
Google penalizes high CLS because visual stability is a fundamental component of page experience. A document published by Google Search Central establishes that page experience includes Core Web Vitals as ranking signals, and CLS is one of the three metrics evaluated. It is not the most decisive factor — content relevance remains the priority — but in competitive scenarios, the difference between a CLS of 0.05 and one of 0.30 can be the difference between ranking on the first or second page.
How to measure CLS: tools and what they report
Measuring CLS correctly requires understanding the difference between lab data and field data, because the results can differ significantly.
Field data (CrUX). Chrome UX Report collects real data from Chrome users visiting your site. These represent the actual experience and are what Google uses for ranking. Access them through PageSpeed Insights (the “Discover what your real users are experiencing” section), Google Search Console (Core Web Vitals report), and the CrUX API. Field data updates on a rolling 28-day period.
Lab data. Tools like Lighthouse, DevTools Performance, and WebPageTest simulate a load under controlled conditions. They are useful for diagnosis but have a fundamental limitation: they only measure CLS during the initial load, not during user interaction. A page with a CLS of 0 in lab data can have a CLS of 0.4 in the field if ads are injected after load or if a web font causes a late reflow.
Chrome DevTools is the most precise diagnostic tool. In the Performance tab, record a page load and look for red bars labeled “Layout Shift” in the Experience section. Each bar shows which elements moved, how many pixels they shifted, and the individual score of that shift. The Rendering view with the “Layout Shift Regions” option enabled visually highlights areas that move during load.
Web Vitals Extension for Chrome shows CLS in real time as you browse, updating the value with each shift that occurs. It is the fastest way to verify CLS during normal page interaction.
Search Console reports CLS at the URL group level, classifying them as “Good,” “Needs Improvement,” or “Poor.” It is the most important monitoring panel because it reflects exactly what Google evaluates for ranking.
The most common causes of high CLS
The causes of high CLS can be grouped into five categories, ordered by frequency according to the Web Almanac HTTPArchive 2025 data:
1. Images and videos without dimensions (40% of problems)
When an <img> tag lacks width and height attributes, the browser cannot reserve space for the image before downloading it. When the image loads, it pushes all content below it, generating a layout shift. The same problem affects <video> and <iframe> elements. The solution is to always declare width and height in the HTML, or use the CSS aspect-ratio property to reserve space proportionally.
2. Dynamically injected content (25% of problems)
Cookie banners, notification bars, ads that load after the main content, chat widgets, and retargeting elements inserted into the DOM without reserved space. Each insertion pushes existing content, accumulating CLS. The solution is to reserve space with min-height in containers designated for dynamic content.
3. Web fonts causing FOUT (15% of problems)
When a custom font takes time to load and the browser shows a system font first then replaces it, the size differences between the two fonts can cause text reflow. The font-display: swap directive is necessary to avoid invisible text, but it can contribute to CLS if the fallback font has very different metrics from the final one. The solution is to use font-display: optional when fonts are not critical, or apply size-adjust in the fallback font’s @font-face.
4. Elements with content-dependent sizing (12% of problems)
Components that calculate their height based on asynchronously loaded content: carousels, pricing tables with dynamic data, forms with validation that adds error messages. The solution is to define minimum dimensions that contain the component in its largest state.
5. CSS animations that modify layout properties (8% of problems)
Animations using top, left, width, height, or margin instead of transform cause reflow and, if they affect the position of other elements, generate CLS. The solution is to use exclusively transform and opacity for animations, as these properties are processed on the GPU without affecting the layout of other elements.
How to fix CLS caused by images without dimensions
Images without dimensions are the most frequent cause of CLS because the browser, without knowing the image size before downloading it, assigns the element a size of 0x0 pixels and recalculates the layout when the image finally loads. The resulting shift is proportional to the image size: a full-screen hero image can generate a CLS of 0.5 on its own.
The basic solution is adding width and height attributes to every <img> tag. Modern browsers (Chrome 79+, Firefox 71+, Safari 14.1+) use these attributes to calculate the element’s aspect ratio before downloading the image, reserving the correct space. The values do not need to match the rendered size; what matters is that the proportion is correct.
<!-- Correct: browser reserves space in 16:9 proportion -->
<img src="hero.webp" width="1600" height="900" alt="Description">
<!-- Also correct: CSS aspect-ratio -->
<img src="hero.webp" style="aspect-ratio: 16/9; width: 100%;" alt="Description">For responsive images with srcset, the width and height attributes should correspond to the intrinsic dimensions of the largest image in the set. The browser will calculate the aspect ratio from those values.
For CSS background images, the technique changes: the container must have aspect-ratio or a percentage padding-bottom that reproduces the image proportion. A container for a 16:9 image needs padding-bottom: 56.25% (9/16 x 100).
Modern CMSs automatically generate width and height for media library images, but images inserted manually in the editor, those from external APIs, or those generated by client-side JavaScript typically lack these attributes. Auditing the rendered HTML is essential.
The impact difference is immediate: adding dimensions to the five above-the-fold images of a typical blog can reduce CLS from 0.15 to 0.02 without any other changes. For below-the-fold images, the impact is smaller but contributes to maintaining stability during scrolling.
How to fix CLS caused by ads and dynamic banners
Programmatic ads are the second most frequent cause of CLS and one of the most difficult to solve because the ad size is unknown until the ad network delivers it. A slot defined for a 300x250 ad can receive a 300x600 creative, doubling the height and pushing all content below it.
Reserve space with min-height. The first line of defense is defining containers with min-height equal to the most frequent ad size. For a standard display slot, min-height: 250px. For a leaderboard, min-height: 90px. If the ad is smaller than the reserved space, the visual margin is preferable to CLS.
Use collapse behavior intentionally. Many ad networks offer the option to collapse the container if no ad is served. If the container has min-height and the ad does not load, the empty space can be visually undesirable. The solution is using a placeholder (a subtle gray background with “Advertisement” text or the publication’s logo) that is replaced by the ad when it loads.
Position ads outside the main flow. Ads in sticky positions (fixed on screen), in sidebars with absolute positioning, or in overlays do not cause CLS because they do not displace other elements in the document flow. Moving high-impact slots to these positions is the most radical but also the most effective solution.
For above-the-fold ads — those causing the most CLS because they displace visible content — the best practice is loading them synchronously with the main content, not deferred. An ad that loads 2 seconds after the main content guarantees a layout shift visible to the user. If loaded simultaneously, the space is reserved from the start.
CLS on mobile vs desktop: important differences
CLS on mobile devices is typically significantly worse than on desktop, and the reasons are structural:
Content reflow in narrow viewports. A three-column layout on desktop becomes a single column on mobile. Elements with fixed dimensions on desktop may expand vertically on mobile, pushing content in unpredictable ways. Responsive images that change aspect ratio across breakpoints are particularly problematic.
Variable-size fonts. Web fonts often render at different sizes on mobile and desktop. If the fallback font takes more vertical space than the final font on a narrow viewport, the reflow is larger and the resulting CLS is higher. On mobile, where each pixel of height counts proportionally more, a 20px text reflow can represent a significant shift.
Slower connections. On 4G connections with high latency, resources load in a more staggered fashion than on fiber. This amplifies CLS because elements arrive in more separated waves, each causing its own shift. A page that loads all resources within 500ms on fiber and has one shift might have three separate shifts on 4G.
Cookie banners and notification bars. These elements are typically injected after load and, on mobile, can occupy 20-30% of the viewport height. Without reserved space, the shift is proportionally enormous.
The recommendation is to audit CLS separately for mobile and desktop, prioritizing mobile because: (a) Google uses mobile-first indexing, (b) 73% of global web traffic comes from mobile devices, and (c) CLS problems are structurally worse on small screens. Google Search Console separates Core Web Vitals data by device type, enabling identification of platform-specific issues.
Web performance and visual stability are related: performance optimizations that reduce load time also tend to reduce CLS, because resources arrive faster and are processed more homogeneously. Addressing both metrics together is more efficient than treating them separately.