How To Optimise For Cumulative Layout Shift (CLS)
As the internet becomes increasingly important for businesses, website optimisation has become a key aspect of digital marketing. Cumulative Layout Shift (CLS) is a metric that measures the stability of a website’s layout during loading. A poor CLS score can impact user experience and even damage search engine rankings. Therefore, optimising for CLS is crucial for website owners. In this blog post, we will discuss how to optimise for Cumulative Layout Shift to ensure a smooth and stable user experience on your website.
What is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) is a performance metric that measures the visual stability of a web page while it loads. In simpler terms, it is a measure of how much the content of a web page moves or shifts while the page is loading. When a web page loads, various elements such as images, videos, ads, and fonts may shift on the page, causing the user’s experience to be disrupted. CLS calculates the amount of shift that occurs and assigns a score to the web page, with lower scores indicating better visual stability.
Why does it matter?
Cumulative Layout Shift is an essential metric as it measures how smoothly a web page loads and appears to the user. If a web page is unstable and shifts too much while loading, it creates an unpleasant user experience and can even lead to confusion or frustration, resulting in users leaving the site. This can ultimately harm the website’s engagement and conversion rates, leading to lower revenue. Additionally, Google uses CLS as a ranking factor for websites through the Core Web Vitals, highlighting the importance of optimising it for search engine optimisation (SEO) purposes. Therefore, optimising for CLS not only improves the user experience but also positively impacts website performance and SEO.
How to find the cause for CLS
To identify the CLS element on a web page, you can use the developer tools provided by your web browser. Open the developer tools and navigate to the “Performance” tab. From there, you can run a performance analysis of the web page and check the CLS value. You can also use various online tools such as Google’s PageSpeed Insights or to analyze and identify the CLS element.
How to optimise CLS
Now that you know what CLS is and how to identify it, let’s optimise it. Here are some key factors to consider when optimising the CLS score:
1. Size and Position of Images and Videos
One of the primary causes of shifting content is images and videos. Optimising their size and position on the page can significantly reduce the CLS score. Always specify the height and width of your media elements to ensure that the browser reserves space for them, eliminating any sudden layout shifts.
2. Font Loading
Fonts can also cause layout shifts, especially when they are not loaded correctly. Use font-display to define the loading strategy for your fonts, ensuring that the text remains visible while the font is being loaded. This will help to avoid noticeable layout shifts if your fonts are slow/late to load.
3. Ads and Third-party Scripts
Ads and third-party scripts are often large and may cause layout shifts. If possible, eliminate them or defer their loading until the page has loaded. You can also preload or preconnect these resources to reduce the chances of layout shifts.
4. Lazy Loading
Lazy loading is a technique that defers the loading of non-critical resources until they are needed. This reduces the initial page load time and can also reduce layout shifts. Use this technique for images, videos, and other resources that are not immediately visible to the user.
5. Minimise CSS and Javascript
Large CSS and Javascript files can slow down the loading of a page and increase the chances of layout shifts. Minimise your CSS and Javascript files to reduce their size and the time it takes for the browser to render the page.
Conclusion
In conclusion, optimising the Cumulative Layout Shift (CLS) score is crucial for delivering a positive user experience. By following the tips outlined above, you can significantly reduce the chances of layout shifts and enhance the overall performance of your website. Remember to monitor your CLS score regularly and make necessary adjustments to ensure that your users have a seamless browsing experience. As a web design company in Manchester, we understand the need to provide a smooth and consistent user experience, and optimising your CLS score is an essential aspect of achieving that goal.
