How to Lazyload Adsense Ads for Blogger to Website performance

Lazyload AdSense plugin is a simple and lightweight plugin that allows you to place your Google AdSense script without affecting your website page speed. Want to see the live result with real test?

© Proclud Design | Lazyload Adsense

What is Lazyload?

Lazy load is a technology that prevents objects on a website from getting loaded before they appear in the visitor’s visible area. This method keeps the loading time of a website at a minimum and improves its performance. Therefore ultimately, it will help your website to improve speed performance and loading time.

Why yo use Lazyload?

When users visit your website, it doesn't load AdSense ads and even requests AdSense Javascript. Earlier, you may find many Lazy Load Ads Script for your website, but it doesn't work for me in some cases. Therefore with some modification and a small trick, this lazy load AdSense script can be used in blogger. For WordPress, you can find dozens of plugins.

Therefore, After using the script, it will Load Ads after page load entirely. Not using the Onload Event Listener better, we used Scroll Event Listener. So how it works?

How to Lazyload Adsense?

Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon next to 'customize' button.

Step 4: Click Edit HTML, you will be redirected to editing page.

Step 5: Remove the below script tag wherever you find it in your website template.

<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'><script>

Step 6: Copy this JavaScript Code given below.

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

Step 7: Change the code ca-pub-xxxxxxxxxxx with your AdSense Publisher ID like this ca-pub-5277469738841.

Step 8: Now add the following JavaScript Code just above to </body> tag. If you don't find it, it is probably already parsed which is </body>.

Step 9: Save the changes by clicking on this icon

Thank you.

Conclusion

So friends, how did you guys like this post on How to Add Lazy Load AdSense in Blogger? Now you must understood How to Add Lazy Load AdSense in Blogger.

Tell us how you felt about this article on How to Add Lazy Load AdSense in Blogger? by writing a comment so that we too can have a chance to learn and improve something from your ideas.

© Copyright:
www.procluddesign.com