How to Improve Cumulative Layout Shift (CLS) on WordPress

Tutorials • WordPressEditorial • August 16, 2021 • 6 minutes READ

It is a very common thing to experience that sudden changes happen when you are on a website. For example, if you are reading an article or shopping from an online store, the text and the size changes all of a sudden.

You may be searching in the desired category but now you are on some unwanted link. Similarly when you are trying to click on a link to reach a website but it ends up taking you somewhere else.

Here you can add the video from Google website: https://web.dev/cls/

These experiences are annoying and make the users lose interest. But if they keep on happening again and again they can cause some real damage. These unexpected changes are because of the asynchronous loading of resources.

Another reason is the addition of the DOM element getting loaded above the existing content. A font that is not consistent can also be a part of it. It can be a video or an image that has undefined dimensions.

Third-party ads are also notorious in this regard. The widget can also cause problems. Sometimes the widgets resize themselves which is one of the major causes of the disturbance in the integrity of the website.

The thing that makes this issue more complicated is that how a site works in the development is usually different from the user experience.

The content which is personalized or has a third party authorization does not behave in the same manner during its development and production. The developer’s catches are most of the time present already in the caches.

API calls on the other hand are so fast that you cannot even notice the delay. To overcome these obstacles the cumulative layout shift metric comes to help. It is the best metric for measuring the exact times all of these changes are happening for users.

What is Cumulative Layout Shift?

Cumulative Layout Shift is a vital core web metric system. The primary purpose of this system is to calculate all the layout shifts. The layout shifts calculated in it are those that are not taking place because of user interaction.

It calculates the total proportion of viewport which is impacted by layouts. It also counts the movement distance of all elements. It helps in improving the quality by detecting the exact numbers of shifts layouts.

Many queries are made about knowing the best score of CLS. It can be as low as zero. Completely static pages usually have a 0 CLS score. The number gets higher as soon as there are Layout shifts.

A good CLS score means that you have to stay lower. If your score is lower it means that your layout is more stable.

Source: https://web.dev/cls/

Higher CLS scores on the other hand. Google recommends having this score under 0.1. A score under 0.1 is a good score. If the cls score is between 0. 1 to 0. 25 shows that your layout shifts need improvement.

All the shifts having a CLS of 0.25 or above are famous as failing Layouts.

Does Cumulative Layout Shift affect your SEO?

CLS is important for keeping records of the changes in your layouts. In the future, it is going to become a ranking factor. It affects your search engine optimization as fast hosting does.

A high CLS score means that your readers are having a difficult time using your website.

Cumulative Layout Shift and SEO will have a strong relationship in the future. LCP and FID metrics along with CLS will affect your SEO.

You may consider it a minor thing. It still holds a great value in calculating the targeted traffic you get from different search engines. It directly displays the user behavior metric system. Google denies the possibility of using metrics such as dwell time for ranking and rating purposes.

Multiple search engines such as Bing admit that they use metrics to improve their ranking algorithms. These are important reasons for making CLS a part of your search engine optimization strategy.

What causes CLS?

There are multiple reasons for this Cumulative Layout Shift. The most common causes for this shift include the presence of images with undefined dimensions. Sometimes ads, iframes, and embeds are present on the website without any dimensions.

This increases the CLS score. If your content is injected dynamically it can create a layout shift. It is important to know that the flash of unstyled texts is a major contributor to these shifts. Flash of invisible texts also plays the same role.

If there is a long hold before upgrading the DOM, the remaining actions waiting for the response from the network can also cause this shift. These are the most common causes for this layout shift.

How to Improve CLS in WordPress

Just like fixing any other site, it is a slightly technical thing to fix these issues. You have to focus on the causes and try to avoid them as much as possible.

Most of the time you can avoid a higher CLS score shift by just focusing on the code and creating minimal website design like the new web design trends dictates.

Following are some of the most important things to consider when improving CLS in WordPress.

1. Set Image Dimension

It is important to set the dimensions of the images for your website. If you don’t do that, your images will keep on causing the layout to shift.

The content of your website will be shown with continuous shifting on the website. It will decrease the quality of the user experience. If you are using WordPress editor, you are in safe hands.

WordPress will do it for you automatically. It will set the dimensions of the responsive images. But if you are adding the dimensions for the images manually, you have to keep in mind to add them to the code every time.

The height and width attributes of the image dimensions should be used.

2. Set dimensions for iframes

You need to add dimensions for iframes as well. If you want to improve the experience of users on your website your embeds need dimensions.

If you are embedding Google maps or any video you need to add specific width and height of the dimensions.

Using a placeholder will also help you with the performance. A placeholder is usually used before the embed. It is an important practice in keeping your iframes in specific dimensions.

WP Rocket is a nice option for replacing the YouTube embed.

3. Set Space for Ads

Ads are the same as the embeds but they have more importance. Their importance is because of their major contribution to the CLS. Late loading ads cause the jumping of the website. There is a solution to this issue.

You just have to reserve space for these ads in the code. When a site is in the developing stage, it needs space for the ads as well.

This space in the code will cause the content of the ad to load perfectly. It will not create any shift for the users.

Another important factor while taking care of the ads is placement. Usually, when ads are added on the top viewport, they cause a major shift.

4. Fix Issues with Font Loading

It is important to fix the font sizes and their loading. It is an important issue how your custom fonts load on the website. If you are using Google fonts or Adobe fonts you will have to face the layout shifts with a flash of unstyled text and a flash of invisible text.

This issue occurs when the visitor’s browser acts fast and loads the text before the custom fonts. To avoid this issue you can preload the necessary font files.

This will help in the right way to load the font file in the visitor’s browsers. But make sure to preload only important resources.

Using preloading too much will affect your site. It will slow down the process of loading content. You can also combine preloading with the font display to get better results. A system font stack is another amazing way of completely avoiding the issue.

Conclusion

Cumulative Layout Shift is important for calculating the layout shifts of your websites. The CLS score tells about the user experience on your website. It helps in improving the SEO as well.

It is important to fix the issues such as images, iframes dimensions, and setting space for ads. This will keep a lower CLS score.