Imagine: you load a website and it seems ready to work. You click on the image on the front page of a blog article to read it and, suddenly, the whole page moves because something has just been loaded. This leads you to click on something completely different, which loads a page that you did not plan. If you have already faced this type of problem, you know how much the Cumulative Layout Shift (CLS) can have a negative impact on the user experience (UX) of a site. The term “cumulative layout shift” means the extent of the displacement of the layout of a page during its load. In this article, we will explain what the CLS is, how is it calculated but also how to improve it.
What is CLS or cumulative Layout Shift?
The CLS or cumulative Layout Shift is the unexpected displacement of elements of a web page while it is still being downloaded. The elements that tend to move are fonts, images, videos, contact forms, buttons etc. It is important to minimize the CLS because the moving pages can lead to a bad experience for the user. A bad CLS score indicates coding problems that can be quite easily resolved.
The website speed has an indirect impact on the CLS
The loading speed of your website or the use of a powerful server will have an impact on your CLS score. A slow loading website will necessarily lead to layout discrepancies. This is why it is recommended to opt for a high -level host when you publish your website. In addition, the dimensions of the images and a significant use of JavaScript for animations on your website can have negative impacts on your CLS score.
Remember that today, the main objective of a website is to satisfy users. Therefore, do not forget that elements such as unnecessary animations or images will slow down your website and lead negative results for the user experience. Design your website to satisfy your users and provide them with advantages. The CLS concept is one of the concepts introduced by Google.
Two factors come into account in the calculation of the CLS: the impact fraction and the distance fraction.
Impact
To calculate the impact fraction, you must first calculate the impact region. The Impact Region defines the area affected by the layout of the layout. Google identifies all the elements concerned and combines the original area with the offbeat version, thus defining the impact region. The Impact region is generally a rectangle, but if you have several layout discrepancies (horizontal and vertical), it can be a more complex form.
To define the impact fraction, you divide the surface of the impact region by the surface of the display window (part of the page visible on the screen without scrolling down). The calculation therefore gives:
Area of ​​the impact region / area of ​​the display window = impact fraction
The first Google version of the CLS only included the impact fraction. However, large elements can only move slightly, and large movements are more annoying than young. With this in mind, this simple CLS calculation had to be improved. This is why Google has developed the distance fraction.
Distance fraction
To calculate the distance fraction, you must first calculate the movement distance. The displacement distance defines the distance before and after the change of arrangement. It answers more or less to the following question: how much has the moved element moved? To calculate the distance fraction, you must divide the maximum movement distance by the height of the window:
Maximum displacement distance / window height = distance fraction
Use of values ​​do: Display and the link RE = PRELOAD
If your site uses online fonts, they can be the main cause of Fait (Flashes of the Invisible Text) and the Fout (Flashes of the Unstyled Text).
When the browser downloads the fonts from the server, it often displays an empty space until the personalized font loading. After downloading and displaying the font, the layout usually moves a lot. This phenomenon is called Foit (Flashes of the Invisible Text).
Another scenario occurs when the browser displays one of the system fonts until the personalized font is downloaded. This is called FOUT (Flashes of the UNSTYLED Text). As the system police may be different from the personalized font, they can occupy a different space. As a result, the layout of your site may move considerably after loading your personalized font.
To avoid this, you can use the values ​​do: Display such as Auto, Swap, Block, Fallback and Optional. And for an even better result, you can also preload the police files using For key fonts – in this way, they will be downloaded as a priority.
Include elements of width and height for videos and images
At the start of the Internet, the developers used to include elements of width and height everywhere on the site. It looked like this:
.
This has become less popular when responsive design took over. Due to this new approach, the developers began to use the CSS to resize images. So much the better for them, but not necessarily for the users concerned by the CLS.
With this method, the space is allocated only after the browser has started to download the image. Once all the images are displayed, the layout moves, causing unnecessary offsets. A much better solution to resize images is to use the form report. This is the relationship between width and height (for example, 16: 9). The use of the form report allows the browser to calculate the space necessary to display the image – and thus reduce the risk of displacement of the layout.
If you are dealing with responsive images, you can use the SRCSET attribute. It allows you to define several photos of photos and the browser to display the best size possible.
Poor implementation of the content injected dynamically
The content implemented dynamically should never appear above already loaded content. The only exception to this rule is when the change is caused by the interaction of the user. This type of content will not affect the CLS if it is loaded in the 500 ms depending on the interaction.
