What CLS value counts as good?

A CLS value below **0.1** is generally considered good, between 0.1 and 0.25 needs improvement and above that is poor (Source: Google web.dev). What matters for ranking is the field data at the 75th percentile of real users, not a single lab value.

What is the most common cause of layout shifts?

Images and media without reserved dimensions are typically the most common cause. According to the Web Almanac 2025, around 62 percent of mobile pages have at least one image without explicit dimensions (HTTP Archive Web Almanac 2025). Explicit width/height attributes or a fixed aspect-ratio usually fix this reliably.

Why do web fonts cause layout shifts?

When the browser first shows a fallback font and later applies the target font, the text reflows if their metrics differ. A metrically matched fallback via size-adjust and override values, plus preloading critical fonts, markedly reduces this effect.

How do I prevent CLS from cookie banners?

Consent layers should be implemented as a fixed overlay that sits above the content rather than pushing it down. Alternatively, a placeholder with the exact banner height reserves the space already in the initial HTML, so no shift occurs.

Do animations and expanding menus count toward CLS?

Changes triggered by the user within 500 milliseconds of the interaction do not count. Automatic shifts do. Animations should run via transform and opacity rather than height or margin, since these do not trigger a reflow on the compositor layer.

How do I measure CLS in an online shop reliably?

It is advisable to measure per template type rather than only at the origin level, combining field data from real users with lab tests using a throttled network. The browser developer tools highlight every shift and name the triggering element. An accompanying [technical analysis](/en/technical-analysis/) prioritizes the measures by impact.

Avoid Cumulative Layout Shift: Stable Shops

An online shop whose content jumps around while loading erodes trust and revenue. That is exactly what Cumulative Layout Shift (CLS) captures as one of the three Core Web Vitals: the unexpected movement of visible elements during page rendering. In 2025, 72 percent (HTTP Archive Web Almanac 2025) of desktop pages and 81 percent (HTTP Archive Web Almanac 2025) of mobile pages reach a good CLS value below 0.1 -- yet data-dense shop templates with images, reviews, ad slots and late-loading scripts regularly belong to the unstable minority. This article explains the common causes of CLS, their measurable impact and concrete countermeasures for stable layouts. Anyone who takes their performance strategy seriously treats layout stability not as a cosmetic detail but as a conversion and ranking lever.

Key takeaways

Cumulative Layout Shift scores unexpected movement from impact fraction and distance fraction; below 0.1 counts as good, and the reported value is the sum of the largest session window at the 75th percentile of real user data (Google web.dev).
Images without reserved dimensions are the most common cause: 62 percent (HTTP Archive Web Almanac 2025) of mobile pages carry at least one. Width and height attributes or a container with a fixed aspect-ratio in the template fix it.
Web fonts reflow text the moment the fallback face is swapped out. Metrically matched fallbacks via size-adjust and override values plus preloading reduce this; font-display: optional skips the swap entirely.
Ad slots, review widgets and consent layers belong either in a fixed layer outside the document flow or in a slot whose height is reserved up front; shifts inside the visible area weigh heaviest in the score.
Changes triggered by a user within 500 milliseconds are excluded from CLS, while automatic movement counts in full. Animations therefore run on transform and opacity rather than height, top or margin.
CLS is template-specific: product page, category and cart are measured separately, fixes belong in the reused component, and a CLS budget in the build catches new plugins and marketing scripts.

What Cumulative Layout Shift Actually Measures

Cumulative Layout Shift quantifies how much visible elements shift unexpectedly during loading -- movements the user did not trigger themselves. A CLS value below 0.1 is considered good, between 0.1 and 0.25 needs improvement and above that is poor (Source: Google web.dev). Unlike loading metrics, this is not about speed but about visual stability: if the order button jumps down at the moment of the click because a banner snaps in above it, the click lands on the wrong element.

The CLS score of an individual layout shift is calculated from two factors: the impact fraction (what share of the viewport is affected by the shift) and the distance fraction (how far the element moves relative to viewport height). An element covering half the visible area that shifts down by a quarter of the viewport height yields a shift score of 0.125 (0.5 times 0.25) (Source: Google web.dev). These scores are not added up arbitrarily but grouped within session windows.

Session Windowing: How the Final CLS Value Is Formed

Since the metric was revised, CLS is no longer summed over the entire page lifetime but over a session window: a burst of consecutive shifts with at most 1 second gap between them and a maximum total duration of 5 seconds. The reported CLS value is the sum of the largest such window (Source: Google web.dev). This means several small, distributed shifts weigh less than a single large jump during initial rendering.

Important for evaluation: for ranking, Google uses only real-user field data from the 75th percentile. A value that looks clean in the lab says little if real users on slower devices or connections experience stronger shifts. A robust performance analysis therefore combines lab and field data to capture both the cause and the real frequency of a shift.

0.1

CLS good threshold (Google web.dev)

72%

desktop pages good (Web Almanac 2025)

81%

mobile pages good (Web Almanac 2025)

max. session window (Google web.dev)

Images Without Dimensions: The Most Common Cause

By far the most common source of CLS is images and media without reserved dimensions. According to the Web Almanac 2025, 62 percent (HTTP Archive Web Almanac 2025) of all mobile pages have at least one image without explicit dimensions, and the median page contains two such images -- rising to 25 at the 90th percentile (Source: HTTP Archive Web Almanac 2025). Without a width and height attribute, the browser does not know how much space the image needs before loading, renders the following content upward and then pushes it down once the image arrives.

The fix is unspectacular but effective: every ,