How to improve Cumulative Layout Shift (CLS) in WordPress

Tutorials • WordPressEditorial • • 6 minutes READ

It is very common to see sudden changes when you are on a website. For example, if you are reading an article or shopping in an online store, the text and size suddenly change.

You may be searching in the category you want, but now you are on an unwanted link. Likewise, when you try to click on a link to go to a website, but it ends up taking you somewhere else.

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

These experiences are boring and make users lose interest. But if they keep happening over and over again, they can cause real damage. These unexpected changes are due to asynchronous resource loading.

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

Third-party advertisements are also notorious in this regard. The widget can also cause problems. Sometimes widgets resize, which is one of the main causes of website integrity disruption.

Online email template generator

With Postcards, you can create and edit email templates online without any coding skills! Includes over 100 components to help you create personalized email templates faster than ever.

Try for freeOther products

What makes this problem more complicated is that how a site works in development is generally different from the user experience.

Personalized content or content that has been authorized by third parties does not behave in the same way during its development and production. The developer’s captures are mostly already present in the caches.

API calls, on the other hand, are so fast that you can’t even notice the delay. To overcome these hurdles, the cumulative layout offset metric is useful. This is the best metric for measuring the exact times when all of these changes are happening for users.

What is cumulative layout offset?

Cumulative Layout Shift is an essential web measurement system. The main purpose of this system is to calculate all layout offsets. The layout offsets calculated there are those that do not occur due to user interaction.

It calculates the total proportion of the window that is impacted by the layouts. It also counts how far all items have moved. It helps improve quality by detecting the exact number of shift layouts.

Many requests are made to know the best CLS score. It can be as low as zero. Completely static pages generally have a CLS score of 0. The number increases as soon as there are layout changes.

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

What is cumulative layout offset?

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

Higher CLS scores on the other hand. Google recommends having this score below 0.1. A lower score 0.1 is a good score. If the cls score is between 0. 1 to 0. 25 shows that your layout changes need to be improved.

All shifts with a CLSs of 0.25 or greater are known as failed layouts.

Does Cumulative Layout Offset Affect Your SEO?

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

A high CLS score means your readers are struggling to use your website.

Cumulative layout mismatch and SEO will have a strong relationship going forward. LCP and FID measurements as well as CLS will affect your SEO.

You can think of it as a minor thing. It still holds great value in calculating the targeted traffic you get from different search engines. It directly displays the user behavior measurement system. Google denies the possibility of using metrics such as downtime for ranking and evaluation purposes.

Several search engines such as Bing admit that they use metrics to improve their ranking algorithms. These are important reasons why CLS is part of your search engine optimization strategy.

What causes CLS?

There are several reasons for this cumulative provision change. The most common causes of this change include the presence of images of undefined dimensions. Sometimes ads, iframes, and integrations are present on the website without any dimension.

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

Does Cumulative Layout Offset Affect Your SEO?

If there is a long wait before upgrading the DOM, the remaining actions awaiting the network response can also cause this lag. These are the most common causes of this change in disposition.

How to improve CLS in WordPress

Just like repairing any other site, resolving these issues is slightly technical. 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 change by just focusing on the code and creating a minimal website design as new web design trends dictate.

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

1. Define the size of the image

It is important to define the dimensions of the images for your website. If you don’t, your images will continue to change the layout.

Your website content will be displayed with continuous change on the website. This will decrease the quality of the user experience. If you’re using the WordPress editor, you’re in good hands.

WordPress will do this for you automatically. It will define the dimensions of the responsive images. But if you add the dimensions of 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 must be used.

2. Define the dimensions of the iframes

How to improve CLS in WordPress

You also need to add dimensions for the iframes. If you want to improve the user experience on your website, your integrations need dimensions.

If you embed google maps or video, you need to add dimension specific width and height.

Using a placeholder will also help you with performance. A placeholder is generally used before integration. It is an important practice to keep your iframes in specific dimensions.

WP Rocket is a good option to replace the YouTube integration.

3. Define space for announcements

Define space for announcements

Ads are the same as integrations but they matter more. Their importance is due to their major contribution to the CLS. Late loading ads cause the website to jump. There is a solution to this problem.

You just need to reserve space for these ads in the code. When a site is in the development stage, it also needs space for ads.

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

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

4. Troubleshoot font loading issues

Troubleshoot font loading issues

It is important to fix the font sizes and their loading. How your custom fonts load on the website is an important question. If you are using Google Fonts or Adobe Fonts, you will have to deal with layout changes with unstyled text flash and invisible text flash.

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

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

Using too much preload will affect your site. This will slow down the content loading process. You can also combine preloading with displaying fonts for better results. Another amazing way to avoid the problem entirely is a stack of system fonts.

Conclusion

Cumulative Layout Offset is important for calculating layout changes for your websites. The CLS score provides information about the user experience on your website. It also helps improve SEO.

It is important to troubleshoot issues like images, iframes dimensions, and setting up space for ads. This will keep a lower CLS score.