Cumulative Layout Shift, often abbreviated as CLS, is a metric that measures the visual instability of a web page during loading. It indicates how much interface elements shift unexpectedly while the user is reading or about to interact with them. A low CLS value signals a stable page where content stays in place; a high value indicates that images, banners, or text blocks jump from one position to another, forcing the person to constantly reorient themselves.
This metric was introduced by Google as one of the three main parameters of Core Web Vitals, along with Largest Contentful Paint and First Input Delay, which was later replaced by Interaction to Next Paint. Cumulative Layout Shift is therefore relevant both for the browsing experience and for assessing the overall quality of a site. Since sudden shifts cause frustration and misclicks, reducing CLS has become a concrete goal for developers and search engine optimization specialists.
What really counts in measured shifts
Cumulative Layout Shift quantifies unexpected shifts of visible elements within the viewport, that is, the area of the page actually shown on screen. The metric does not consider position changes caused by a voluntary user action, such as opening a menu or clicking a button: in those cases the shift is expected and is not penalized. Instead, it counts movements that occur without the person doing anything, for example when an image without defined dimensions loads and pushes the text below it downward.
The score comes from the product of two factors: the impact, i.e., the portion of the screen affected by the shift, and the distance, i.e., how far the elements moved from their initial position. The final value for a page is the sum of the scores of individual shifts detected during the entire visit, not just during initial loading. For this reason, even late changes, such as inserting an alert or an advertising banner, can significantly affect the overall result.
Where unexpected shifts come from
The reasons behind a high Cumulative Layout Shift are generally attributable to resources that take up space only after being loaded, or to content inserted dynamically into the page. Knowing these causes is the first step to making targeted and lasting corrections.
Images and videos without declared dimensions
When an image or video does not have declared width and height attributes, the browser does not know in advance how much space to reserve. Consequently, when loading, the content appears suddenly and shifts everything below it. Defining proportions in advance allows the rendering engine to allocate the correct space before the file is even downloaded.
Ad spaces and embedded content
Ad spaces and content embedded from external platforms are one of the most frequent sources of shifts. If the container does not have a reserved minimum size, the ad can appear and change the layout. Custom fonts can also contribute, when text is initially displayed with a fallback font and then redrawn with the final one, changing line dimensions.
How each shift is scored
The calculation of Cumulative Layout Shift is based on analyzing the movements of visible elements and their extent. Each shift receives a score proportional to the area involved and the distance traveled; higher values are obtained when a large element moves a lot. The metric is collected both during loading and during interaction, so as to capture the real user experience and not just the initial phase.
Thresholds for interpreting values
Guidelines indicate a value below 0.1 as good, a value between 0.1 and 0.25 as needs improvement, and a value above 0.25 as poor. These thresholds help quickly interpret data collected by measurement tools, which distinguish between lab data and field data from real users.
CLS, LCP, and INP: what each metric measures
To better understand the role of Cumulative Layout Shift, it is useful to compare it with the other metrics that describe loading and interaction experience. The following table summarizes the main differences.
| Metric | What it observes | Unit of measure | Recommended target |
|---|---|---|---|
| Cumulative Layout Shift | Visual stability and unexpected shifts | Dimensionless score | Below 0.1 |
| Largest Contentful Paint | Time to display the largest element | Seconds | Within 2.5 seconds |
| Interaction to Next Paint | Responsiveness to user interactions | Milliseconds | Below 200 milliseconds |
| First Contentful Paint | Appearance of the first visible content | Seconds | Within 1.8 seconds |
| Time to First Byte | Initial server response time | Milliseconds | Below 800 milliseconds |
Reserve space before loading
Strategies to contain CLS revolve around a simple principle: reserve space before content is actually loaded. Applying these practices systematically leads to more stable and predictable pages, with tangible benefits for both users and search engine visibility.
- Always declare width and height for images and videos, or use fixed aspect ratios via stylesheets.
- Reserve a minimum space for ads and third-party embedded content.
- Avoid inserting dynamic content in the upper part of the page, above already visible content.
- Load fonts in a way that reduces text redrawing, preferring formats and strategies that limit metric changes.
- Do not use animations that modify properties like margins, spacing, or positioning; prefer transformations that do not alter layout.
- Handle alerts, consent banners, and notifications carefully, as they often appear after the first render.
- Regularly check pages with performance analysis tools, both in the lab and with real user data.
- Test behavior on different devices and connection speeds, since shifts vary with network conditions.
Frequently asked questions about Cumulative Layout Shift
What does Cumulative Layout Shift mean?
It is a metric that measures how much elements on a page shift unexpectedly during loading and use. A low value indicates a stable and pleasant page to browse.
What is a good CLS score?
A value below 0.1 is considered good, while values above 0.25 are judged poor. The intermediate threshold indicates performance that needs improvement.
Does Cumulative Layout Shift affect search engine ranking?
CLS is part of Core Web Vitals, which search engines use as a signal of experience quality. A high value can therefore indirectly affect the page’s evaluation.
How do you reduce Cumulative Layout Shift?
You need to reserve space in advance for images, ads, and embedded content, avoiding dynamic insertions in the upper part of the page. Font management also plays an important role.
Does Cumulative Layout Shift apply to mobile devices too?
Yes, the metric is detected on all device types and based on network conditions. On small screens, shifts can be even more annoying for the user.
Which tools can measure CLS?
There are performance analysis tools that provide lab data and field data. The former simulate loading, the latter collect measurements from real visits.
Have doubts about CLS?Does your site suffer from unwanted shifts during loading?Cumulative Layout Shift affects user experience and ranking. Contact me for targeted consulting.Talk to an expert
Related entries:
Cls core web vitals Core Web Vitals Largest Contentful Paint Total Blocking Time