Title: Cumulative Layout Shift (CLS) Author: Kriko Published: Mar 8, 2021 Last modified: Jul 12, 2026 --- 1. [Home](https://kriko.io/) / 2. [Glossary](https://kriko.io/glossary) / 3. C Letter # Cumulative Layout Shift **(CLS)** **Cumulative Layout Shift**, commonly abbreviated as CLS, is a Core Web Vitals metric that measures the visual stability of a web page. Unexpected movement of visual elements while the page is loading or while the user is navigating the page can affect the CLS score. For example, if an ad, image, video or banner at the top of a page loads late while a user is reading an article, the text being read may suddenly move down. This is a typical example of a layout shift that negatively affects user experience. CLS is especially important when users are interacting with page content. Text moving down while reading a news article, a button changing position just before a user clicks on it on an e-commerce page, or form fields suddenly shifting while a user is filling them out can be frustrating. These shifts are not only visual issues; they can cause wrong clicks, interrupt the purchase process and lead users to leave the page. For this reason, CLS is a critical metric for user experience and page quality. Google evaluates CLS as one of the Core Web Vitals metrics. Core Web Vitals are used to measure key areas related to user experience, such as loading performance, interaction responsiveness and visual stability. CLS represents the visual stability part of this group. In other words, a page should not only load quickly; its layout should also remain stable while loading and during use. There are generally accepted thresholds for CLS scores. A CLS value of 0.1 or lower is considered good. Values between 0.1 and 0.25 are considered as needing improvement. CLS scores above 0.25 indicate a poor user experience. These values can be monitored through PageSpeed Insights, Lighthouse, Chrome User Experience Report and the Core Web Vitals report in Google Search Console. One of the most common causes of Cumulative Layout Shift is images and videos without defined dimensions. If the width and height values of an image are not specified, the browser may not reserve space for it in advance. When the image loads, other content on the page may move down or sideways. To reduce this issue, `width` and` height` values should be defined for images, or an appropriate aspect ratio space should be reserved with CSS. Ad areas, embedded content and iframe usage can also cause CLS problems. Especially on news websites, blogs and publisher sites with heavy ad usage, late-loading ad blocks can disrupt the page layout. If a fixed height is not reserved for ad areas, content may shift when the ad loads. Therefore, space should be reserved in advance for ads, videos, maps, social media embeds and similar dynamic areas. Late-loading fonts and dynamic content can also cause layout shifts. When web fonts load late, text appearance can change and line lengths may shift. Similarly, cookie banners, campaign pop-ups, notification areas or recommendation modules added later can push the existing page layout and increase CLS. These elements should be positioned in a way that does not disrupt the layout or create unexpected movement for the user. To improve CLS, the first step is to identify which elements are causing layout shifts. PageSpeed Insights and Lighthouse reports can provide an initial analysis. However, real user [data](https://kriko.io/services/data-analysis-insight) should also be monitored because some shifts caused by ads, devices, connection speed or user behaviour may not appear in lab tests but may occur in real user experience. For this reason, CLS analysis should be carried out using both lab [data](https://kriko.io/services/data-analysis-insight) and field data. In summary, **Cumulative Layout Shift** is an important user experience metric that measures how visually stable a web page remains. A low CLS score helps users read, navigate, click and complete actions more comfortably on the page. Defining image dimensions, reserving space for ads and iframe areas, optimising font loading and carefully managing dynamic content are key steps for improving CLS performance. ## Discover it in the dictionary ### Concurrency Concurrency is a computing approach in which the progress of multiple tasks is managed within the same period. These tasks do not necessarily have… ### Content Management System A Content Management System, commonly abbreviated as CMS, is a software system that allows users to create, edit, manage and publish website content without… ### Latent Semantic Indexing (LSI) Latent Semantic Indexing, commonly abbreviated as LSI, is an older information retrieval method used to analyse relationships between texts and concepts. In SEO literature,… ### Correlation Analysis Correlation analysis is a statistical method used to measure the direction and strength of the relationship between two or more variables. It helps determine… ### Secure Sockets Layer (SSL) SSL stands for Secure Sockets Layer. It is an older security protocol that enables an encrypted connection between a browser and a web server.… ### Pareto Principle (80/20 Rule) The Pareto Principle, also known as the 80/20 rule, is an observation and prioritization approach suggesting that a large share of outcomes often comes… ### Unique Visitor A unique visitor is a web analytics metric that refers to different users who visit a website within a specific time period. The purpose… ### Frequently Asked Questions (FAQ) Frequently Asked Questions, commonly abbreviated as FAQ, refers to a content section where the most common questions about a product, service, process or website… ### Sitemap A sitemap is a file or page structure created to help search engines discover the important pages of a website more easily. In an… ## Track the digital heartbeat with Kriko Subscribe to receive curated insights, news, and ideas shaping the digital landscape. By checking this box, you acknowledge and accept our [privacy policy](https://kriko.io/privacy-policy).