What is Cumulative Layout Shift?

Understanding Cumulative Layout Shift

Cumulative Layout Shift is a Core Web Vital. It describes how stable a web page appears while loading. It also covers how the page responds to activity. A layout shift occurs when visible content moves without user action. For example, a paragraph may move down when an image loads above it. A button may move when an advertisement appears.

Related glossary terms: Core Web Vitals, INP, Interaction to Next Paint.

The metric focuses on unexpected movement. It doesn't cover every change on a page. Content may move after someone taps a menu or opens an accordion. This movement may be an expected response. In contrast, late-loading images, web fonts, advertisements, and embedded content can shift nearby elements. They can shift these elements without warning.

How Cumulative Layout Shift Works, Is Measured, or Is Used?

CLS combines the size of the affected area with the movement distance. The impact fraction represents the portion of the viewport affected by movement. The distance fraction represents the greatest movement distance. It measures this distance as a proportion of the viewport. Larger or further shifts contribute more to the score.

Modern CLS measurement considers shifts across a session window. It doesn't simply add every shift during an unlimited visit. A browser records shifts not caused by direct user input. It groups nearby shifts into session windows. PageSpeed Insights, Chrome DevTools, and the Chrome User Experience Report can show field or laboratory results. These results represent different testing conditions.

• A score of 0.1 or lower is generally considered good.
• A score above 0.1 and up to 0.25 needs improvement.
• A score above 0.25 is considered poor.

Why Cumulative Layout Shift Matters?

Layout stability affects whether people can read, select, and use a page confidently. Unexpected movement can make someone lose their place in an article. It can also make someone tap the wrong control. These problems are especially serious on small screens. A modest shift can move important content across much of the viewport.

CLS is also one signal used in Google’s page experience systems. It is used in Core Web Vitals reporting too. A poor result doesn't automatically stop a page from ranking. Search visibility depends on many factors, but a weak CLS score can reveal implementation problems. These problems can also reduce usability, engagement, and conversion reliability.

When Cumulative Layout Shift Matters Most?

CLS problems matter most on pages with rich media and third-party scripts. They also matter on pages with personalised modules or progressive content. Ecommerce product pages may shift when product images lack dimensions. News pages may move when advertising slots appear late. Landing pages can also suffer when banners appear without reserved space. Consent notices and form elements can cause similar problems.

Evaluation should cover laboratory testing and real-user data. Performance can vary by device, connection, browser, and location. Developers usually investigate the largest shifting elements first. They then reserve dimensions, stabilise fonts, and control dynamic insertion. Repeating tests after each change helps confirm the fix improves the page. It also helps prevent a new mobile usability problem.