Google AdSense: Reducing Cumulative Layout Shift (CLS)

Cumulative Layout Shift is a new metric in Google PageSpeed Insights and Google Search Console. It measures the extent to which a web page’s layout shifts around, particularly whilst it is loading.

Poor CLS performance is displayed in the Webmaster Console, and Google is very likely to penalise web pages with a CLS above the recommended maximum of 0.25, causing them to rank lower.

The visual stability of a website is important, as users may otherwise become frustrated if the content keeps changing whilst they are using it. This makes CLS a user-centred KPI.

Google would like you, as a website operator, to make your website as user-friendly as possible.

Google AdSense, in particular, often results in higher CLS values on websites. The following article therefore explains how you can reduce your CLS if you display responsive Google AdSense ad units on your website.

This method may also work for other advertising networks.

How is the CLS measured?

The CLS is measured based on the amount of layout shift that occurs at any point during the page’s lifetime. Google measures CLS as a fractional value, with any value less than or equal to 0.1 considered very good. Values below 0.25 need to be improved, and values above 0.25 are considered very poor and should be improved as a matter of urgency.

CLS is also measured separately for desktop and mobile layouts. You may have a perfect CLS score on desktop, but your layout on a smartphone may have a poor CLS score.

The CLS figure is calculated based on the impact and volume of movement of objects between frames on the page.

Why does AdSense cause CLS issues?

Google AdSense has been promoting responsive adverts for some time now. These ad units perform better than fixed-size versions, as they adapt to the correct screen size and can place smart bids to optimise revenue.

However, these ad units are all loaded with a height of 0px and then expand to their correct size once the bidding process has taken place and the advert has loaded. In some cases, this can take a few seconds. This causes the elements on the page to jump around and shift position, which in turn drives up your CLS score.

If you have an ad block at the very top of the webpage (e.g. near the page title), this is likely to contribute to a poor CLS score, as this empty advert space is located early in the viewport and is therefore visible as it loads, causing the rest of the page to shift downwards.

How to fix Google AdSense CLS

Fortunately, it isn’t all that complicated to sort this problem out.

The best approach is to add a value for the minimum height to a DIV container surrounding each of your ad blocks. However, it is not enough to use a class to set this CSS property – you must use an ID to define this wrapper.

The Google AdSense JavaScript removes the minimum height rules for all parent elements. However, these are not removed if you use an ID for CSS targeting.

These CSS and HTML examples show you a very simple way to fix CLS with Google AdSense:

Determine the actual maximum heights of the ad units for each viewport size on your website, and set up your media queries accordingly. The example chosen here is very simple, as it involves a header banner and Google appears to be targeting only two different ad units based on desktop and mobile viewports.

If a smaller advert block were to appear here, this method would also work – though it would leave an empty space on the page.