CLS Optimization: Ensuring Visual Stability

Cumulative Layout Shift (CLS) is the Core Web Vitals metric that measures how calm or jumpy a page feels while it loads and while you use it. When content jumps because an image loads without reserved space or a cookie banner pushes in, the user clicks the wrong button. CLS quantifies exactly this experience. This article explains how the score is calculated, what causes layout shifts, how to stabilize images, web fonts, consent banners and Next.js components, and why CLS remains primarily a UX signal for human users, while AI crawlers mainly look at the server-rendered HTML.

Why visual stability matters for businesses

Since the introduction of Core Web Vitals, CLS has been an official page experience signal alongside Largest Contentful Paint (LCP) and Interaction to Next Paint (INP). INP is the newest member: it became a Core Web Vital on March 12, 2024, replacing FID (international source, Google). CLS has been part of the set from the start and is the only one of the three metrics that describes the visual calm of the page rather than speed or responsiveness.

The business impact is measurable. In an A/B test by the Japanese online retailer Rakuten 24, documented by Google, the optimized variant improved the CLS score by 92.72 percent while increasing revenue per visitor by 53.37 percent and the conversion rate by 33.13 percent (international case study).

Yahoo! JAPAN News reduced CLS in lab data from about 0.2 to 0 and then recorded 15.1 percent more page views per session, 13.3 percent longer session duration and a bounce rate that was 1.72 percentage points lower (international case study). These effects fit the broader finding that a mobile load time just 0.1 seconds faster increases the retail conversion rate by 8.4 percent and spending by 9.2 percent (international study, Deloitte and 55, commissioned by Google).

For the Austrian market, this matters because usage is almost entirely mobile and connected. In early 2025, online penetration in Austria stood at 95.3 percent, with 8.69 million internet users and 13.4 million mobile connections, or 147 percent of the population (Austria). Layout shifts are most noticeable on smartphones, where smaller viewports and slower connections make every jump more visible.

How the CLS score is calculated

CLS measures the session window with the highest sum of unexpected layout shifts. A layout shift occurs when a visible element changes its start position between two rendered frames without a user interaction triggering it. The score per shift comes from two factors.

• Impact fraction: The share of the visible viewport affected by the shifted elements. If a block that takes up the top half of the screen moves down, a large part of the viewport is affected.
• Distance fraction: The distance the most unstable element travels, divided by the larger viewport dimension. It describes how far the content jumps.

The layout shift score is the product of impact fraction and distance fraction. CLS does not naively add up all individual values over the entire page lifetime. It works with session windows instead: shifts are grouped into windows, and a window lasts at most 5 seconds, with no more than 1 second between individual shifts. The highest window value counts as the page's CLS. This prevents long sessions from producing artificially poor scores.

The thresholds are clearly defined. According to Google, pages should aim for a CLS score of 0.1 or less; scores above 0.25 count as poor, measured at the 75th percentile of page views, separately for mobile and desktop (international source, Google). Scores between 0.1 and 0.25 need improvement. The 75th percentile means that three out of four page views must reach the target, not just the average.

On mobile devices, CLS performs best of the three Core Web Vitals. According to the HTTP Archive Web Almanac, in 2025 72 percent of desktop pages and 81 percent of mobile pages achieve a good CLS score (international study), while on mobile only 62 percent achieve a good LCP and 77 percent a good INP. The progress is clear: the share of mobile pages with good CLS rose from 60 percent in 2020 to 79 percent in 2024 (international study).

The most common causes of layout shifts

Almost all CLS problems come down to a few patterns. If you know them, you will find the culprits quickly.

• Images, videos and iframes without dimensions: Without width and height or a defined aspect ratio, the browser only knows the height once the file has loaded. Until then, the element takes up no space; afterwards, it pushes the rest of the content down.
• Dynamically inserted content: Ads, embeds, newsletter banners and, above all, consent dialogs often appear after the first render and push existing content aside.
• Web font swapping (FOUT/FOIT): The browser first shows a fallback font and then swaps it for the loaded web font. If the font metrics differ, the text flow changes and the content shifts.
• Late-loading components: Widgets loaded on the client side, skeleton loaders with the wrong height, or content that only appears after hydration shift the rest of the page.

Images are the most common and most easily avoidable culprit. According to the 2025 Web Almanac, 62 percent of mobile pages and 65 percent of desktop pages fail to set dimensions on at least one image (international study). So the majority of pages leave the browser guessing the size of at least one image.

Stabilizing images and media

The most effective single measure is to tell the browser the dimensions of every media element in advance. That way, it reserves the space before the file has loaded.

• Set width and height as attributes: Modern browsers calculate the aspect ratio from the HTML attributes width and height and keep the space reserved, even when CSS scales the image responsively. This is the fastest lever.
• Use CSS aspect-ratio: For containers whose ratio is fixed but whose exact pixel dimensions vary, aspect-ratio reserves the space independently of the loaded file.
• min-height for unknown content: Where the final height is not fixed, for example with lists that load later, a sensible minimum height keeps the container from collapsing.
• Use lazy loading correctly: Deferred loading saves bandwidth, but it must never happen without reserved space. A lazy-loaded image without dimensions is one of the most common CLS sources because it pops in exactly when the user scrolls.

Embedding web fonts without shifts

Web fonts are almost universal and therefore a systematic CLS risk. According to the 2025 Web Almanac, 87 percent of mobile pages use at least one web font, but only 15 to 16 percent of pages use font preload (international study). The Almanac explicitly links this to CLS: when the browser swaps a fallback font for the loaded web font, the size and spacing of the text change and content shifts.

• Choose font-display deliberately: The value swap shows text in the fallback font right away and swaps later, which avoids FOIT but can cause FOUT shifts. optional skips the swap entirely after a short time and is often the calmer choice for stability.
• Align fallback metrics: With size-adjust, ascent-override and descent-override in an @font-face rule, you can adjust the fallback font so that it takes up the same space as the web font. The swap then becomes practically invisible.
• Preload critical fonts: A targeted preload hint for the most important font makes it available early. Given how rarely sites use preload, this is an easy head start over the competition.
• Prefer self-hosting: Self-hosted fonts remove the extra connection to third-party providers. The font is available earlier, and the time window in which a shift can occur gets shorter. In the DACH region, self-hosting also has a GDPR advantage because no IP addresses are transmitted to external font services.

CLS in Next.js and JavaScript frameworks

Modern frameworks bring their own CLS pitfalls, but they also provide the right tools. What matters is that server-rendered content keeps its final geometry once hydration kicks in.

• Use next/image: The component requires dimensions or fill with a defined container and so reserves space automatically. This eliminates the most common image source of CLS at development time.
• Use next/font: next/font self-hosts fonts at build time, eliminates external requests and automatically calculates fallback metrics, so the font swap does not cause a shift.
• Build skeleton loaders to size: Placeholders must have exactly the height of the content that replaces them. A skeleton that is smaller than the final block shifts the page on replacement just as much as no placeholder at all.
• Mind SSR, streaming and hydration: Server rendering and streaming deliver stable HTML early. Problems arise when content loaded on the client side appears above or between blocks that are already visible. Such content belongs at the bottom or in fixed, reserved areas.

Making consent banners and third-party ads CLS-safe

Wherever GDPR applies, the consent dialog is practically unavoidable and one of the most common CLS culprits, because it appears early and prominently. Ad slots behave similarly, since their size is often only known at runtime.

• Banner as an overlay, not in the flow: A consent dialog that sits as a fixed overlay above the content shifts nothing. A banner that pushes into the top of the document flow and moves everything down, by contrast, creates a large shift.
• Size ad slots in advance: Reserve the expected height for every ad slot via slot sizing or a container with aspect-ratio. If no ad is served, the space should collapse in a defined way instead of the content jumping.
• transform instead of layout-changing properties: Animate fade-ins and fade-outs with transform and opacity. The compositor handles these properties, and unlike top, left, width or height, they do not trigger reflow.

Designing animations and rendering efficiently

Non-composited animations are an underestimated CLS source. According to the 2024 Web Almanac, 39 percent of mobile pages and 42 percent of desktop pages use non-composited animations (international study), which recalculate styles, reflow the document and repaint pixels.

