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.
