How to Add Lazy Load AdSense in Blogger?

How to Add Lazy Load AdSense in Blogger

Do you want to Add Lazy Load AdSense in Blogger? Follow the below steps carefully to Add Lazy Load AdSense in Blogger, using this lazy load you can accelerate your blogger website speed, first let's understand What is Lazy Load and How this script works.

What is Lazy Load?

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.

How this Script Works?

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?

  1. When users open your website, then the website will not request the adsbygoogle.js library.
  2. Even when the website completely loads, it will not show ads and request ads library
  3. But when the user scroll your web page, then it will request Javascript
  4. So by this, Load Ads After Page Load.
  5. That's it

Now, let's apply it and check the loading time of your website.

What is the effect of Lazy Loading on Seo?

Google has always been advising publishers to increase the speed of their websites. They have always released many tools and articles to help website owners improve the speed of their sites. To improve the speed of a website, Google suggests delaying the loading of off-screen images.

This is possible to do with the use of the Lazy Loading Technique. Because images are usually the largest part of the web page and which has a big impact on the speed and SEO of a website.

Generally, Google has always adopted confidentiality regarding the factors of ranking. But, when it comes to a site's speed, Google has publicly stated that site speed is a ranking factor for mobile search. Lazy loading technology is a useful script to make sites load faster on mobile devices.

How to Add Lazy Load AdSense in Blogger?

I will guide you to Add Lazy Load AdSense in Blogger, Ok, let’s begin!

Step 1. At first, you need to go to the Blogger dashboard i.e. Blogger.com.

Step 2. Go to the Themes Section and Click Edit HTML Button.

Step 3. 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 4. Copy the JS Code given below.

<script type='text/javascript'> 
//<![CDATA[ 
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 5. Paste the HTML Code just above the </body> tag.

Step 6. Change the marked section with your AdSense Publisher ID.

Step 7. Click on Save! and you're done with adding lazy load AdSense in blogger.

    PRO's and CON's of Lazy Loading

    Before implementing Lazy Load AdSense in blogger, you should carefully consider the pros and cons for your programming and website users.

    Here are some of the advantages of Lazy Load AdSense in blogger:

    • Lazy Loading strikes a balance between optimizing the delivery of content and simplifying the user experience.
    • Users can view the content of the page very quickly.
    • Due to faster page loading, leads to better conversions and higher revenue for e-commerce sites.
    • Use of less bandwidth, which translates into cost savings.

    Some of the disadvantages of Lazy Load AdSense in blogger are as follows:

    • Additional lines of Javascript to implement lazy loading, combined with existing code, make it more complicated.

    FAQ

    • Lazy loading is an exercise of loading the content of a web page, which makes it useful to improve the performance of the system and save your resources. The advantage of lazy loading is that it reduces the initial loading time of a webpage.

      Lazy loading reduces the weight of web pages and contributes to faster loading.

    • A Lazy Loading Image means the slow loading of images on websites, this means that if a user does not scroll the webpage completely, the images at the bottom of the page will also not load.
    • As the name suggests, the content is loaded continuously as the user scrolls the web page. As the user scrolls through the page, the images in the viewport are replaced by thumbnails and after a specified number of images are displayed, a button pops up allowing the user to load additional images.

    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.