Cumulative Layout Shift is a new metric in Google PageSpeed Insights, and Google Webmaster Tools. It measures how much the layout of a page jumps around, particularly during loading.

Poor CLS performance is reported in the Webmaster console, and Google will presumably penalise websites where CLS is above their recommended maximum of 0.25.

Visual Stability is important, because it reduces user frustration as they are scrolling down a page. This is a user-centric metric. Google is trying to encourage you to make your website as user-friendly as possible.

This article explains how to reduce your CLS if you have Google AdSense Responsive Ad Units on your website. This method can also work for other ad networks.

How is CLS Measured?

CLS is measured by the quantity of layout shift that happens at any point during the life of the page. Google measures CLS as a fractional number, with any score <= 0.1 being very good. Scores < 0.25 need improvement, and >= 0.25 is considered very poor and in need of immediate remidiation.

CLS is also measured separately across Desktop and Mobile layouts. You may have a perfect CLS score on desktop, but need a lot of work on mobile.

The CLS number is calculated by the impact and quantity of movement of objects between frames on the page.

Why does AdSense cause CLS issues?

Google AdSense has been pushing Responsive Ad Units for quiet some time. These ad units perform better than their fixed size counterparts because they can adapt to the correct screen size and intelligently bid to optimise the revenue.

However, these ad units all load with 0px height, and then expand to the correct size once the ad bidding and ad loading has taken place. In some instances, this can take seconds. The causes elements on the page jump around, thus pushing up your CLS score.

If you have an ad unit high up on the page (e.g. near the page title), this will likely contribute to a high CLS score because this empty ad position is within the viewport early on, and thus visible when it loads and pushes the rest of the page down.

How to fix Google AdSense CLS

There isn’t a lot of information on the internet about how to solve this, but thankfully it’s not too tricky.

The best method is to add a min-height value to a wrapper around each of your ad units.

However, using a class to target this CSS property isn’t enough – you will need to use an ID to target this wrapper.

For some unknown reason, Google AdSense’s Javascript strips out min-height directives on any parent objects. However, they do not strip this out if you use an ID to do the CSS targeting. I don’t know why, but it is what it is.

These CSS and HTML example show you a very simple method of fixing CLS with AdSense:

Find the actual maximum ad unit heights for each viewport size on your site, and setup your media queries appropriately. This particular example is very simple, because it’s a header banner and and Google only seems to target two different ad units based on desktop/mobile viewports.

If a smaller ad unit ever appears here, it’ll work fine too – but we will just have some blank space on the page.