Imagine that you’re scrolling through a website or article when the page seems to suddenly jump or shift. You might lose your place, click on the wrong link, or accidentally navigate to an entirely different page due to this inconvenient shuffling. These unexpected shifts have become common enough to earn themselves a name: cumulative layout shifts (CLS).
According to the Search Engine Journal, CLS is defined as “the unexpected shifting of web page elements while the page is still downloading.” These elements may include fonts, images, contact forms, or a wide range of other interactive content. However, retailers can take action to measure their websites’ CLS to ensure that every visitor will have a smooth, shift-free browsing experience.
Why CLS Occurs
The frustrating and sudden shifts associated with CLS can occur due to resources being loaded asynchronously or DOM elements being dynamically added to the webpage before the original content. For example, common instances of CLS can be as simple as a resized font style or an image with unspecified dimensions. Noticing CLS changes during development can be difficult, as Philip Walton and Milica Mihajila, writers for web.dev, explain:
“Personalized or third-party content often doesn’t behave the same in development as it does in production, test images are often already in the developer’s browser cache, and API calls that run locally are often so fast that the delay isn’t noticeable.”
Therefore, any major problems in CLS frequently go unchecked until users can test the site for themselves.
How to Calculate CLS
Since CLS is predicted to be a top-ranking factor for Google in 2021, testing your website’s visual stability sooner rather than later can help your site boost its rankings when the algorithm shifts. Measuring CLS includes two different metrics: impact fraction and distance fraction. Here’s how each is calculated:
- Impact fraction. This measures how much space an unstable element takes up in the viewport, or what a visitor sees on their screen. The metric simply adds together the percentages as the image shifts to fit the screen. For example, if an element originally takes up 50% of the viewport then drops another 25%, these percentages are added together for a score of 75%, or 0.75.
- Distance fraction. This fraction represents how much a page element moves from the original position to its final position. For instance, the distance fraction of the previous example would be 25%, or 0.25.
Once these metrics are taken, simply multiply the two numbers together to get your final CLS score. Using the numbers from the previous examples (0.75 x 0.25), the final score would equal 0.1875.
Tools to Test Your Site
Developers can use the following tools depending on whether they’d like to check the CLS in the field or in the lab. Field tools include:
Some lab tools include:
