Troubleshoot CLS and Adsense issues

Cumulative Layout Shift
How to detect scrolling
Solutions for reserving ad block spaces
Changing adaptive ads to fixed size
Disable size optimisation
Reserving space for ads with Ad Inserter

It's impossible to keep Google completely happy. I gave up on it a long time ago, although there are issues that are worth fixing, like the CLS (Cumulative Layout Shift).Cumulative Layout Shift

Cumulative Layout Shift is the cumulative change in layout. This metric is important because it analyses visual stability and the frequency with which visitors experience unexpected layout changesIn a nutshell, this measures any displacement of the elements at the top of the page during loading.Achieving a low CLS helps to ensure that the page is pleasing to the eye and prevents annoying movements that can result in the reader losing sight and/or position of important navigation elements. Troubleshoot CLS and Adsense issues

It is considered a good user experience if the CLS does not exceed 0.1, up to 0.25 it needs to improve and from there on it is considered a bad score. This, as I guess you know, can be measured in several ways. The most commonly used is PageSpeed Insights.As noted in the documentation of the Core Web Vitalsdocumentation, a bad CLS can be caused by various elements such as an image or video with unknown dimensions, a font that is displayed larger or smaller than its alternative, or a third-party ad or widget that changes size dynamicallyParadoxically, some of the elements that tend to brush the CLS are Google Adsense ads. Especially if you use the automatic ads option (not recommended). There are cases where they even completely ruin the loading speed.How to detect scrollingNow that we are in the middle of trying to fix the Adsense issue, we can take a look at the rest of the elements that may be fattening the CLS. There are different ways to do this, here are a few.Looking atThe most rustic method is simple observation, by eye. If the movement is noticeable you will see it right away, but there are less noticeable movements that require a closer inspection.

In Search ConsoleIn GSC, under "Top web metrics", you can get the list of URLs with CLS and LCP problems and take a closer look at them one by one.

With a browser extensionYou can install the Chrome extension CLS Checker - Journey Further and test all those URLs, s that are full of punctuation. In addition, the extension gives clues in the form of red labels and shows you the list of elements and the CLS they consume. Clicking on "Toogle" highlights the element in question. In my case, as the Adsense ad issue was already fixed, only one appears.

VideoAfter doing a test on webpagetest.org you can see the videos it generates.

Pausing the video makes it easier to find small displacements.It also generates an animated gif like this one. If you look closely, both the menu items and the title and text scroll a bit because of what appears to be a change in font size and/or placement, but the ad space above the title is already reserved, so it doesn't scroll down.

But that's another pod, now let's deal with the behaviour of the ads.Solutions for reserving ad block spacesIn searching for the best and quickest solution, I found that adding a minimum height value to a wrapper (div) around each of the ad blocks to reserve that space and prevent scrolling after loading was the way to goHowever, it seems that it is not enough to just use a class to point to this CSS property, but also to use an ID for the wrapper. It seems that, for some unknown reason, Google AdSense JavaScript removes the minimum height directives from any parent object. However, they are not removed if you use an ID for CSS targeting.This is explained here summarised and somewhat more detailed in the Google documentation. As this solution seemed to be a pain, as I had to check all the blocks, I kept looking for an alternative until I found what worked for me Ad Inserter. These were the steps.Changing adaptive ads to fixed size

The first thing was to stop using adaptive ad blocks. I changed all the blocks to fixed sizesAbout this decision you have to study and evaluate your specific case.Although Google claims that the adaptive ones generate more revenue (obviously because of the possibility of being able to show different sizes), this is quite elastic and can vary according to different scenarios. If you opt for the most popular sizes you will always be showing ads.

Disable size optimisation

Although the blocks are already supposed to have a fixed size, it is best to disable the option that allows Google to decide on its own the size of mobile ads. This option can be found in Adsense administration under Ads/Global Settings.This way we avoid surprises in case we have missed an ad that we have placed by hand. In any case, just because they are a fixed size does not mean that they are no longer responsive.Reserving space for ads with Ad InserterAd Inserter is, I think, the best plugin for ad management, which can even be used to add other contentTo reserve space for each ad, just go to "Display" and define the width and height of each block. Troubleshoot CLS and Adsense issues 6

If you use su pRO versionyou can also check Lazy Load, which also tends to help alleviate the LCS a bit more.And while you're at it, you can make sure you don't have missing dimensions in the images, this can also be fixed in a number of ways. Some quick and easy ones are using Perfmatters o WP Rocket (both for a fee).