• Animate only transform and opacity: These properties run on the GPU and do not change the layout. Animating geometry properties such as width, height or margin forces the browser to reflow and can shift neighboring elements.
• Use content-visibility selectively: With content-visibility: auto, the browser skips rendering areas that are not visible. Combined with contain-intrinsic-size, the reserved space is kept, so no shift occurs when the area scrolls into the viewport.
• Use CSS containment: The contain property limits an element's layout, style and paint effects. Changes inside a container then do not affect the rest of the page.

Measuring CLS: lab vs. field

You can measure CLS on two levels that complement each other and often differ. Lab data shows reproducible values under controlled conditions; field data shows the actual experience of real users.

• Field data (CrUX): The Chrome UX Report collects anonymized real-user data and is the basis for the official assessment at the 75th percentile. The Core Web Vitals report in Google Search Console and PageSpeed Insights both draw on it.
• Lab data (Lighthouse): Lighthouse and the lab part of PageSpeed Insights simulate a page view. They are ideal for debugging but only capture the initial load, not later shifts caused by interactions.
• Real user monitoring with web-vitals.js: The official JavaScript library measures CLS directly in the browsers of real users over the entire page lifetime and can send the values to an analytics system. This closes the gap between lab data and CrUX and makes late shifts visible as well.

The key difference: lab data typically only measures the load, but CLS builds up over the entire lifetime of the page. A page can show perfect CLS in a Lighthouse test and still perform poorly in the field, for example because a banner only pushes in after several seconds or on an interaction.

Common mistakes in CLS optimization

Recurring patterns cost stability, but you can avoid them deliberately.

• Looking only at lab data: If you only check Lighthouse, you miss late shifts from consent banners, ads or interactions that only occur in the field.
• Serving images without dimensions: Despite the simple fix, according to HTTP Archive this still affects the majority of pages (62 percent on mobile, 65 percent on desktop).
• Inserting consent banners into the document flow: A banner that pushes in often creates the largest single shift on the entire page.
• Animating geometry properties: Animations of width, height, top or left trigger reflows and shift neighboring elements.
• Skeleton loaders with the wrong height: A placeholder that does not match the final height shifts the page on replacement just as much as no placeholder at all.

CLS, page experience and the GEO context

CLS is part of page experience and acts as a supplementary signal, not as a standalone ranking lever. When relevance is comparable, a better user experience can tip the balance, which is why CLS is often described as a tie-breaker. Together with LCP and INP, it gives a complete picture of perceived quality: LCP measures how fast the main content appears, INP how responsive the page is, and CLS how stable it stays. The back/forward cache (bfcache) also affects CLS: when a page is eligible for the bfcache, the browser restores it on back and forward navigation fully loaded and without new layout shifts (international source, Google). This further improves CLS in the field.

In the context of AI crawlers and Generative Engine Optimization (GEO), a clear distinction matters. CLS is a visual signal for human users that arises in the browser while layout and pixels are calculated. AI crawlers, on the other hand, primarily process the server-rendered HTML and its semantic structure. A high CLS score does not directly worsen visibility in AI answers, because a crawler does not perceive visual jumps. The connection is indirect: measures against CLS, such as clean server-side rendering, early stable HTML and avoiding content that loads purely on the client side, also improve machine readability for AI crawlers. CLS therefore remains primarily a UX signal for humans, while the same technical discipline also benefits GEO visibility.

Further reading and conclusion

CLS measures the visual stability of a page and should be 0.1 or lower at the 75th percentile. The biggest lever is also the simplest: serve images, videos and iframes with dimensions, because they are the most common and most easily avoidable culprit. Self-host web fonts and embed them with aligned fallback metrics and a font-display strategy, give consent banners and ads reserved space or an overlay, and animate only with transform and opacity. In Next.js, next/image and next/font handle a large part of this work automatically.

Sensible next steps: check the Core Web Vitals report in Search Console for CLS issues, set up real user monitoring with web-vitals.js to capture late field shifts, and systematically check all media as well as consent and ad slots for reserved space. Since the business effects in the documented case studies are substantial, CLS optimization pays off directly in conversions and revenue, regardless of rankings.