blog background image

Cumulative Layout Shift Performance Metric Glossary Page

Want to improve the performance of your website? Are you experiencing issues with slow loading times and layout shift? If so, you may be dealing with a common problem known as Cumulative Layout Shift, or CLS. 

CLS is a Core Web Vital that measures the frequency and distance of layout shifts on a website. If your website has a high CLS score, it may be frustrating for users as it can affect their ability to interact with your site. Fortunately, there are ways to measure and fix CLS issues. 

In this article, we'll explore everything you need to know about Cumulative Layout Shift, including what it is, how to measure it with a CLS test or checker, and how to improve your CLS score. We'll also discuss the significance of CLS scores in web vitals, provide tips on how to fix this issue, and explain how a content delivery network (CDN) can improve your website's performance. 

By the end of this article, you'll have a better understanding of CLS and how to optimize your website's layout to improve user experience and website performance. 

What is Cumulative Layout Shift (CLS)? 

Cumulative Layout Shift (CLS) is a performance metric that measures the amount of unexpected layout shift that occurs during the loading of a webpage. In other words, it measures how much the content on a webpage moves around while the user is trying to interact with it. This can be frustrating for users, as they may click on a button or link, only to have the content shift unexpectedly, causing them to miss their intended target. 

CLS is calculated by measuring the distance that elements on a webpage move between frames, and multiplying it by the fraction of the viewport that is affected by the shift. The resulting score is a value between 0 and 1, where 0 means no shifting occurred, and 1 means that all content on the page shifted. 

How to Measure CLS with a CLS Test 

To measure CLS on your website, you can use a CLS checker tool that will analyze your website's performance and generate a CLS score. Google's Web Vitals tool is a popular choice for measuring CLS and other website performance metrics. 

To run a CLS test using Google's Web Vitals tool, follow these steps:

  • Visit Google’s Web Vitals website and click on "Start Measuring".
  • Enter the URL of the webpage you want to test and click on "Run Audit".
  • Wait for the audit to finish, and then scroll down to the "Layout Shift" section to view your CLS score.
  • Understanding CLS Scores
  • CLS scores range from 0 to 1, with lower scores indicating less layout shift and higher scores indicating more layout shift. A CLS score of 0.1 or less is considered good, while a score of 0.25 or higher is considered poor. 

It's important to note that CLS scores can vary depending on the device and browser being used to access your website. It's recommended that you test your website's performance on multiple devices and browsers to get a more accurate picture of your score. 

How to Fix Cumulative Layout Shift 

If your website has a high CLS score, there are several steps you can take to fix it. Here are some tips: 

1. Optimize Images and Videos 

Images and videos that are not properly optimized are a common cause of CLS, as they can significantly slow down the loading time of a webpage. Large images and videos take longer to load, and this delay can cause the layout to shift while the user is trying to interact with the page, leading to a poor user experience. 

To avoid this issue, it is essential to properly compress and optimize all images and videos on your website. This can be done by reducing their file size without compromising on quality. You can use image compression tools such as TinyPNG or Adobe Photoshop to reduce the file size of your images without losing their visual appeal. 

Similarly, for videos, you can use video compression tools to reduce their size without sacrificing quality. By properly optimizing your media, you can ensure that they load quickly and smoothly, preventing layout shift and improving the overall user experience.

2. Use Placeholder Elements 

Using placeholder elements is another effective way to prevent this issue on your webpage. Placeholder elements are empty containers that are the same size and shape as the content that will eventually be loaded. By implementing placeholder elements, you can ensure that the layout of your page remains consistent while the content is loading, which can significantly improve the user experience.

When implemented correctly, placeholder elements can be used for images, videos, text, and even advertising banners. For example, you can use a blank white or grey box as a placeholder element for an image or video that is still loading. This helps ensure that the layout of your page remains stable while the image or video is being loaded. 

3. Minimize Third-Party Code 

Third-party code, such as ads and social media plugins, can significantly impact the CLS score of your website. This is because third-party code often takes longer to load than the rest of the content on your page, which can cause the layout to shift and lead to a poor user experience. 

