How to eliminate CLS issues with AdSense to improve on Core Web Vitals


I have noticed that there are many people looking for how to improve the CLS of the web using AdSense. I know that many people are going crazy with this topic and that is why I want to explain how to do it with a very simple tip that has worked for me.

First of all, I would like to clarify that This tip is intended only for Adsense blocks, although it can be applied to any type of ad or element to improve the CLS.. Since, despite being integrated into the Core Web Vitals or “Main Web Metrics”, the CLS is not something that you are going to improve because your page goes fast. That is why I would like to start this tutorial by explaining to you what the CLS is.

What is the CLS or Cumulative Layout Shift?

What the CLS does is measure visual stability. And I explain it to mortals. The CLS checks if the elements that are loaded on your website are moving as the rendering progresses, or if they are still in place. That is, if when you load the web you see a title, but then when you slide an asynchronous Adsense ad appears and moves that title, your CLS is going to have a bad score.

You may also be interested in:

It does not matter if you have the fastest website in the world, if your website is moving elements and makes the user click where it is not, etc. you’re going to have a lousy CLS score. Therefore, you must keep in mind that the CLS does not measure time, but the frequency and magnitude with which these changes and displacements occur on the page. If your page is moving the elements, your CLS will need to improve. The CLS measures how much certain elements move from when the page starts to load until it ends. If you want to see more in depth how the CLS is calculated, here is a detailed explanation.

In this video you have several examples and more details of the problem. Notice how things load asynchronously and move around, causing you to score poorly on Core Web Vitals. As you can already guess, the CLS will be very important in online stores, since it can lead the user to buy without meaning to and that kind of thing that Google does not like at all. You must get a CLS below 0.1, so let’s go with the tips.

How to improve the CLS of your website if you use AdSense?

It is curious that being Google AdSense, they are not preparing the Adsense blocks so that your CLS is optimized at all times. This is normal, and in part the fault is not usually Adsense, but the different plugins that are used to improve the speed of websites by delaying scripts, etc. Some of those plugins can be WP Rocket, Autoptimize, etc.

It doesn’t matter which one you use, if what you do is delay the execution of the Adsense ad and then show it when it detects movement, surely you have a bad score in the CLS. Fixing this is as easy as setting a stop to your ads, simple as that. I’m going to give you a practical example of how it’s done with a standard AdSense block.

Imagine that you are using an Adsense block like this. It is the code of a standard responsive block. This does not happen with blocks with a defined width and height, since those do reserve space for them.

adsense ad

Why does the CLS fail? What needs to be fixed?

being a responsive type ad, the problem is that this block is not reserving space for the ad in question. This will mean that unless the script is loaded, no space is reserved for it. Therefore, when it is executed (especially if you have delayed its execution to improve the metrics), it moves other elements of the web from place to place.

Fixing it is as simple as putting a minimum height, in this case adding that simple code min-height: 300px. In my case I have put 300 because it is the height that is usually used in my ads. If you don’t know what the height is, you can always inspect the web before and see what high is being used in your Adsense ads both on desktop and mobile (that is, both the desktop and mobile versions). It is also important that you pay attention to that display:block, and that it is like this, since you could have another style that does not block the site of the ad.

AdSense ad with high minimum set

Which ads should you improve and which ones should you put a minimum high?

If you pay attention, what the code does is set a minimum height, and not an exact height, to avoid problems if a responsive block is displayed larger there will be no problem. In this way, we are reserving space for the ad in question and avoiding problems. This tweak works fine with WP Rocket configured and all options to delay JS and optimize CSS delivery enabled (except those that don’t support HTTP/2). But this would give for another entire article, how to configure WP Rocket. I have chosen to talk about it since it is one of the most used and the one that is causing the most problems in this regard.

What I recommend with this setting is that apply it to ads that appear at the top of the page, especially those that load on the first screen seen (both on desktop and mobile). That is, all the ads that are displayed when you load the page both on the home page and in the articles. Remember that the most important thing is to optimize the most visited pages and not the home page (especially if it is not the page that receives the most visits).

And now, I leave you a screenshot that works. I had this CLS problem and I decided to fix it quickly. Now the CLS is 0 and perfectly optimized. You can easily check it by doing a pagespeed test (purging the cache for that specific url), and you will be able to see how these changes affect your website. You should look at the experiment data (the ones I show in the image) and not those of the last 28 days.

Get CLS 0 using Adsense

Do you have problems with the CLS that you cannot solve?

If you have any other problem with the CLS, it is best that you see the official Google guide to improve the CLS of your website. It is true that it requires certain knowledge, but understanding this will help you to solve problems easily, or at least to know where the fault is.

If you have any problem, do not hesitate to leave me a comment, I will respond quickly or even choose to do other tutorials of this type if necessary. Keep in mind that this is only a small part of the CLS improvement, but with it you will be able to understand how it works and apply similar solutions to most elements of the web.

.

How useful did you find this content?

Click on a star to rate!

Average score 0 / 5. Counting of votes: 0

So far, no votes. Be the first to rate this content.

I'm sorry this content was not useful for you!

Let me improve this content!

Tell me, how can I improve this content?

You may also be interested in:

Deja un comentario