Google takes a lot of factors into consideration when ranking your website. One of the essential factors is Cumulative Layout Shift, or CLS for short. While some people may be hearing about the term for the first time, it is necessary to pay attention to the significance of CLS. Search engines use CLS as an essential indicator to assess the overall user experience of a web page, and it can significantly affect a website’s position in search engine rankings. There is so much to talk about. Let’s elaborate a little further!
What Is Cumulative Layout Shift?
Cumulative Layout Shift (CLS) is a term for measuring the time between the first click by an internet user to your website and the moment when your website is full. In other words, it is the time between clicking on a Google search result and the complete loading of the clicked web page.
Why Is Cumulative Layout Shift Essential?
CLS plays a vital role for any website owners, as Google uses this metric to examine the user experiences of web pages. It is clear that every visitor expects a consistent and seamless experience to navigate the website easily and quickly. In this case, a web page with a high CLS score can result in an unstable page layout where elements on the page move unexpectedly during loading or user interaction. Let’s give a simple example.
Assume you visit a website, and the title and content section appear almost immediately on the screen. However, let’s now assume there’s an image between the title and content, and you start reading the content even before the image loads. Once the image loads, the content will move downward, right? However, this creates a negative experience and undesirable effect on you. This can lead you to overlook the content and start scrolling again to look for it.
What Is The Optimal CLS Score?
After we’ve understood the importance of CLS, a hard question arises: What should your CLS score be?
Although no specific CLS score is universally regarded as ideal, a score of 0.1 or below is generally considered reasonable and meets the recommendations of Google’s Core Web Vitals. In contrast, a score exceeding 0.25 is generally undesirable and may have a negative impact on both the user experience you create and the search engine ranking of your website. Therefore, focusing on reducing your CLS score and consistently improving your website’s performance is essential.
What Causes a High CLS Score?
Different factors can cause a high CLS score on your website. Let’s list some of the well-known reasons!
Unoptimized Content
Unoptimized images and videos on your web pages can lead to unexpected layout shifts on the screen. This is due to the fact that these elements are loaded by the browser after other content, causing the page to move unexpectedly.
Dynamic Content
When dynamic content loads after the page’s initial load, it can result in a higher CLS score than expected. This occurs when adequate space for the content is not available, causing the content to shift and displace other elements on the page.
Ads and Embeds
The loading of ads after the initial page load can result in layout shifts. Typically, ad space is reserved on the page, and when the ad is loaded, it can push other elements and cause unexpected layout shifts.
Web-Based Fonts
The usage of custom fonts in your web page might result in delayed loading, leading to text shifts when they load finally.
Third-Party Scripts
If third-party scripts, like third-party analytics tools or social media widgets, are not optimized or load slowly, they can cause a high CLS score.
How to Measure CLS
You can use various web tools to measure Cumulative Layout Shifts. We want to examine three well-known tools you can use: Google’s PageSpeed Insights, Lighthouse, and WebPageTest. Let’s start with the first one!
Google PageSpeed Insights
Google PageSpeed Insights is a web performance analysis tool by Google that assesses website speed and user experience on both desktop and mobile devices. It analyzes metrics such as load time or CLS.
To measure your CLS, follow the steps below:
- Go to
- Type the URL of your website, and then click on the “Analyze” button.
- The score displayed at the top of the report represents the real-world experience of users visiting your site.
- As you scroll down the report, you’ll find the lab data section, which provides insights based on a simulated visit.
Google Lighthouse
Lighthouse is another valuable tool to analyze and measure your CLS scores. The tool offers a comprehensive performance analysis of your website, including CLS, and offers suggestions for improving your performance. Check how to use Lighthouse Report to optimize your page in detail.
To measure your CLS, here are the steps:
- Navigate to the web page you want to audit in your preferred web browser.
- Access the Developer Tools by right-clicking on the page and selecting “Inspect” or pressing F12 on the keyboard as a shortcut.
- In the Developer Tools window that appears, click on the “Lighthouse” tab at the top.
- Click the “Generate Report” button to run the audit on the current page.
- Once the Lighthouse analysis is complete, the report will display a range of performance metrics for the website, including the CLS score.
WebPageTest
WebPageTest provides detailed performance data, including page load time, Time to First Byte (TTFB), and CLS. The tool allows you to determine and correct issues that can result in a high CLS score.
To measure your CLS, follow these steps:
- Go to the WebPageTest website at www.webpagetest.org.
- Press on the “Test a Website” button.
- Type the URL of the website you want to test.
- Choose the desired browser and location to conduct the test.
- To activate video capture for the test, select the “Capture video” option in the “Advanced Settings” section.
- To initiate the test, select the “Start Test” option.
- After the test has concluded, select the “Details” link to access the test results.
- Check the “Layout Shifts” section within the test results to find the CLS score and other relevant metrics.
How Is CLS Calculated?
To calculate CLS, we should consider two components. (1) Impact fraction calculates the amount of screen space affected by the layout shift. (2) Distance fraction measures the amount of displacement an element has experienced. When we multiply (1) and (2), we will end up with your final CLS score. Let’s provide a basic example to clarify and simplify this concept.
Assume that you have a web page where the main text takes up 50% of the screen and an image takes up 30% of the screen. You also have a banner ad that takes up 20% of the screen. Unexpectedly, the banner ad disappears, and the main text and image increase by 15% of the screen. You should first calculate the impact fraction to calculate the CLS for this layout shift. We can sum up all percentages of screens impacted: 50% + 30% + 20% = 1.
Second, you should calculate the distance fraction. Divide the distance the impacted content moved on the screen: 15% / 100% = 0.15.
Now, all you need to do is multiply the two end scores above. CLS: 1 * 0.15 = 0.15. The value indicates your CLS score.
How to Resolve a CLS Issue
Once we’ve understood the impact of CLS on our Google search rankings, it is time to answer the question, “How can I improve my CLS score?” If you’re ready, take a deep breath, and keep reading!
Implement Aspect Ratios for Your Images
To avoid Cumulative Layout Shifts caused by images and videos, it’s essential to specify the width and height of the media using size attributes. When you do this, the browser will use the information to calculate a default aspect ratio, which will be applied at the beginning of the layout process.
Optimize Images and Videos
If you have images or videos on your website that are either too large or need to be optimized properly, they can result in unpredictable layout shifts that can negatively affect the user experience. To minimize this issue, you can compress these media files to reduce their size, which will help them load more quickly and efficiently.
When working with WordPress, image optimization plugins can help automatically resize your image files upon upload. This can simplify the process of setting the necessary width and height attributes, which are essential for minimizing the impact of images on the layout of your webpage.
Prioritize Above-the-Fold Content
It’s essential to prioritize the speed at which the content above the fold loads and displays. This is part of the webpage that is visible without scrolling, and you should optimize it to render quickly. When the content above the fold loads quickly, visitors can begin consuming or engaging with it immediately without any delay.
Reserve Space for Ad Slots
When you reserve a specific ad area on your webpage, you can help maintain a consistent and predictable layout, which greatly enhances the user experience. This is because ads will load within the designated area rather than potentially shifting other content and causing unexpected layout changes.
Use the Font-Display Property in CSS
When you customize the font-display values, you can determine how the web fonts on your webpage will appear as they load. This allows you to have a more significant influence over the user experience by choosing when and how the fonts are displayed. By adjusting these settings to fit your specific requirements, you can optimize the loading and rendering of web fonts and enhance the performance and appearance of your website.
Track and Analyze Your CLS Score Frequently
It is essential to periodically check and analyze it, using the results to identify the root causes of layout shifts on your website and take corrective action to address them. By regularly tracking your CLS score, you can gain insights into which elements of your website are causing layout shifts.
Understand Cumulative Layout Shift (CLS)
Today, we’ve talked about Cumulative Layout Shift and its importance. You should have a low CLS score as a website owner to provide a better user experience and get higher Google search results. This is because shifting images that need to be optimized appropriately may contribute to a high CLS score that harms your visitors’ experience of your website. If you have a high score, there could be several reasons for this. The reason may be unoptimized content, ads or embeds, web-based fonts, or third-party scripts like social media widgets. However, don’t panic; check our guide for ways to resolve a high CLS score. All you need to do is to reach a score of 0.1 or below, considered reasonable by the recommendations of Google’s Core Web Vitals.
