How to optimize the Cumulative Layout Shift (CLS)?

Last week we reviewed what the Cumulative Layout Shift (CLS) is, a Google metric that detects unexpected movements within your website content, measures the sum total of all individual design change scores for each unexpected design change. that occurs throughout the life of your page.

And as you already know, this is part of the Google search algorithm, so your website must be up to the task for proper SEO. That is why this week we will see what parameters you should consider optimizing the CLS on your website.

What is causing the unexpected content movement (CLS)?

According to Google, the most common causes of high CLS are:

· Images without specifying the dimensions.
· Ads or embedded iframes without dimensions.
· Dynamically added content, such as a Chat on your website.
· Web fonts that cause flashes of invisible text (FOIT) and flashes of unstyled text (FOUT) .
· Actions that wait for a network response before updating the DOM.

How to optimize for unexpected content movement (CLS)?

Using font values: display and link rel = preload

If your site is using fonts that are hosted on your website or from third parties, it could be the root cause of FOIT (Flashes Of the Invisible Text) and FOUT (Flashes Of the Unstyled Text).

When the user's browser downloads fonts from the server, it often shows white space until your website's font loads. After downloading and displaying the font, the layout usually moves quite a bit. It's called FOIT (Flashes Of the Invisible Text).

Another scenario occurs when the browser displays one of the system fonts, the one the user has by default on his computer, until the website font is downloaded. This is called FOUT (Flashes of The Unstyled Text). Since the system font may be different from the website font, it may take up different space, so your website design may also move after the custom font is loaded on your website.

To avoid this you can use font: display values like auto, swap, block, fallback and optional. But if you want an even better result, you can also preload the sources using <link rel = preload>, in this way they are downloaded as a priority file, before the user can see the content of your website.

Width and height in videos and images

In the old days of the internet, web developers used to include width and height elements everywhere on the site. It looked like this:

A few years ago, when responsive designs became popular, we stopped setting the height and width of images, in this way we adapt them with CSS according to the device that is visiting the website.

With the CSS method, the width and height are assigned only after the browser begins to download the image, so depending on the design, it could be moved by adapting the image to the space that corresponds to it.

A solution to this could be to resize the images using the aspect ratio, the ratio between width and height (eg 16: 9). This allows the browser to calculate the space required to display the image and thus reduce the risk of unexpected content movement (CLS).

Dynamically loaded content

CLS will ignore all content changes that appear within half a second of user input. This means that the CLS evaluation stops for 500 ms after every user interaction with your website. Therefore, if the design or content change is intentional and caused by the user, it will not affect the CLS rating.

Dynamically loaded content, like loading content from an API for example should never appear once the website is already loaded. The only exception to this rule is that you load the content dynamically within this 500 ms when entering the website for the first time or after an interaction.

Conclusion

Optimizing the CLS can help you diagnose why users are not satisfied with your site or how you could improve their experience. Remember that CLS is part of the Google search algorithm, so optimizing CLS will make you stand out from your SEO competition.