Tabla de contenidos
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 changes
In 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.
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 dynamically
Paradoxically, 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 scrolling
Now 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.
The 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 Console
In 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 extension
You 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.
After 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 spaces
In 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 go
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 sizes
About 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 Inserter
Ad Inserter is, I think, the best plugin for ad management, which can even be used to add other content
To reserve space for each ad, just go to “Display” and define the width and height of each block.
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).
Or the plugin Litespeed Cache if you host your blog on a Litespeed server.
If all has gone well, in a few hours you’ll see the CLS drop in the field reports and in a few days in the lab reports from PageSpeed Insights.