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 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 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 ### Machine Learning Machine learning, commonly abbreviated as ML, is a field of artificial intelligence that enables computer systems to learn patterns from data, generate predictions and… ### Google Dance Google Dance is a term used in the SEO industry to describe fluctuations in Google search rankings during certain periods. During these fluctuations, some… ### Algorithm An algorithm is a finite and organised sequence of steps used to solve a defined problem or complete a particular task. Algorithms are widely… ### Cost Per Lead Cost Per Lead, commonly abbreviated as CPL, is a digital marketing metric that shows how much it costs to generate one potential customer through… ### Data Cleansing Data cleansing, also known as data cleaning, is the process of identifying and correcting inaccurate, incomplete, irrelevant, duplicated or inconsistent information within a database.… ### Time to First Byte (TTFB) Time to First Byte, commonly abbreviated as TTFB, refers to the time between a browser sending a request to a web server and receiving… ### URL Rewriting URL rewriting is a technique used to make web addresses more understandable for users, search engines or application architecture. Every web address entered into… ### White hat SEO White hat SEO refers to search engine optimization practices that follow search engine guidelines, focus on users and aim for sustainable organic visibility. The… ### R Programming Language R is an open-source programming language and software environment widely used for statistical computing, data analysis and graphics. It was initially developed in the… ## 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).