Skip to content
2.4Intermediate9 min

CLS Optimization: Ensuring Visual Stability

Lucas Blochberger··Updated 11 June 2026
Definition

Cumulative Layout Shift (CLS) measures visual stability: how much elements unexpectedly shift during loading. CLS has the highest mobile pass rate at 81 percent among the three CWV.

Key Takeaways

  • ✓CLS target: a value of 0.1 or less at the 75th percentile, measured separately for mobile and desktop; above 0.25 is considered poor.
  • ✓The score per shift is Impact Fraction (affected viewport portion) times Distance Fraction (distance traveled), bundled into session windows of maximum 5 seconds.
  • ✓Images, videos and iframes without width/height or aspect-ratio are the most common and most easily avoidable CLS culprit; around two-thirds of pages still do not set image dimensions.
  • ✓Embedding web fonts without shift: font-display strategy, size-adjust and overridden fallback metrics, font preload and self-hosting (with GDPR advantage in the DACH region).
  • ✓Show consent banners as overlay instead of in document flow and dimension ad slots in advance; animations only with transform and opacity, never with geometry properties.
  • ✓In Next.js, next/image and next/font automatically reserve space and align font metrics, eliminating the most common CLS sources at development time.
  • ✓CLS is measured over the entire lifetime of the page and is primarily a UX signal for humans; AI crawlers evaluate the server-rendered HTML but benefit indirectly from clean SSR.

CLS concerns visual stability and is often the easiest CWV problem to solve.

Common CLS Causes

Images without dimensions: When width and height are missing, the browser does not reserve space. After loading, the entire content shifts. Solution: Always specify width and height attributes or CSS aspect-ratio.

Web Fonts: When loading custom fonts, the text area can jump (FOIT/FOUT). Solution: font-display: swap and preload fonts with link rel=preload.

Dynamic content: Ads, cookie banners, and embedded widgets that appear after the initial load. Solution: Reserve fixed placeholders (min-height) for dynamic areas.

Late-loading elements: Lazy-loaded images inserted while scrolling. Solution: Use aspect-ratio containers.

Measuring CLS

PageSpeed Insights shows the CLS value and identifies the biggest shift causes. Chrome DevTools Performance Panel visualizes each individual layout shift with timing and impact.

Data & Statistics

Seit 12. Maerz 2024 ist INP ein offizieller Core Web Vital und ersetzte FID

web.dev (Google) - Blog: Interaction to Next Paint becomes a Core Web Vital on March 12 [international] (2024)

A/B-Test Rakuten 24: CLS um 92,72 % verbessert, Umsatz pro Besucher +53,37 %, Conversion-Rate +33,13 %

web.dev (Google) - Rakuten 24 Case Study [international] (2022)

CLS von ~0,2 auf 0 reduziert: +15,1 % Seitenaufrufe pro Sitzung, +13,3 % Sitzungsdauer, -1,72 Prozentpunkte Absprungrate

web.dev (Google) - Yahoo! JAPAN News Case Study [international] (2021)

0,1 s schnellere mobile Ladezeit erhoeht die Conversion-Rate im Retail um 8,4 % und die Ausgaben um 9,2 %

web.dev (Google) - Milliseconds make millions (Deloitte und 55 im Auftrag von Google) [international] (2020)

95,3 % Online-Penetration in Oesterreich, 8,69 Mio. Internetnutzer und 13,4 Mio. Mobilfunkanschluesse (147 % der Bevoelkerung) Anfang 2025

DataReportal - Digital 2025: Austria [Oesterreich] (2025)

CLS-Schwellen: 0,1 oder weniger gut, ueber 0,25 schlecht, gemessen am 75. Perzentil getrennt nach Mobil und Desktop

web.dev (Google) - Cumulative Layout Shift (CLS) [international] (2024)

2025 erreichen 72 % der Desktop-Seiten und 81 % der mobilen Seiten einen guten CLS-Wert (mobil LCP 62 %, INP 77 %)

HTTP Archive Web Almanac 2025 - Performance [international] (2025)

62 % der mobilen Seiten und 65 % der Desktop-Seiten setzen bei mindestens einem Bild keine Abmessungen

HTTP Archive Web Almanac 2025 - Performance [international] (2025)

Anteil mobiler Seiten mit gutem CLS stieg von 60 % (2020) auf 79 % (2024)

HTTP Archive Web Almanac 2024 - Performance [international] (2024)

87 % der mobilen Seiten nutzen mindestens eine Webfont, aber nur 15 bis 16 % der Seiten setzen Font-Preload ein

HTTP Archive Web Almanac 2025 - Performance [international] (2025)

39 % der mobilen Seiten und 42 % der Desktop-Seiten nutzen nicht-komposierte Animationen

HTTP Archive Web Almanac 2024 - Performance [international] (2024)

FAQ

What is a good CLS value?
A good CLS value according to Google is 0.1 or less. Values above 0.25 are considered poor, values in between indicate need for improvement. What matters is that the target is reached at the 75th percentile of page views, measured separately for mobile and desktop. This means that three out of four page views must be below 0.1, not just the average.
How is the CLS score calculated?
Each layout shift receives a score of Impact Fraction times Distance Fraction. The Impact Fraction is the portion of the visible viewport affected by shifted elements. The Distance Fraction is the distance traveled divided by the larger viewport dimension. CLS does not naively sum all shifts over the entire lifetime, but forms session windows of maximum 5 seconds and takes the highest window value as the page's CLS.
What is the most important measure against CLS?
The most effective single measure is to give all images, videos and iframes fixed dimensions, i.e. width and height as attributes or a CSS aspect-ratio. Then the browser reserves the space before the file is loaded, and the content does not jump when loading. According to HTTP Archive, around two-thirds of pages still do not set image dimensions, which is why images remain the most common avoidable CLS culprit.
How do I prevent layout shifts caused by web fonts?
Web fonts cause shifts when the browser swaps the fallback font for the loaded web font and size or spacing changes in the process. Effective measures are: a deliberate font-display strategy (swap or optional), aligning fallback metrics with size-adjust, ascent-override and descent-override, a preload hint for the most important font, and self-hosting. Self-hosting has an additional GDPR advantage in the DACH region because no IP addresses are sent to external font services.
How do you make cookie banners and advertising CLS-safe?
Consent banners should be positioned as a fixed overlay above the content instead of inserting into the document flow, because an inserting banner often creates the largest single shift of the page. Ad slots need pre-reserved space via slot sizing or a container with aspect-ratio. Fade-in and fade-out animations should be done with transform and opacity, because these properties do not trigger reflow.
How does Next.js help with CLS optimization?
Next.js provides two central tools. next/image enforces the specification of dimensions or a defined container and thus automatically reserves space for images. next/font loads fonts self-hosted at build time, avoids external requests and automatically calculates fallback metrics so that the font swap does not cause a shift. Additionally, skeleton loaders should have exactly the height of the final content and client-side loaded content should be given fixed areas.
Does CLS affect visibility in AI search engines and with AI crawlers?
Only indirectly. CLS is a visual signal that arises in the browser during rendering and is aimed at human users. AI crawlers primarily process the server-rendered HTML and do not perceive visual jumps, so a high CLS value does not directly worsen GEO visibility. However, measures against CLS such as clean server-side rendering and early stable HTML also improve machine readability and thus benefit AI crawlers as well.

Related Articles

How does your website perform?

Get a free, AI-powered SEO report of your website by email: technical SEO, on-page, keywords & competitors. No obligation.

Get a free SEO audit →
Previous← INP Optimization: Measuring and Improving InteractivityNextJavaScript Rendering and AI Crawlers: The Visibility Divide →