Improve Cumulative Layout Shift: How to Ensure a Stable Website Layout
Tim Fischer9/22/2023
Here you will find out what is responsible for the juddering of your website and how you can optimize CLS.
Table of contents
- What does Cumulative Layout Shift (CLS) mean?
- How does a Cumulative Layout Shift happen?
- How is the Cumulative Layout Shift calculated?
- How does the Cumulative Layout Shift affect the ranking?
- Optimize Cumulative Layout Shift: 5 Tips
- Which tools are suitable?
- With a high CLS score to a stable website
Has it ever happened to you that you were reading an article on a website and the text suddenly shifted without you clicking anything? Or were you about to click on a link that moved completely unexpectedly, so you ended up clicking on something else?
The page is neither bewitched nor is it a bug. Instead, the layout shifts when the page loads, which is referred to as Cumulative Layout Shift (CLS). We'll reveal in this article how CLS affects the usability of your website and your ranking, and how you can measure and optimize your CLS score.
What does Cumulative Layout Shift (CLS) mean?
Cumulative Layout Shift or CLS refers to sudden movements of a website layout. A layout shift occurs when an element in the viewport moves away from its original position during page loading. These elements are referred to as unstable elements.
Example: You're trying to read a blog post and suddenly an ad appears between the paragraphs. This causes the text blocks to shift downwards. This is disruptive for website visitors as their reading flow is interrupted and they lose time.
CLS is part of Google's Core Web Vitals. These also include First Input Delay (time it takes for a page to become interactive or "clickable") and Largest Contentful Paint (time it takes to load the largest content). Google uses these metrics for indexing websites.
How does a Cumulative Layout Shift happen?
If content is loaded at different speeds, shifts in the layout can occur, making the user see something different. If, for example, an advertising banner is loaded after the website has already been loaded, the content shifts and falls outside the viewer's field of view. In addition to slow-loading ads, dynamically added DOM elements and images, as well as videos of unknown size are possible triggers for CLS.
The challenge is to determine which users are actually affected by a CLS. After all, this depends on the device and environment. Personalized web content based on cookies behaves differently for each visitor. In addition, users on mobile devices can have a completely different experience.
How is the Cumulative Layout Shift calculated?
CLS is the sum of all movements of a page layout that are not caused by user interaction. The Google bots come to this metric by an equation that relates the proportion of the display window that is affected by these layout changes and the distance in which these elements are moved.
You don't have to measure the Cumulative Layout Shift yourself, as you can also monitor the metric using Google's PageSpeed Insights tool.
Here's how you do it:
- Enter your website URL into the PageSpeed Insights tool.
- Click on "Analyze".
- Like in our example, a window then appears showing the score of the Core Web Vitals, including the CLS.
- The lower the score, the more stable your layout is. To provide a satisfactory user experience, it is recommended that websites have a CLS value of less than 0.1.
- You can display the results for both computer and mobile devices.
In addition, you can determine your CLS score with the Chrome CrUX report.
How does the Cumulative Layout Shift affect the ranking?
If your website is constantly bouncing back and forth, the user-friendliness suffers enormously – this may cause your users to click the wrong option, miss parts of your web presence, and leave your website prematurely. The problem is also exacerbated by the high number of mobile internet users. Jumps and shifts in the layout are particularly noticeable on small screens. And if the website visitors' experience suffers, this does not go unnoticed in your ranking.
Google ranks websites based on their page performance, where better user experience results in higher ranking. If your website does not meet Google's Core Web Vitals guidelines, which also includes CLS, your website will be downgraded. However, the quality and relevance of your website content are even more important factors for the placement.
Pages with high-quality posts that hit the nerve of the target group can also achieve a high ranking if they do not score in all Core Web Vitals. In an ideal world, both should be achieved: providing highly relevant content and constantly optimizing the user experience.
Optimize Cumulative Layout Shift: 5 Tips
1. Use a CMS
A Content Management System helps you consider the Best Practices of website optimization. Choose a CMS that is compatible with popular analytics tools and keep an eye on your CLS score.
2. Pay attention to how ads affect the layout
New content should be loaded below the viewport. If, on the other hand, they are loaded above the user's view, the layout often shifts. Tools like Google Publisher Tag give you detailed instructions on how you should manage the space for ads.
3. Specify the dimensions of your images and videos
Cumulative Layout Shifts are often caused by images whose height and width have not been specified. When rendering the page, the browser then waits until the image is fully loaded and only then recognizes the dimensions of the image. The solution is to always specify the height and width of images and videos when uploading them. Based on these tributes, the browser knows how much space to reserve before the image is loaded.
4. Avoid dynamic content above existing content
As far as possible, dynamic content should not be placed above the existing content. This applies especially to the above-the-fold area of the page. However, if it can't be helped, you should provide enough space. Or you make it so that the dynamic content is only executed by user interactions.
5. Reduce the image size
Images usually make up the largest part of the bytes transferred on a website and can therefore directly affect the page load time. To avoid delays in loading the image files, the image size should correspond to the space they should occupy on the respective page.
Which tools are suitable?
The mixture does it – to improve your CLS score and also master the other Core Web Vitals from Google, you should rely on a mix of SEO tools, web analytics software and website monitoring tools. Here you can find an overview of the best programs:
Seobility
Performance Suite
Screaming Frog SEO Spider
Sistrix
Google Analytics
Hotjar
Tracify
Google Search Console
Looker StudioWith a high CLS score to a stable website
Cumulative Layout Shift (CLS) is one of the three Core Web Vitals metrics that Google uses to measure page experience. It describes the visual stability of a website as it loads. Thus, it happens again and again that certain website elements move and the entire layout shifts as a result. Users then click on the wrong links or their reading flow is interrupted, which has a negative effect on the UX. You can easily track your CLS score through Google's PageSpeed Insights tool.
The main causes of a Cumulative Layout Shift include unspecified dimensions for images, videos and ads, as well as unstable web fonts and dynamic content. To combat this, you should specify the dimensions of your images and generally reduce the image size. In addition, you should pay special attention to the placement of your ads and not place dynamic content above existing content.
Author
Tim Fischer
Tim ist seit über sechs Jahren als freiberuflicher Journalist und SEO-Autor tätig und schreibt unter anderem für OMR und Netzwelt. Sein Schwerpunkt liegt dabei auf Themengebieten wie Marketing, B2B-Software sowie Consumer-Tech, die er praxisnah und suchmaschinenoptimiert aufbereitet. Damit vermittelt er Leser*innen Orientierung im digitalen Markt und unterstützt sie dabei, die richtigen Tools und Plattformen auszuwählen.