To minimize the impact of third-party code on your website's performance, it is recommended to remove any unnecessary third-party code that is not essential for your website's functionality. This can help reduce the number of requests made to external servers and improve the loading speed of your website.

Another option is to use asynchronous loading to load third-party code after the rest of your page has finished loading. Asynchronous loading allows your website to continue loading even if third-party code is taking longer to load, preventing layout shift and improving the overall user experience. 

4. Avoid Dynamic Content Above the Fold 

Dynamic content, such as pop-ups or banner ads, can contribute to layout shift if they appear above the fold of the webpage. This can cause the user experience to suffer, as the layout shifts may obscure important information or CTAs (calls to action). 

To prevent this issue, it is recommended to keep all dynamic content below the fold, or use a placeholder element until the content has finished loading. This will ensure that the layout of your webpage remains consistent, and the user can easily interact with the content without being disrupted by the layout shift. 

By keeping dynamic content below the fold, you can also improve the overall loading speed of your webpage, as the content that appears above the fold will load faster, providing a better user experience. Additionally, by using placeholder elements, you can prevent layout shift caused by content that is still loading and ensure a consistent and stable layout throughout the loading process. 

Overall, by keeping dynamic content below the fold or using placeholder elements, you can prevent this from happening and provide a seamless user experience on your website. 

5. Specify Image and Video Dimensions 

By specifying the dimensions of images and videos on your website, you can reserve the space they will occupy on the page before they load. This can help prevent layout shift and improve the overall performance of your website. 

When an image or video is loaded, the browser needs to allocate space for it on the page. If the dimensions of the image or video are not specified, the browser cannot allocate the space needed, which can lead to layout shift. By specifying the dimensions of the image or video in the HTML code, you can ensure that the browser allocates the necessary space before the image or video is loaded, preventing layout shift. 

Specifying image and video dimensions can also improve the loading speed of your webpage, as the browser can determine the appropriate size and scale the image or video accordingly.

6. Consider Lazy Loading 

Lazy loading is a technique that defers the loading of non-critical resources, such as images and videos, until they are needed. This can help improve the initial load time of your page and prevent layout shift by only loading resources when they are in the user's viewport. 

With lazy loading, the images and videos on your webpage are not loaded until the user scrolls down to view them. This reduces the amount of data that needs to be downloaded when the page first loads, leading to faster loading times and a better user experience. 

Lazy loading is particularly effective for pages that contain a large number of images or videos, as it allows the user to interact with the page while the resources are being loaded in the background. This can help prevent layout shift and ensure that the user has a smooth browsing experience. 

7. Use a Content Delivery Network (CDN) 

A content delivery network (CDN) can help improve the performance of your website by caching your content on servers around the world. This can help reduce the load time of your page and prevent layout shift by serving content from a server that is geographically closer to the user. 

When a user requests content from your website, the CDN determines which server is closest to the user and serves the content from that server. This can significantly reduce the load time of your page and prevent layout shift, as the content is served from a server that is physically closer to the user. 

CDNs are particularly effective for websites with a global audience, as they can ensure that content is delivered quickly and reliably to users around the world. Additionally, CDNs can also provide other performance-enhancing features such as image optimization, caching, and content compression. 

Optimize Your Web Performance Today

Cumulative Layout Shift (CLS) is an important performance metric that measures the amount of unexpected layout shift that occurs during the loading of a webpage. 

A high CLS score can negatively impact the user experience and lead to lower engagement and conversion rates. By following the tips outlined in this article, you can improve your website's CLS score and provide a better user experience for your visitors. 

If you need help improving your website's performance, contact Fix My Site Speed. Our team of experts can analyze your website and provide customized solutions to help you fix any performance issues and improve your website's overall speed and performance.

help section background

Slow Store? We can Help!

Our purpose is to assist Shopify merchants wherever possible to enhance their performance from every angle – speed included. If you want your site to get the best possible results in the market, you need to get ahead of your competition. And that starts with Shopify speed optimisation.

CHECK MY SHOPIFY SPEED 👉