Cumulative Layout Shift, or CLS, is one of three metrics, along with Largest Contentful Paint (LCP) and First Input Delay (FID), that make up the Core Web Vitals metrics. Standardized and released by Google in 2020, these standardized metrics allow developers to understand how their websites perform, in terms of responsiveness, speed, and stability. These metrics, along with other factors, are what help determine how a website will rank in terms of SEO (Search Engine Optimization). In fact, Cumulative Layout Shift became a ranking factor, albeit a minor factor, in mid to late 2021 as part of the latest Google Page Experience update. However, in terms of the Lighthouse Performance score, the Cumulative Layout Shift accounts for 15 percent of the total score.
The Cumulative Layout Shift measures the unexpected shift in content as a web page loads. This could be text, buttons, fonts, forms, or anything else that moves unexpectedly during the page load process. It is also important to note that Cumulative Layout Shift does not consider shifts that are expected to happen, such as an icon that expands to show an input field, for example, as these are layout shifts that are caused by the user interacting with them.
If you have ever visited a web page and clicked on a button, only for it to shift to a different spot, resulting in you clicking on something you did not intend to click on, then you have been a victim of a content layout shift. These experiences can be frustrating, especially if you are trying to search for something or finding out you mistakenly added something into your shopping cart that you did not intend to buy. For users, if the content shift is distracting enough, this can be a quick reason they bounce from your site, especially if they are on a mobile device, as these shifts can be more pronounced within a smaller viewport.