Lazyload Adsense

Becoming a Google Adsense publisher is certainly the desire of most bloggers, so as to be able to earn additional or main income through blogs.

{jistoc} $title={Table of Contents}

After being successfully approved as a google adsense ad publisher, of course there are still steps that must be taken in order to start earning on the blog. 

That is, starting from installing an adsense ad unit on every blog page or post, as well as how to set the right adsense ad position so that you can get a lot of ad clicks from visitors.

But as we know, after installing an Adsense ad unit on a blog, it will affect the loading speed of the website, thus becoming slower.

This can be checked and seen using the help of Google PageSpeed ​​Insights or GTmetrix tools.

After checking, it will be clear that one of the causes of the blog being heavy is the scripts from each Adsense ad unit that is installed on the blog.

To overcome this, there are various things that can be done so that the loading of the blog does not become increasingly heavy. 

In addition to limiting the number of ads that run, we can also use the most effective way, namely by installing the Lazy Load Adsense script. 

Now for those of you who don't know what lazy load adsense is and its function, you can first read the following explanation.

What is Lazy Load Adsense? 

Lazyload Adsense is a plugin or javascript that functions to optimize the loading speed of a blog by delaying the appearance of Adsense ads on the blog pages. 

By using this Lazy Load Adsense script, the ads that are installed on the blog become slightly blocked, and will appear when the user scrolls the screen to the place where the ad is placed. 

This of course, will make the blog page lighter at the time of initial loading because it does not immediately load all existing ads.

Actually, the way this script works is almost the same as Lazy Load Image which I will discuss in a later post.

The only difference is that the adsense ad script uses JavaScript that is called externally. Example code like this:

<script data-ad-client="ca-pub-xxx" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>{code}

Later, the JavaScript above will be changed to Lazy Load AdSense. Therefore, if you want to use lazy load adsense, the first thing you have to do is delete all scripts like the ones above from your blog. 

Because basically lazy load adsense will not work if the default script from Google Adsense is still installed.

How to Install Lazyload Adsense on Blogger

If you are ready to use Lazy Load Adsense on your blog, you can immediately follow the steps below:

1. First of all open your Blogger Dashboard.

2. Then go to Theme ➤ Edit HTML.

3. After that, press CTRL + F, then enter the keyword pagead2.googlesyndication.com to find the Google AdSense default script code as below.

<script data-ad-client="ca-pub-xxx" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>{code}

4. Delete all the scripts if there is more than one.

5. Then press CTRL + F again to find the code </body>.

6. Copy the Lazy Load Adsense Script below.

<script async='async' data-cfasync='false' defer='defer' type='text/javascript'>
//<![CDATA[
// Lazy Load Adsense by Jisler.com
var lazyadsense=!0;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!0===lazyadsense||0!=document.body.scrollTop&&!0===lazyadsense)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxx";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
//]]>
</script>{code}

7. And place it right above the </body> code.

8. Replace all xxx with your Adsense publisher ID. 

IMPORTANT!: If you want to add a new ad unit code, make sure to copy the code from <ins class="adsbygoogle" to the bottom, so the JavaScript above it doesn't need to be reinstalled. An example of the installation is as follows:

<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxx" data-ad-slot="xxx" data-ad-format="auto" data-full-width-responsive="true"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});</script>{code}

So that's the steps to install lazy load Adsense on Blogger or Blogspot, make sure you do each of the steps above properly and correctly so that you don't experience damage to the blog template. And to prevent things you don't want, you can backup your theme first.

After installing the script, don't forget to check whether it's working or not. 

You can try to access the blog that you have installed lazyload adsense on, to know whether the ads that appear have been successfully rendered before scrolling. 

You can check your blog on Pagespeed Insights or GTmetrix to see the page speed score before and after installing this lazy load script.

Conclusion

That will be all on How to Install Lazy Load Adsense on Blogger / Blogspot, hopefully this post can be useful for you. 

Also don't forget to subscribe to Jisler blog to get other interesting and useful articles on your email.

John | Author

    Get our latest blog updates in your inbox

    Recent Posts