Cumulative Layout Shift (CLS) is a website performance metric that measures the amount of unexpected shifts of elements on a page. CLS is part of Google's Core Web Vitals initiative, which aims to provide uniform guidelines for web developers to provide a better user experience.
CLS measures how much the page layout changes unexpectedly as elements load and as users browse the page. Page shifts occur when page content loads at different speeds, causing page elements to shift. The greater the number of offsets, the lower the CLS value.
To optimize the value of CLS, web developers should follow Google's guidelines, such as avoiding dynamic page elements such as ads that can move page elements during loading. Page developers should also prevent delays in loading page elements such as images that can affect the CLS value.
Causes of Cumulative Layout Shift
Visual Resources
One of the causes of CLS is visual assets such as images, videos, fonts, and other graphics. When these elements are loaded, they can shift the position of other elements on the page, which causes CLS. To avoid this problem, you should optimize your visual assets and use appropriate sizes.
Dynamic Ads
Another cause of CLS is dynamic ads, which can shift the position of elements on the page as they are loaded. Ads often have different sizes and may change while loading, which causes CLS. To avoid this problem, use fixed ad sizes or use technologies such as lazy loading.
Elements Loaded Asynchronously
Asynchronously loaded items, such as JavaScript scripts, can also cause CLS. When these elements are loaded, they can shift the position of other elements on the page, which causes CLS. To avoid this problem, use technologies such as defer or async to control the loading time of elements.
Measuring Cumulative Layout Shift
To accurately measure CLS, Google suggests using the PageSpeed Insights tool. This tool allows you to thoroughly examine the website in terms of CLS and other performance indicators. It is worth noting that the CLS score depends on many factors, such as how long the elements take to load, their size and the way they are displayed.
It is also worth noting that CLS is measured over a specific time period. Google suggests that the CLS on a website should be less than 0.1. This means that elements on the page should not unexpectedly move more than 100 pixels while the page is loading.
Cumulative Layout Shift Optimization
Stable Elements
One way to reduce CLS is to ensure that the elements on your page are stable. These elements include ads, videos, images, and other DOM elements. To minimize the impact of these elements on the CLS, ensure that they have a fixed width and height. You can also use the loading="lazy" attribute to delay the loading of images and other elements that are not initially visible.
Image and Ad Optimization
Images and advertisements are common causes of CLS. To minimize the impact of these elements on the CLS, care must be taken to optimize their size. This can be done by reducing the image file size or using the WebP format, which is more efficient than JPEG or PNG. Ads should load asynchronously so as not to impact the loading of other elements on the page.
Font Management
Often fonts are the cause of CLS. To avoid this problem, you need to optimize your fonts. They should be loaded asynchronously so as not to affect the loading of other elements on the page. You can also use a font system to minimize the number of fonts that need to be downloaded.
Tools for CLS Diagnosis
Google PageSpeed Insights
One of the most popular tools for diagnosing CLS is Google PageSpeed Insights. This tool offers detailed website analysis and highlights potential issues that may affect your CLS score. The report provides information about which page elements cause the layout to shift and what their sizes are.
Lighthouse
Lighthouse is another tool that Google offers. It is a website analysis tool that helps identify performance issues. In the case of CLS, this tool highlights elements that are causing the system to shift and suggests ways to fix the problems.
WebPageTest
WebPageTest is a tool that offers website performance analysis from various points of view. This tool allows you to test your website from different locations and on different devices. In the case of CLS, this tool highlights elements that cause the system to shift and suggests ways to solve the problems.
All of the above tools offer detailed reports on your CLS score and suggest ways to improve it. These can help you identify system offset issues and take appropriate steps to resolve them.
Best Practices
To optimize your CLS, there are a few best practices you should follow. Here are a few of them:
- Reserve space - Page elements should have space reserved even if they are not yet ready to be displayed. This way the browser knows how much space each element will take up, reducing the risk of layout shifts.
- Avoid dynamic elements - Dynamic elements such as ads can cause layout shifts. To avoid this problem, make sure that these elements have space reserved and do not change size when the page is loaded.
- Optimize images - Images are a common source of layout shifts. To avoid this problem, optimize your images to make them smaller and load faster.
- Use preloaders - Preloaders allow you to load resources before the page is displayed. Thanks to this, the browser knows what resources will be needed to display the page and can reserve space for them.
- Test your site - To make sure your site is optimized for CLS, you need to test it. This can be done using tools such as Google PageSpeed Insights or LoadFocus.
Frequently Asked Questions
What factors influence Cumulative Layout Shift?
There are many factors that influence Cumulative Layout Shift (CLS) on a website. One of the main factors is the delay in loading page elements such as images and scripts. Another factor is the lack of a specific height and width for elements such as images and ads.
How can you measure CLS on a website?
CLS can be measured using website performance analysis tools such as Lighthouse, PageSpeed Insights or WebPageTest. These tools provide detailed CLS performance reports that you can use to evaluate your site's performance.
Why is low CLS important for website users?
Low CLS is important to website users because it affects the user's experience when browsing the website. A high CLS can cause unexpected element shifts, which can lead to dissatisfied users and discourage them from returning to the site.
What are best practices to minimize CLS?
To minimize CLS, you should follow best website design practices, such as specifying height and width for elements such as images and ads, avoiding blocking page rendering, and minimizing the use of scripts and other resources that can impact page performance.
What changes in the website layout most often contribute to high CLS?
The most common changes to page layout that contribute to high CLS are changes to the height of elements such as images and ads, and late loading of scripts and other assets. You should pay attention to these elements and adjust your website design to minimize the impact on CLS.
Adam Naworski
