What is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) measures how much visible elements on a web page move unexpectedly while the page loads. Poor CLS occurs when content jumps, buttons change position or text moves down although the user already wants to interact with the page.

Which CLS values are considered good?

CLS is one of the three Core Web Vitals. A value up to 0.1 is considered good. Between 0.1 and 0.25, improvement is recommended. Values above 0.25 are considered poor.

Unlike loading metrics, CLS is not measured in seconds. The value describes the sum of unexpected layout shifts. The higher the value, the more unstable the page feels for visitors.

What causes layout shifts?

Many CLS problems occur because elements do not have reserved space in the layout. Images without fixed width and height attributes, dynamically loaded banners, late cookie notices, ad slots, embedded videos or web fonts without suitable fallbacks can move visible content.

On mobile devices, these shifts are especially noticeable. When the visible area is small, even a small movement can put a button in a different place or interrupt a paragraph.

Well-intended optimizations can also trigger CLS. Lazy loading, dynamic components or personalized content can be useful, but they need reserved layout space. Otherwise, performance is improved in one place while stability suffers elsewhere.

Why does CLS cost trust and conversions?

Layout stability is a usability issue. If a user wants to tap a button and suddenly hits another link, the page feels unreliable. In shops, booking flows or forms, this can directly affect completion rates.

CLS should therefore not be treated as a purely technical check. Together with Largest Contentful Paint (LCP) and Interaction to Next Paint (INP), the value shows whether a page appears quickly, remains stable and reacts to input.

How can CLS be improved?

The most important measures are structural: images and videos need fixed aspect ratios, ad or banner areas need reserved space, fonts need a controlled loading strategy and late-loaded components need clear layout boundaries.

For WordPress websites, it is also worth checking plugins that insert elements into headers, footers or content areas after the page has started loading. Cookie banners, review widgets or external forms should be embedded in a way that does not move content that is already visible.

Professional performance optimization checks CLS in connection with design, frontend code, hosting and third-party scripts. Technical basics and examples are documented by web.dev in its article on Cumulative Layout Shift.

For diagnosis, recordings and DevTools are often more useful than the number alone. They show which element moves, when the shift happens and whether users are affected at a critical moment.