How To Lazyload AdSense Ads In Blogger

In this article, I will show you how to implement Lazyloading of Adsense Ads on your Blogger. Follow these steps carefully to achieve successful implementation.

Let's first understand what is lazyloading and why it's recommended. Lazy loading is a technique that allows images and videos to load only when they are needed. This improves the page speed of Blogger.

What is Lazyloading Adsense?

Lazy loading is an optimization technique that delays the loading of heavy scripts until the user needs them. Instead of loading the entire page at once, we load only the required script for displaying the above-the-fold content. This approach can significantly improve the page load time and overall user experience.

If a user loads a webpage and only reads the first few lines before clicking "back", then any images, videos, and ads that load below the visible portion of the page are essentially wasted resources, as the user did not scroll down to see them. To prevent this, you can implement a technique called lazy loading, which defers the loading of these elements until they are actually needed. This can help to speed up page load times and reduce resource usage. 

So, it's time check this out now and edit your preferred videos tension-free! Your site will not slow down no matter what you edit from now on.

Adsense is one of the main reasons for slow page loading speeds and loads unnecessary JavaScript when a page loads. 

How does Lazyload Adsense work?

When you implement the Lazyload Adsense script on your website, it will delay the loading of ads and only load the critical requests necessary to show the page. As soon as the user starts interacting with the page, such as scrolling down, the Adsense code will begin to render in the browser, and your ads will show up on the page.

The PageSpeed Insight tool does not detect the loading of the Adsense script as it only loads when the user interacts with it. 

In this way, you can reduce your total page size and load the page faster on Mobile devices with a slow internet connection. 

Learn how to improve your Blogger website loading speed by installing the latest Lazyload Adsense script.

How to Lazyload Adsense In Blogger?

To Lazyload Adsense in Blogger, follow the below steps carefully. 

Step 1: Go to the Blogger dashboard and click on the Theme section. 

Step 2: Now take a backup of your theme and click on Edit HTML. 

Step 3: Remove all previous Adsense code from your blogger theme.

Step-4: Now copy the below code and replace it with your own Adsense publisher ID.

<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>

Step-5: Now save your Adsense code and your lazyload AdSense in add to Blogger website.

After the page loads, all your Adsense ads will load, leading to a significant boost in your page loading speed.

Important steps for the functioning of Lazyload Adsense

For the proper functioning of this Lazyload Adsense script, there are a couple of important steps you need to follow.

Click on the Earning Tab in the Blogger dashboard and disconnect Adsense to ensure proper lazy loading. Otherwise, the AdSense code will load again and lazy loading will not work correctly. 

You only need to include the Adsense javascript file once in your Blogger website, so remove any duplicate portion from the manual AdSense ad unit code. 

On the website, remove the highlighted part from every Manual ad unit to prevent the Lazyload script from malfunctioning.