Cumulative Layout Shift is a new metric in Google PageSpeed Insights and Google Webmaster Tools. It measures how much the layout of a web page jumps around, especially during loading.
Poor CLS performance will show up in Webmaster Console and Google will very likely penalize websites that have a CLS above the recommended maximum of 0.25 and let them rank lower.
The visual stability of a website is important, otherwise users can get frustrated when using a website and the content is constantly changing. This makes the CLS a user-centric KPI.
Google wants you, the website owner, to make your website as user-friendly as possible.
Google AdSense, in particular, often causes higher CLS values on websites as well. Therefore, the following article explains how you can reduce your CLS when you place responsive Google AdSense ad units on your website.
This method can also work for other advertising networks.
How is the CLS measured?
The CLS is measured by the amount of layout shift that occurs at any point during the life of the page. Google measures the CLS as a fractional number, where any value less than, equal to 0.1 is considered very good. Values below 0.25 need to be improved, and values above 0.25 are considered very bad and should be improved urgently.
The CLS is also measured separately for desktop and mobile layouts. You may have a perfect CLS value on desktop, but your layout has a poor CLS value on smartphone.
The CLS number is calculated based on the impact and amount of movement of objects between frames on the page.
Why does AdSense cause CLS problems?
Google AdSense has been pushing Responsive Ads for quite some time. These ad units perform better than fixed-size versions because they can adapt to the right screen size and bid intelligently to optimize revenue.
However, these ad units are all loaded with a height of 0px and then expand to the correct size once bidding and ad loading have taken place. In some cases, this can take a few seconds. This causes the elements to jump around and shift on the page, which in turn drives up your CLS score.
If you have an ad unit high up on the web page (near the page title, for example), this is likely to contribute to a poor CLS score, as this empty ad position will be early in the viewport and therefore visible when it loads, pushing the rest of the page down.
How to fix Google AdSense CLS
Fortunately, it is not too complicated to fix this problem.
The best practice is to add a minimum height value to a DIV container around each of your ad units. However, it's not enough to use a class to set this CSS property - you must use an ID to set this wrapper.
Google AdSense's Javascript removes the minimum height guidelines for all parent objects. However, they are not removed when you use an ID for CSS targeting.
These CSS and HTML examples will show you a very simple way to fix CLS with Google AdSense:
In CSS
In HTML
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 because it's a header banner and Google only seems to be targeting two different ad units here based on desktop/mobile viewports.
If a smaller ad unit should appear in this place, this method will also work - but there will be an empty space on the page.
Christian Waske
Managing Director & CRO expert
Christian is Managing Director of Golden Web Age GmbH and an expert in search engine optimization. With his knowledge, he has already been able to place many well-known companies on page 1 of Google.
