Do you want to optimize your website for optimal loading speed and pass the Core Web Vitals test? In this article, we’ll show you how to improve the Cumulative Layout Shift (CLS) metric within Core Web Vitals.
With the introduction of new performance and UX metrics, Google has devised a very ingenious way of testing web properties: using real-time data.
More specifically, Google uses data stored in saved cookies that monitor various elements such as accessed pages, loading times, loading percentages, and which resources are the hardest to load.
Additionally, cache-type cookies save pieces of the page to be preloaded on the next visit. This is why a site may seem to load faster when accessed for the second or third time.
So, you might be wondering what the CLS metric is, what it does, how it is influenced by developers’ actions, or how it can be improved to obtain a passing score according to Google’s performance standards.
What is CLS?
Cumulative Layout Shift (CLS) is an important metric that is part of Core Web Vitals used to measure visual stability, helping quantify how users experience unexpected layout shifts. A low CLS value ensures a better user experience. CLS measures the layout changes that occur on a page after its initial display in the browser, usually due to dynamically inserted content that appears over what is already displayed.
In short, CLS represents how much a page undergoes content changes and how much fragmentation exists for a specific page. To fully understand what CLS is, I’ll use a real-life example.
You go online intending to read an article on a topic of interest to you. You access Google, search using keywords, and find the desired article. You click on it and start reading. After a minute or two, when you’ve probably reached a third of the article, the accessed page finishes loading all resources and images, causing you the unpleasant experience of losing track because the displayed content on the page was fragmented by other elements and moved according to the alignment preset by the developer.
Specifically, the text and various smaller visual elements loaded faster, while images or photo/video ads did not. Once loaded from the server, they are displayed in their designated spots. Thus, the text and other elements are „moved” to make room for these larger elements, causing the fragmentation mentioned earlier.
Google says the following about CLS:
“Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful.”
How does CLS affect the user experience?
When a page has issues related to CLS, there will be constant interruptions and fragmentations until the page is fully loaded. This aspect is annoying for users and is reflected in the site’s usage statistics.
Unexpected display changes on the page affect the user experience. Another good example is the following: you want to click a button, and the page loads a piece of dynamically inserted content. This „small insertion” can cause a serious problem if you intend to click the NO button but end up clicking the YES button. This example is also used in the following demo from Google:
Example of layout shift – Google Developers
The distance fraction in this case is the distance that the unstable element has undergone. In the example used, the element was moved by 25% of the „height” or the height of the viewport. In summary, Cumulative Layout Shift is measured using a score that is calculated as follows: Fraction of impact x Fraction of distance = Layout Shift Score
Using the same example as above, the calculation would look like this: 0.75 x 0.25 = 0.1875 Google has set the CLS score standard for all pages to be less than 0.1 for all pages of a site.
We conclude that the score obtained from the example above is above the limit imposed by Google and would result in a poor score.
Similar to this calculation, Google makes dozens of calculations for each unexpected layout shift that occurs throughout the lifetime of a web page. So the more elements you have that modify the content within the viewport, the lower the score will be.
What Impact Does CLS Have on Your SEO Strategy?
The essence of Core Web Vitals is to ensure a pleasant and uninterrupted experience on a web page for your website visitors—both on mobile and desktop.
A good CLS score can help assure Google that users will have a pleasant experience and won’t be frustrated when visiting your page. They won’t encounter moments where the site misbehaves, leading them to another page unintentionally, or make accidental orders.
A good user experience (UX) helps you achieve all desired outcomes from SEO: traffic, conversions, top positions on Google, and ultimately, revenue.
According to a study by Screaming Frog, URLs in the #1 position on Google were 10% more likely to get a PASS rating for Core Web Vitals compared to URLs in the #9 position. Of course, this study refers to existing web pages, which may not yet be updated to comply with Core Web Vitals standards.
Looking at the CLS results from Screaming Frog’s research, we see that less than half (46% of mobile links and 47% for desktop) have a “GOOD” score for the CLS metric. According to their calculations, the average score for CLS is 0.29 for mobile and 0.25 for desktop, indicating room for improvement until 2021 when Google will integrate and give more importance to Core Web Vitals.
From their table, we clearly see that the top positions are dominated by sites with positive scores for CWV metrics, especially CLS for this example.
