What is CLS and why it so important?

Following the launch of our new website, we are a bit obsessed with its performance. One important metric is CLS (Cumulative Layout Shift), which has gained significant importance recently. But do you really understand what it is?

What is CLS?

CLS stands for Cumulative Layout Shift, a metric that measures the visual stability of content as it loads on a page. Its function is to track how much content shifts unexpectedly while loading, affecting the user experience.

How can I detect CLS?

Have you ever read an article online, and suddenly the content shifts, leaving you confused about where you were? This happens when content is loaded asynchronously and differs in size from what it replaces. In cases like digital newspapers, it often occurs when rotating ads or new ads appear as you scroll down.

Besides being annoying, these shifts can cause unintended consequences, like accidentally clicking a button and confirming a purchase instead of cancelling it. Some websites intentionally use this to increase ad click-through rates. A common example is when an ad says "Skip in 3, 2, 1..." and then changes quickly.

It’s not uncommon to click near the button, only to accidentally open the ad instead of continuing with the content.

However, this is just a visual example. The consequences can be more disruptive on platforms like online stores.

Why is CLS important?

Besides enhancing usability and improving user experience, Google now considers CLS as part of its Core Web Vitals when assessing website quality. This will directly influence your search rankings.

According to web.dev, any CLS value above 0.1 requires improvement, and values over 0.25 are considered poor. On our website, we’ve achieved a CLS value of 0.02 using Vercel’s Insights, and 0.018 through Google PageSpeed Insights, which is very good.