Troubleshoot CLS and Adsense issues

 
  • ES
  • JA
  • PT
  • RU
  • CN
  • DE
  • FR
  • 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.

    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 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.

    Looking at

    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.

    Troubleshoot CLS and Adsense issues

    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.

    Troubleshoot CLS and Adsense issues

    Video

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

    Troubleshoot CLS and Adsense issues

    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.

    Troubleshoot CLS and Adsense issues

    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

    However, 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

    Troubleshoot CLS and Adsense issues

    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

    Troubleshoot CLS and Adsense issues

    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.

    Troubleshoot CLS and Adsense issues

    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).

    Troubleshoot CLS and Adsense issues

    Or the plugin Litespeed Cache if you host your blog on a Litespeed server.

    Troubleshoot CLS and Adsense issues

    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.


    Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad