Cumulative Layout Shift

CLS 05 scaled

The CLS method is used to measure the degree to which the content on the webpage shifts or moves throughout the entire lifecycle of the page rendering cycle, or, in other words, to measure how stable the website’s visual appearance is.

There are probably many times in your life when you’ve witnessed first-hand just how frustrating it is to be able to click on an item in a menu and accidentally click on an advertisement, which then takes you to a third-party website, and how frustrating it is when content on the webpage shifts in the middle of an interaction. Of course, the layout shifts are also an annoyance to users. However, they are also capable of causing more significant problems for web publishers, including high bounce rates and violations of their ad policies due to accidental clicks due to layout shifts.

Additionally, since Google considers CLS one of the three “Core Web Vitals,” a low CLS score can negatively affect the overall core web vitals score, resulting in the user receiving a failing grade. As part of recent changes to Google’s search algorithm, sites that receive a passing score on the core web vitals assessment are ranked more favorably in the search results.

There is a direct correlation between improving the CLS score, improving the overall user experience, potentially improving Google rankings, and increasing Google organic traffic.

How is Cumulative Layout Shift measured?

When an element visible in the viewport shifts its start position for any reason, that shift will be recorded. Therefore, it would be considered unstable if it changed its start position. It’s important to note that it’s only possible to create a layout shift if a visible element moves to a different place on the page due to something happening on that page, and not if a new element or an existing element grows or shrinks.

A CLS score consists of two specific measures designed to track layout shifts: impact fractions and distance fractions. These two measures are used to determine the CLS score. The impact fraction measures how unstable elements affect the viewport between two frames by combining the original element and the shift as a ratio that can be compared to the viewport’s total visible area between the two frames. In the case of an unstable element that moves horizontally or vertically, the distance fraction represents the distance that element has moved about the viewport (either horizontally or vertically).

How can you improve your CLS score?

For reducing unstable elements/shifting behavior, here are a few recommendations:

Want to read more site speed glossaries? Check out here!

Get started with Seahawk

Sign up in our app to view our pricing and get discounts.