How To Add Lazy Load AdSense In WordPress And Blogger

Home Page / Lazy Load Adsense

In this article you will read:

How to Add Lazy Load Adsense In WordPress And Blogger

Do you want to add Lazy Load AdSense to WordPress and Blogger? Follow the steps given below carefully to add Lazy Load AdSense, by using this Lazy Load you can speed up your WordPress and Blogger website, then let’s first understand what is Lazy Load and how this script works.

What Is Lazy Load?

Lazy load is a technique that prevents items on a website from loading before they appear in the visitor’s field of view. This method keeps the loading time of a website to a minimum and improves its performance. So ultimately, it will help your website to improve speed performance and loading time. Due to which the speed performance of your page or post increases immensely. Due to which visitors and traffic remain strong on the website.

How does this script work?

When users visit your website, it does not load AdSense ads and even request AdSense JavaScript. Before this, you may find many Lazy Load Ads Script for your website but in some cases it doesn’t work for me. So with some modification and a little trick this lazy load AdSense script can be used in blogger. For WordPress, you can find dozens of plugins.

So, after using the script, it will load the ads after the page loads completely. Better not to use onload event listener, we used scroll event listener. So how does it work?

When users open your website, the website will not request the adsbygoogle.js library.

Even when the website is fully loaded, it will not show ads and request the ads library

But when the user scrolls your web page, it will request the Javascript

So it loads the ads after the page loads.

That’s all Lazy Load does.

Now, let’s implement it and check the loading time of your website.

What impact does Lazy Load have 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.

It is possible to do this with the use of Lazy Loading technology. Because images are usually the largest part of a web page and have a big impact on website speed and SEO.

Generally Google has always maintained secrecy regarding ranking factors. But, when it comes to the speed of a site, Google has publicly stated that site speed is a ranking factor for mobile search. Lazy loading technique is a useful script for making sites load faster on mobile devices.

Now we will guide you to add Lazy Load AdSense in Blogger, there are total 7 steps in it, let’s get started!

Step 1. First of all, you have to login to Blogger.com then go to Blogger Dashboard.

Step 2. Now go to Theme section and click on Edit HTML button in Customise.

Step 3. Now remove the below script tag wherever you have inserted it in your website template.

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

Step 4. See Step 4 of WordPress below for further process.

Now we will guide you to add Lazy Load AdSense in WordPress, there are total 7 steps, let’s get started!

Step 1. First of all, you need to login to wordpress.com then remove the below script tag from your website template wherever you have placed the Adsense code.

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

When we create an Adsense ad, it will look like the following.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxx"
     crossorigin="anonymous"></script>
<!-- Format-1 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxx"
     data-ad-slot="123456"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Step 2. Now go to Admin dashboard, then go to Appearance> Theme File Editor> footer.php> and find tag.

Step 3. If you are using any plugin like AD Inserter, Advance Ad, etc. then open it and go to Header And Footer section and then open Footer section.

Step 4. Now copy the below JavaScript code.

<script type='text/javascript'> 
//<![CDATA[ 
var LazyLoadAds = 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);
        })();
        LazyLoadAds = true;
    }
}, true);
//]]> 
</script>

Step 5. Paste the HTML code just above the </body> tag. Please refer to the image below.

Step 6. Replace the marked section ‘ca-pub-xxxxxxxxxxxx’ with your AdSense publisher ID.

Step 7. Then click the Save or Update File button! Now you are done adding Lazy Load AdSense to your WordPress and Blogger.

Consider the pros and cons of Lazy Loading

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

Lazy loading strikes a balance between optimizing the delivery of content and simplifying the user experience.

Users can view the page content much faster.

Faster page loading leads to better conversions and higher revenue for e-commerce sites.

Less bandwidth usage, which results in cost savings.

The additional lines of JavaScript to implement lazy loading, combined with the existing code, make it more complex.

Support

Then friends, I guess you must have easily remembered how to add Lazy Load AdSense in WordPress and Blogger through this article, if you still have any kind of problem then you can contact us anytime or comment through the box given below, thank you!

Go Home