Lazy Load Adsense – The Best Solution For Your Website Performance

  • Whatsapp
ads

 

Generally the method used to load ads so as not to affect the performance of the website/blog is to apply lazy load to fish (adsense), therefore here I will give a fairly complete review of lazy load adsense.

What is Lazy Load Adsense?

Lazy load adsense is a lazy loading or smart loading script on adsense ads to reduce the impact of third party code on the website and maintain optimal website performance.

There are several methods for making smart loading on adsense ads including Ad event listeners, Event-based ad requests and Lazy loading, all three of which can be referred to as lazy load adsense.

Why Should You Use Lazy Load Adsense?

Currently there is no better method than lazy load adsense to solve all kinds of website performance issues caused by third party ads.

There are many things that can be solved with lazy load adsense, related to website/blog performance problems, including:

  1. Third party webfont load
  2. JavaScript execution time
  3. Main-thread work
  4. Impact of third party code, etc

That’s why in my title tag it says, lazy load adsense is the best solution for the performance of websites or blogs that are installed with third-party ads.

Immediately I will share the lazy load adsense script with all of you, there are two lazy load adsense scripts that I will share and both lazy load scripts are equally good for maintaining the performance of your website and also support auto ads.

1. Lazy Load Adsense Script (Original)

<script type=”text/javascript”>//<![CDATA[
var adsenseLazyload=false;window.addEventListener(“scroll”,function(){(0!=document.documentElement.scrollTop&&false===adsenseLazyload||0!=document.body.scrollTop&&false===adsenseLazyload)&&(!function( ){var e=document.createElement(“script”);e.type=”text/javascript”,e.async=true,e.src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle .js”;var a=document.getElementsByTagName(“script”)[0];a.parentNode.insertBefore(e,a)}(),adsenseLazyload=true)},true);
//]]></script>

2. Lazy Load Adsense Script + ca-pub (publisher id)

<script type=”text/javascript”>//<![CDATA[ var adsenseLazyload = false; window.addEventListener(“scroll”, function(){ if ((document.documentElement.scrollTop != 0 && adsenseLazyload === false) || (document.body.scrollTop != 0 && adsenseLazyload === false)) { (function() { var ad = document.createElement(‘script’); var att = document.createAttribute(‘data-ad-client’); att.value = ‘ca-pub-3776322894567500’; ad.setAttributeNode(att); ad.async = true; ad.src = ‘https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js’; var sc = document.getElementsByTagName(‘head’)[0]; sc.parentNode.insertBefore(ad, sc); })(); adsenseLazyload = true; } }, true) //]]></script>

The second lazy load adsense script also supports auto ads, but if you want to use this lazy load adsense script, you have to replace ca-pub-3776322894567500 with your own publisher id or ca-pub adsense.

Instructions for Using Lazy Load Adsense

How to use the lazy load adsense script is very easy, you only need to install one of the lazy load adsense script codes in the head or body of the website, then remove all adsense javascript library tags from the website/blog template.

If you are a beginner, please install the lazy load adsense script before or above the closing body code, namely </body>, then remove all adsense javascript library tags from your blog template.

Adsense JavaScript Library

<script async=”async” src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”/> atau library javascript versi terbaru <script async=”async” data-ad-client=”ca-pub-1234567890123456″ src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”/>

The adsense lazy load script only works well if there is no adsense javascript library or bundle other than the one that has been embedded in the adsense lazy load script.

If you are a blogspot user (blogger.com), avoid checking Show Ads Between Posts from the main blog, because it will create an adsense javascript bundle or library in your blog template which causes the adsense lazy load script to not work optimally.

The point is when you use the lazy load adsense script, the installation of the adsense ad code is no longer accompanied by an adsense javascript bundle or library.

Example of Installing Adsense Ad Code Without JavaScript Library

<ins class=”adsbygoogle” style=”display:block” data-ad-client=”ca-pub-1234567890123456″ data-ad-slot=”1670232759″ data-ad-format=”auto”></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

How the Lazy Load Adsense Script Works

Lazy Load Adsense is completely different from lazy load images because basically lazy load adsense is a scroll event listener, the adsense javascript library in the lazy load adsense script will only be loaded or run when the user scrolls your page.

And that means that adsense ads will only appear when the user scrolls through your blog or website, if there is no page scrolling activity from the user, the ad will also not be loaded (not displayed).

Lazy Load Adsense From Adsense Policy Side

Google is very open to implementing lazy loading on their ads (adsense), Please see the google help center entitled “Viewability best practices”. On that page, Google recommends the use of lazy load adsense or also known as smart loading.

That means Google doesn’t care about the use of lazy laod adsense. But according to google the best practice of implementing lazy load adsense is to use the Google Publisher Tag (GPT).

Reference

  • https://developers.google.com/publisher-tag/samples/ad-event-listeners
  • https://developers.google.com/publisher-tag/samples/lazy-loading
  • https://support.google.com/admanager/answer/6199883?hl=en
  • https://www.cordialblogger.com/2021/04/lazy-load-adsense.html

Related posts