How to Fix Cumulative Layout Shift & Warranty Result

How to fix cumulative layout shift? I searched for the answer to this question for a long time. However, I couldn’t find a result on the internet for the exact solution of the cls cumulative layout shift problem. That’s why I wanted to write this article about cumulative layout shift fix. In this article, I will tell you the methods that I applied myself and got the result of CLS-0. The methods are pretty simple and you don’t need to know any code to implement them. In the continuation of this article, you will be able to find the definitive answer to the question of how to fix cumulative layout shift wordpress.

What is cumulative layout shift?

First, let’s do the cumulative layout shift definition. When most people do a speed test on their website and see that the CLS is high, they think it has to do with website speed. CLS is not about website speed. CLS stands for layout shift.

When you enter a website, you have seen that the screen moves up or down when you are about to scroll down the full screen. That’s exactly what cumulative layout shift meaning is. In other words, it can be defined as the screen moving or sliding independently of you.  With the latest algorithm updates, Google has once again shown how much it cares about user experience.CLS is among the most important criteria for user experience.

What are causes of high cumulative layout shift score?

There are many reasons why the google cumulative layout shift score is high. The main reasons are:

• The biggest reason is that the content is not loaded simultaneously at the page opening.
• Usually, the video or picture on the page can cause this problem. Especially images and videos uploaded as Lazyload can cause this problem.
• You should use a SEO friendly and fast theme. I switched to the Generatepress premium theme for this.
• If you are using Google adsense or another company’s ads, these are also among the biggest problems for CLS. If you are having CLS problems due to google adsense, I definitely recommend you to apply the following codes. I solved the problem with this code.

What should the cumulative layout shift seo score be?

As can be seen in the image above;

• Results below 0.1 points are good. You do not need to make any edits.
• A score between 0.1-0.25 is not bad. It won’t affect your ranking much. But you can work to get lower results.
• Results above 0.25 are very bad. If you get results above 0.25, you should intervene immediately. Otherwise, you will not rank higher in the search results.

How to improve cumulative layout shift?

Let’s answer the question of how to reduce cumulative layout shift. Here’s what you need to do to lower your CLS score:

• Set fixed dimensions for each image. If you are using WordPress, you can easily do this from the environment settings section.
• You need to use fixed dimensions, especially for ads. When you include the ads in the fixed “DIV” tag, “0-Zero” is displayed even if your CLS score is advertisement.
• Place your ads between the code I have given below. Thus, even if your ads are loaded later, there will be no screen shifting problem.

<div style=”height:300px;width:100%;text-align:center;”>
// YOUR_AD_CODE_HERE
</div>

• Example adsense ad code should be like this:

<div style=”height:300px;width:100%;text-align:center;”>
<script async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-……………..”
crossorigin=”anonymous”></script>
<!– Yazıdan Önce Esnek –>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-client=”ca-pub-……………………..”
data-ad-slot=”………….”
data-ad-format=”auto”
data-full-width-responsive=”true”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

Cumulative layout shift Wp rocket

I explained above that the cumulative layout shifts problem is not related to speed, css or javascript codes. That’s why you can’t improve CLS with WP Rocket app. As I said, you should ensure that images, videos and especially ads are loaded simultaneously and not scrolling. The best solution for google adsense is above code. Other than that, you need to use a fast and SEO friendly theme.

Litespeed cache cumulative layout shift

Litespeed cache plugin is one of the most used and best cache plugins especially for WordPress. Having a high CLS score is not actually a setting that can be made with the cache plugin. For this reason, the editing you make about CSS, Javascript or images in the Litespeed cache plugin will not directly affect the CLS score. As I explained in detail in my content, CLS is about content that is uploaded afterwards. Ensuring that these contents are placed in fixed areas or loaded simultaneously will solve the Chrome performance layout shift.

Cumulative layout shift test tool

After editing your images and ad spaces as described above, you can test again via cumulative layout shift google page speed . If your test result is still high, you can write to me in the comment section. I can check your site. Except for Google pagespeed;

• With GTmetrix,
• You can also test it with the Lighthouse plugin.
• To get the most accurate result, install and test the Light House extension from the google chrome store.

Core web vitals cumulative layout shift

Google made a major algorithm update in May 2022. With this update, the hit of my website has been lost 50%. My website, which had 10K daily visitors, suddenly dropped to around 5K daily. Before, I didn’t care much about Core Web Vitals. However, when my site’s hit dropped, when I researched the reason, I saw that it was due to Core Web Vitals. I edited immediately and managed to go through all the scores. My site recovered and started to rise in the rankings again. For this reason, I can say that Cumulative Layout Shift and other Core Web Vitals data are very important in terms of SEO. It is among the most important ranking criteria.