Fixing Cumulative Layout Shift (CLS) Adsense Issue

, , Leave a comment

Cumulative Layout Shift is a new Core Web Vital metric in PageSpeed Insights by Google. The main purpose of the metric is to find out the shifts occurring in Layout of web pages while loading.

If your CLS average score is above 0.25 then you have to reduce the CLS because it might cause in poor ranking in Google. Your page should be more user friendly on smartphones. CLS is a user-friendly metric so, visual stability is most important factor.

How Google Adsense causes CLS ?

If you are using Google Adsense auto-ads then you are in big trouble. But we have some tips for you to get rid of CLS. The main reason behind the CLS caused by Adsense is responsive ads. As the webpage loads Adsense advertisements, the shift of the content starts.

We will take an example of a website called apkproz.com which provides free Android apps and games. We will analyze the Disney Plus app download page. Then we will find out the exact CLS issue caused by Adsense.

Cumulative Layout Shift
Cumulative Layout Shift Example

Google Adsense loads the ads on the page in between the content or above the content. That can causes jump in original content when the ads are loaded. Ads are on top section of page could cause more CLS score. Because of the main content of the page will move down when ads are loaded.

How to fix Cumulative Layout Shift caused by Adsense ?

CLS(Cumulative Layout Shift) Fix 1 :

Add CSS class to wrap Adsense Ad units with height attribute. Remember you have to optimize the Ad units for Desktop and Mobile by using some fixed width ad units.

.ad-wrap {
	min-height: 266px;
}
@media screen and (min-width: 40em){
	.ad-wrap {
		min-height: 200px;
	}
}
<div class="ad-wrap">
<!-- Adsense Code goes here... -->
</div>

CLS(Cumulative Layout Shift) Fix 2 :

This is not going to reduced CLS 100% but you will get some points less. Just try to turn off Auto Ads and Optimization.

CLS Fix 2

Posted in SEO.

 

Leave a Reply