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.
Compared to the other factors, like Largest Contentful Paint and First Input Delay, Cumulative Layout Shift is the only metric that considers the entire page. The Largest Contentful Paint and First Input Delay are only measured after some of the initial page content is loaded and does not go any further. The Cumulative Layout Shift can be caused by many reasons, such as images or videos on your page that have undefined dimensions, advertisements, dynamic content, web fonts, or other embedded content that does not have defined dimensions. However, Cumulative Layout Shift is an evolving metric. For example, pages that were built as single-page applications (SPAs) or for applications that infinitely scroll, these types of applications would see more Cumulative Layout Shift as the user navigates through the application. However, with the latest updates in 2021, the Cumulative Layout Shift is only concerned with the most extreme shifts, so Lighthouse only reports on those shifts, which provides a more consistent measurement regardless of the duration of the user’s session. By putting the focus on measuring only the most extreme shifts, web developers can focus on optimizing the content shifts that affect the user experience the most.
There are a couple of factors that are considered during a Lighthouse test that make up the overall CLS score, which are impact fraction and distance fraction. Impact fraction takes into consideration how the unstable elements affect the viewport between two frames. The impact fraction measures how much space, within the viewport, unstable content takes up compared to when it first renders versus when it finally renders in its final location. The second factor, distance fraction, is the distance that the content has moved, horizontally or vertically, from where it was originally rendered to its final location. Finally, these two factors are multiplied to find the Cumulative Layout Shift. So, for example, if your impact fraction is .25 and your distance fraction was .25, the Cumulative Layout Shift score would be .0625. A good Cumulative Layout Shift score is anything under 0.1. A Cumulative Layout Shift score of .25 or greater is considered poor and requires some optimizations. The higher the score, the likelihood that users are experiencing a less than optimal web page experience.
The Cumulative Layout Shift can be improved by implementing some of the best practices during the application development process. For example, some of the causes that we outlined above may go unnoticed as these elements may be cached in the browser. As development teams continually review how these assets are rendered in the browser, the layout shifts of the images, fonts, text, and other content that would normally happen, would no longer occur as they have been downloaded to the browser. While caching does solve some of these performance issues after the initial visit, that does not prevent them from happening to new visitors or users. Part of ensuring that they do not happen at all is to resolve these issues in development.
Once your applications or pages get put into production, it can be time-consuming to pinpoint the exact cause of these layout shifts. And from a user’s perspective, the longer these content shifts go unnoticed, the more visitors it will affect. While your visitors may be experiencing issues, they are never going to report it. They will simply move on or go somewhere else if they are having a bad user experience. On most web pages, images make up the bulk of the weight of a page, so improving your Cumulative Layout Shift starts with ensuring your images dimensions are defined appropriately, along with reserving appropriate space for ads, or rearranging where dynamic elements are placed on the page, such as below-the-fold, where they are less likely to interrupt a visitor’s experience.
