Home -> 5 Tools to Test Your Cumulative Layout Shift (CLS)

5 Tools to Test Your Cumulative Layout Shift (CLS)

Nicole Lanzer Nikki Lanzer November 18, 2021

Cumulative layout shift (CLS) can be observed when web elements jump around while the page is loading, making it difficult for users to click the right link. This issue is particularly prevalent with mobile devices, as the way web pages behave in the development phase don’t always translate to the live site. When users experience several of these unexpected shifts, they can become frustrated and decide to browse a more mobile-friendly store instead. To test CLS, there are a variety of online tools that can help you identify what might be causing the layout shifts and how you can take steps to fix the problem. 

1. Lighthouse: Cumulative Layout Shift

To use this tool, all you need to do is paste a URL into the main field and hit enter. The algorithm will calculate your CLS score by focusing on the user’s average experience on your page. Unlike other types of performance score metrics, this tool doesn’t prioritize speed, but rather the total number of times a layout shift is detected. CLS scores include:

  • 0.1 or less: Good 
  • 0.1 to 0.15: OK, but could use improvement
  • 0.15 to 0.25: Longer than recommended
  • 0.25 or higher: Much longer than recommended.

2. PageSpeed Insights 

PageSpeed Insights (PSI) uses data found in the Chrome User Experience Report, if available. Simply enter your URL to have PSI calculate the three Core Web Vitals of your store: the First Input Delay (FID), Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS) metrics. Once PSI concludes its testing, you’ll receive a report with a summary about how well your page performs. Scores of 90 or higher are good, scores between 50 and 90 signify the need for improvement, and scores below 50 are considered poor. 

3. Web Vitals Tester

This comprehensive feature will provide you with a full analysis of your Web Vitals, including the:

  • Largest Contentful Paint (LCP)
  • First Input Delay (FID) 
  • Cumulative Layout Shift (CLS)
  • Time To First Byte (TTFB)
  • First Contentful Paint (FCP)
  • Time To Interactive (TTI)
  • Total Blocking Time (TBT)
  • Speed Index (SI)

4. Layout Shift GIF Generator 

This unique generator will give you a visual representation of your CLS score to help you understand what your users and customers are experiencing. Enter your URL to see how the layout shifts appear on mobile or desktop, and replay it to catch which elements are moving around the most in the viewport. As you work to improve your CLS metric, you can re-enter the URL to see how the changes impacted the user experience right away!

5. Cumulative Layout Shift Debugger

This tool’s purpose is “to visualize the cumulative layout shifts of any webpage so it becomes easier to identify what needs improving on mobile and/or desktop in the initial load of a website.” It functions by using the Layout Instability API in Chromium to identify how many shifts occur when a page is loading. As it analyzes your CLS score, it will suggest possible culprits in your code or with the web elements themselves.

Conclusion

If you want an easily-accessible tool to analyze your CLS score whenever you need, you can also install the CLS Checker plug-in for Google Chrome. This checker will allow you to check and debug CLS issues right in your browser!

Let's build something together!

Contact us today to get your project started and hear more about all the awesome things we can do for you!

Become the Next Success Story