Home > How to Measure Your Cumulative Layout Shift (CLS)

How to Measure Your Cumulative Layout Shift (CLS)

authorimage
authorimage

This past June, the metrics used to calculate a website’s Cumulative Layout Shift (CLS) were adjusted by Google. CLS, one of the three Core Web Vitals, was initially determined to score the individual changes or “shifts” in content that a page experiences throughout its lifespan. The idea was simple: pages with more unexpected content layout shifts would lead to poor customer experiences and a worse CLS score. However, when Google developers found that their attempts to decrease their CLS scores were skewed by long user sessions, they had to change tactics.

Old vs. New CLS

Generally speaking, CLS can be explained as “the unexpected shifting of web page elements while the page is still downloading.” A site with bad CLS loads elements at different speeds, causing links and buttons to shift around the page as the user tries to interact with the content.  

The problem with the old standard of measurement was that some pages, such as apps that allow infinite scrolling, for instance, naturally gain more CLS over time. The revised measurement of CLS caps the total aggregation to the worst-performing page of shifts, making it a more consistent and reliable metric for all websites, no matter how long a session lasts. Here’s how it works:

The CLS metric has been adjusted to a maximum session window with a 1 second gap, capped at 5 seconds. For pages that have longer user sessions, this update better reflects the actual performance of the content. This change is also great for all website owners: the new CLS won’t worsen any website’s score. In fact, most retailers can expect their CLS to remain the same or improve!

Measuring CLS

The lower a CLS score is, the better. Pages with great CLS will load and move all web content into place within 100 milliseconds or less. For sites with slower loading times, different web elements may appear to load and move around sporadically for longer periods of time. The causes for poor CLS may be due to development errors or several other common factors, such as:

  • Images or embedded content with undefined HTML dimensions
  • Dynamic content interfering with static or existing content
  • Rendering issues with web fonts
  • 3rd-party ads
  • Widgets resizing themselves.

If you want to measure and improve how your site performs, you can check out Chrome DevTools or Lighthouse for deeper insights.

From Browsing to Buying: Put Wagento’s eCommerce Mastery to Work for You

authorimage
Nikki, with a Mass Communications and Public Relations degree from the University of Wisconsin Eau Claire, excels in creating diverse marketing content, from social media ads to lead-driving emails, embodying the spirit of a true marketing rockstar.

Related Topics

Finding the right eCommerce platform to support your online store can be a frustratingly difficult task. Unfortunately, there’s no such thing as a perfect eCommerce

Largest Contentful Paint (LCP) is one of the three Core Web Vitals that Google developers created to measure the most important aspects of a user’s

Despite being one of the most popular eCommerce platforms on the market today, Magento 2 stores can be frustratingly slow. Several issues can cause website

Start Selling with Personalized
eCommerce Solutions