Lazy Load Adsense The Best Solution For Your Website Performance

Performance-optimized blogs or websites will eventually drop when advertised by third parties such as Adsense and other digital advertising. To avoid that, a special method is needed to load ads so that loading or website performance is maintained.

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 Adsense Lazy Load

Lazy Load Adsense - The Best Solution For Your Website Performance

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 to make 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.

{tocify} $title={Table of Contents}

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>{codebox}

Lazy load script supports auto ads and effectively solves all website performance problems from third-party impacts.

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>{codebox}
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 it ca-pub-3776322894567500with your own adsense publisher or ca-pub id.

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 on heador bodyon a 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 </body>, namely , 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"/>

or the latest version of the javascript library
<script async="async" data-ad-client="ca-pub-1234567890123456" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"/>{codebox}
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-1234567891012345"
     data-ad-slot="1670232752"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>{codebox}

How the Lazy Load Adsense Script Works

Lazy Load Adsense is completely different from lazy load images because basically lazy load adsense is 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 for 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

Post a Comment

Previous Post Next Post