Are you having trouble keeping your website visually stable? Cumulative Layout Shift (CLS) is an important issue to consider when designing a website. In this article, we’ll look at how to diagnose CLS, the causes, and solutions for tackling the problem. We’ll discuss third-party scripts, measuring CLS, content reflow, optimising images, and tracking CLS. Let’s get started!
Key Takeaways
- CLS is a metric used to measure unexpected layout shifts on a website, affecting visual stability and user experience.
- CLS score is calculated by measuring the distance between elements before and after layout updates, and Google uses it for website rankings.
- Diagnosing CLS issues involves creating a log of layout shifts, measuring CLS severity with metrics like TBT and CLS Score, and using automated testing tools.
- Causes of CLS include asynchronous loading of images and resources, ads and scripts with asynchronous loading, dynamically injected content, and large fonts without specified sizes.
What Is CLS
You may have heard of Cumulative Layout Shift (CLS), but do you know what it is? CLS is a metric used to measure the amount of unexpected layout shifts on a website. It is a measure of user experience stability, and can be an indicator of how visually stable a website is. In other words, it measures how often the content of a website moves around while users are navigating it.
The CLS score is calculated by measuring the distance between elements on the page before and after the browser’s layout has been updated. If the layout changes significantly, the score increases. If the layout remains relatively stable, the score decreases. The higher the score, the more likely the user is to experience a poor experience due to unexpected layout shifts.
Google uses the CLS score to measure the quality of a website’s user experience. They use it to determine the ranking of a website in their search engine results. Websites with higher CLS scores will have lower rankings, and websites with lower CLS scores will have higher rankings.
To improve the CLS score of a website, developers need to ensure that the content of the page does not move around when a user interacts with it. They should also look for any potential causes of unexpected layout shifts and address them. This could involve optimising images, using appropriate HTML elements, and avoiding large page elements.
Diagnosing CLS
Once you’ve identified potential causes of unexpected layout shifts, you’ll need to diagnose CLS to measure the impact. CLS diagnosis is a two-step process: first, you’ll need to identify areas of your website where shifts occur, then you’ll need to measure how much and how often they occur. Here are a few ways to do this:
- Create a log of layout shifts: You can use the Chrome DevTools console to log all unexpected layout shifts on a page. This will give you a better understanding of how CLOSE is impacting user experience.
- Use metrics to measure CLS: You can use metrics like Total Blocking Time (TBT) and Cumulative Layout Shift Score (CLS Score) to measure the severity of CLS on a given page.
- Use an automated testing tool: Automated testing tools like PageSpeed Insights can help you identify CLS issues and provide recommendations on how to fix them.
Once you have a better understanding of the areas of your website that are affected by CLS, you can start to make improvements. You can reduce or eliminate unexpected layout shifts by optimising images, using a placeholder element, or using a resize observer to track changes in the DOM.
CLS Causes
Building on from the diagnosis of CLS, let’s look at the possible causes of unexpected layout shifts on your website. One of the most common causes is due to images or other resources being loaded asynchronously. When images and other resources load asynchronously, the layout of the page is constantly shifting. This can be exacerbated if the images or resources are not loaded in the same order as they appear on the page. Additionally, ads, scripts, and embeds can also cause unexpected layout shifts due to their asynchronous loading.
Another cause of CLS is when content is dynamically injected into the page. This happens when content is added to the page after it initially loads. When this happens, the layout of the page shifts, resulting in a poor user experience. Dynamic content can also cause unexpected shifts when the page is resized.
Using large fonts, such as those typically used for headings, can also cause CLS. If the font size is not specified, the browser may use a different font size than the one you intended, resulting in unexpected shifts in the layout.
Finally, the use of grids and media queries can also cause CLS. When your page is viewed on different devices, the layout can shift due to the use of grids and media queries. If the grid is not correctly configured, the page can shift and cause CLS.
To ensure visual stability on your website, it is important to be aware of the possible causes of CLS. By understanding the causes, you can take steps to prevent unexpected layout shifts and maintain a good user experience.
CLS Solutions
Now that we know the causes of CLS, how can we solve them? Thankfully, there are several steps website developers and designers can take to reduce and even eliminate CLS. First, code should be written with the idea of visual stability in mind. This means using techniques like avoiding large layout shifts, sizing elements correctly, and using image dimensions.
Second, developers can reduce the amount of time it takes for a page to load by optimising images, minifying code, and using a content delivery network (CDN). This will help reduce CLS by ensuring the page content loads as quickly as possible.
Third, websites should be tested for CLS and other performance metrics regularly. This will help identify any issues that may be causing layout shifts and allow developers to make the necessary changes.
These are just a few of the steps website developers and designers can take to reduce and eliminate CLS. By following these simple guidelines, webmasters can create visually stable websites that make it easy for visitors to find what they are looking for.
Third-Party Scripts
Another factor that can contribute to CLS is the use of third-party scripts. These are scripts that are not hosted on your website, but instead come from external sources, such as content delivery networks or third-party analytics services. While these scripts can offer many benefits, they can also cause CLS if they are not managed properly.
To prevent third-party scripts from causing CLS, it is important to use asynchronous loading. Asynchronous loading ensures that the loading of the external script does not block the loading and rendering of the rest of the page. This means that the page and its content will load as soon as possible, reducing the chances of CLS.
It is also important to ensure that any third-party scripts you use do not modify the page layout. For example, if you are using a third-party analytics service, it should not inject HTML or JavaScript code into the page that would cause the layout to shift.
Another way to reduce the chances of CLS due to third-party scripts is to use resource hints. Resource hints tell the browser what resources it should prioritise when loading a page. This can help prevent third-party scripts from taking too long to load and blocking the rest of the page from loading.
Finally, you should also consider using a content delivery network (CDN) for third-party scripts. A CDN is a network of servers that can serve content quickly and reliably, helping to reduce the latency of third-party scripts.
Measuring CLS
Having addressed the issue of third-party scripts, it’s time to turn our attention to measuring CLS. Measuring Cumulative Layout Shift (CLS) is an important step in tackling this issue. CLS is a metric that measures visual stability on a website, and is based on the amount of unexpected layout shifts that occur. Here are the three key things to keep in mind when measuring CLS:
- Core Web Vitals – Core Web Vitals are a set of metrics that measure user experience on the web. Among these is CLS, which is a measure of visual stability.
- Lab vs Field – Lab tests measure CLS in a controlled environment, while field tests measure CLS in the real world. Both are important for getting a complete picture of the CLS score.
- Page Speed Insights – Page Speed Insights is a Google tool that measures page performance. It also includes a metric for CLS, allowing you to track your website’s visual stability over time.
Content Reflow
Once you have an understanding of CLS and how to measure it, the next step is to look at content reflow. This is an important process in tackling CLS, as it involves shifting content from one position to another, without disrupting the user experience. Content reflow can be done in two ways: by changing the order of elements on the page, and by using responsive design to adjust the layout based on the device size.
For example, when content is shifted from one position to another, it can help create visual stability on the page. This can be done by shifting the position of the elements on the page, or by changing the size of the elements so that they fit better with the layout. For responsive design, it’s important to make sure that the elements on the page are adjusted to the device size, so that the user experience is unaffected.
It’s also important to think about how to manage the content on the page as it shifts. This means making sure that the content is still easy to find and use, and that the user doesn’t have to scroll to find what they are looking for. It’s also important to consider how the content is laid out, and how it fits into the overall design of the page.
Content reflow can also help reduce some of the issues that can occur with CLS, such as page jumps or unexpected movement. By making sure that the content is laid out in a way that is easy to understand, it can help reduce the amount of shifts that occur. This will help to ensure that the user is able to find the content they are looking for, without having to jump around the page.
Optimising Images
Building on our previous discussion of content reflow, another way to ensure visual stability on your website is by optimising images. Optimising images involves making sure they are of the right file size, resolution, and format. To ensure visual stability, here are a few key points to keep in mind:
- File Size: Make sure images are not too large. Too large of a file size can cause slow loading times and affect the overall user experience.
- Resolution: Images should be optimised for the device they are being viewed on. For example, if the image is being viewed on a mobile device, it should be optimised to the smaller size.
- Format: Images should be in the correct format. For example, if the image is a photograph, it should be a JPEG. If the image is a logo or vector image, it should be a PNG.
Tracking CLS
Now that we’ve optimised our images for visual stability, the next step is to track our CLS to ensure that it is not increasing. CLS is a metric that measures the amount of visual instability caused by elements that move on a page, such as images, ads, and videos. Tracking CLS helps you to identify where layout shifts are occurring, allowing you to address them quickly and efficiently.
The best way to track CLS is to use PageSpeed Insights, a tool created by Google. It allows you to analyse the performance of your website and provides detailed information about the CLS score of a page. You can also use Chrome’s Developer Tools to view the Layout Shift score of your page.
Another way to track CLS is to use web analytics tools such as Google Analytics or Hotjar. These tools provide insights into user behaviour and can help you identify where layout shifts occur. You can also use a third-party tool such as Calibre to measure the impact of CLS on user experience.
Finally, you can use a tool such as WebPageTest to measure the CLS score of your website. This tool allows you to run tests on different browsers and devices and provides detailed reports about the CLS score.
Tracking CLS is an important step in ensuring visual stability on your website. By using the tools mentioned above, you can identify potential issues and address them quickly and efficiently. This will help you ensure the best possible user experience for your visitors.
Conclusion
You’ve now learned about CLS, how to diagnose it, and the various causes and solutions for it. Third-party scripts, content reflow, optimising images and tracking CLS are the best ways to ensure CLS is kept to a minimum. Doing so will help you maintain visual stability on your website and ensure that your users have the best experience possible. Don’t forget that CLS is an ongoing effort, so keep an eye out for any changes that could affect your website.
