Cumulative Layout Shift (CLS) is one of the three factors that make up the Core Web Vitals, a new type of metric that Google uses to analyze the usability and user experience of a website and that has become one of the new SEO positioning factors.
Cumulative Layout Shift is one of the three metrics that make up Google’s Core Web Vitals and is responsible for measuring the usability of a web page during loading.
CLS is the sudden and unexpected change of the elements of a web page that happens during loading. A clear example of this is when, when accessing a web page you want to click on a button, but suddenly it changes its position and you click on another element. Certain elements, such as images, videos, contact forms or buttons are usually the main cause of this sudden movement.
Google considers CLS a sign of poor user experience, as many times these sudden “jumps” lead users to click on elements such as links or buttons that redirect them to other web pages, which can be annoying or frustrating. So websites with a low CLS score will rank worse in Google.
What causes CLS and how to fix it?
According to Google’s information on Core Web Vitals, there are five main reasons that cause CLS: images without the correct dimensions, incorrectly sized ads and iframes, dynamic injected content, web fonts, and DOM network actions.
In this regard, to solve the problems of image and video dimensions, it is necessary to identify the height and width by declaring them in the HTML. As for responsive images, it is necessary to make sure that all images for the different views use the same aspect ratio, for which it is possible to use tools such as AspectRatioCalculator.com.
In the case of ads and “iframes” the solution involves create a style for the containerthat is, create a style for the HTML element “div” that contains the ad, also declaring the specific height and width.
As for Web Fonts, which can cause FOIT (“Flash of invisible text”, i.e. a space with invisible text) or FOUT (“Flash of Unstyled Text”, i.e. a space with unformatted text), the best possible solution is to use a “rel=”preload”” in the font link.
As for injected or embedded content, for example, when in WordPress embedding a tweet or a YouTube video, there is no possible solution, so it is advisable not to use this type of functionality.
How is CLS calculated?
Google uses the following metrics:
-“Impact Fraction: This metric is responsible for measuring how much space the unstable element takes up in the viewport (the portion of the web page visible on a mobile device or desktop browser). It does this by measuring how much space the element occupies before loading and how much space it occupies after rendering. Therefore, if an element occupies 50% of the graphic space before loading and 25% after, the total “Impact Fraction” will be 75%.
-“Distance Fraction: This is the amount of space the web page element has moved from the original position to the final position. In the example above, it would have moved by 25%.
How do you calculate the total CLS? Well, for this you would have to multiply both metrics: 0,75 x 0,25= 0,1875.
In this sense, it is not necessary to understand the mathematical operations that Google performs to measure this factor. On the contrary, the most important thing to improve a website’s CLS score is to understand what factors are causing a low score and to fix them.3
