Blogger4Ever

In this tutorial, I will show you how to LazyLoad Adsense Ads on Blogger blogspot website. So, follow the steps carefully to implement lazy load properly on your blogger website. So, before that let's understand what is lazyloading and why it is important to increase page speed of blogger.

Optimized blogs or websites will eventually drop when advertised by third parties such as Google Adsense and other digital advertising. To avoid that, a special method is neended to load ads so that loading of website performance is maintained. Generally, the method used to load ads so as not to affect the performance of the website or blog is to add lazy load Adsense Ads.

What Is Adsense Lazy Load

Lazy load adsense is a lazy loading or smart loading script on adsense ads to reduce the impact of third party code on website and maintain optimal performance. This will allow all adsense ads on your website to load after other elements on your website and when user scroll on web page ads in that area will be load.

For example, if a user loads page and read first few lines and go back. So, here images, ads and videos that load below the webpage are wasted as the user doesn't scroll the page. So, by Lazyloading Images, ads and videos you can save resources and load page faster. Adsense is one of the main reason for slow loading speed and loads unnecessary javascript when a page loads.

How Lazy Load Adsense Script Works?

This script converts all Adsense ads on your website into lazyloading Adsense Ads. ads will be display only when user scroll down webpage and ads start to appear one by one. This will make your blogger website more resource-intensive. So the composite speed of your website will definitely increase.

So let's check how you can increase your blogger loading speed by installing the latest lazy Load Adsense Ads Script on your Blogger website.

Important Steps for the Proper Functioning of Lazyload Adsense Ads.

There are a couple of important steps that you need to follow for proper functioning of this lazyload adsense script.

1. Go to Blogger Dashboard and click on Earning Tab here you have to disconnect Adsense. Otherwise, it will load the Adsense code again and lazy loading will not work properly.

2. Next, go to Theme Section and click on Edit HTML and remove a certain portion from all manual adsense ad units from homepage, posts and pages of your blogger website..

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxxxx"
crossorigin="anonymous"></script>

Here, you have to remove the highlighted part from every manual ad unit used on the blogspot website. Otherwise, it may overnight the Lazyload Script.

How To Lazyload Adsense Ads In Blogger

1. Go to your Blogger Dashboard and go to Theme section.
2. First backup your theme and click Edit Html Option.
3. Next, Remove all previous Adsence Ads Code on your Blogger theme.
4. Copy the script below and Replace your Google Adsence Publisher ID (ca-pub-xxxxxxxxxxxxxxxx)
5. Press Ctrl+F and Find </body> Paste script above the </body> tag.

<script type='text/javascript'>
//<![CDATA[
var lazyadsense2 = false;
window.addEventListener("scroll", function(){
if ((document.documentElement.scrollTop != 0 && lazyadsense2 === false) || (document.body.scrollTop != 0 && lazyadsense2 === false)) {
(function() { var ad = document.createElement('script'); ad.setAttribute('data-ad-client','ca-pub-xxxxxxxxxxxxxxxx'); ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();
lazyadsense2 = true;
  }
}, true);
//]]>
</script>

6. Now Save your Template. Lazy Load Adsense Ads Added to your blogger website.

You might also like: How To Add Lazy Load Images In Blogger To Improve Page Speed
How To Fix 404 Error Page (Not Found) In Blogger Blog