What is CLS and why it so important?
Discover why you sometimes click on advertisements you do not intend to. Today, we review several technical aspects that enhance user experience and search engine optimisation.
3 mins de lectura
Full-Stack Developer & CEO of Root Digital | Headless CMS Expert | 17 Years of Experience
Following the launch of our new website, we are a bit obsessed with its performance. There is a metric known as CLS, which has gained significant importance recently, but do you truly understand what it is?
What is CLS
CLS stands for Content Layout Shift, referring to the visual structure or design. Its function is to measure the visual stability of the content.
How can I detect CLS
Have you ever read a news article on a digital platform, and suddenly the content shifted, leaving you unsure where you were reading?
This occurs when content is loaded with a delay (asynchronously), and this new content differs in dimensions from what it replaces. In our case of digital newspapers, it's often caused by the loading of rotating advertisements, or the appearance of new ads as you scroll down the page.
Besides being annoying and prompting the user to leave the page, it can also have more serious and sometimes dangerous implications. For instance, it might cause you to click on a button you didn't intend to and confirm a purchase instead of cancelling it.
There are cases where this technique is intentionally used to increase the click-through rate on advertisements. Although not exactly the same, a very illustrative example is when a button appears saying "Skip ad in 3, 2, 1..." and then changes to "Skip".
It is not uncommon to click to the left of the button to accidentally open the advertisement instead of playing the video.
However I must emphasise that this is merely a visual case, but next, we can see an example in an online store.
Why is CLS important
Besides usability reasons and enhancing user experience, recent revisions by Google are taking these metrics into account when assessing the quality of a website, and this will directly affect our position in the rankings.
According to web.dev documentation, any value above 0.1 requires some improvements, and values above 0.25 are considered "poor".
In our case, we have achieved a value of 0.02 according to Vercel's Insights tool, and 0.018 according to Google's PageSpeed Insights, which can be considered very good.
If you are curious about your website's score, you can perform a test using the same Google PageSpeed Insights tool.
And if you have any questions or would like us to conduct a more thorough study, do not hesitate to write to us via our contact section; we will be delighted to assist you :)