Hãy nhìn lại cuộc sống của bạn.

How to Setup Lazy Load for Google AdSense Ad units?

4 2,345,112

Google AdSense is a monetization program run by Google. It still the most reliable way to make money online for many publishers. One common problem publishers often face that Google AdSense affect our original blog speed. Due to not have control for optimizing resources, we just end up with feeling sad.

Like YouTube video thumbnail, they should be using WebP for ad units images. It’s ironic, that sometimes they do not bother to serve with GZIP compression, or keep resources minified. The massive resources and extra loads of many DNS lookup, kill our page speed like hell.

A few months ago, when I tweeted Ad unit speed problem, I didn’t get any satisfactory response. I am back myself with a solution that will prevent AdSense from slowing down loading of your original content.

Honestly, I am not personally a huge fan of the lazy load even for images. But still, I just want to share an option. If you like, you may try once if you are highly concerned with serving primary content first, before Ad Units.

1. Instruction for Setup Lazy Loading for AdSense

Have a look how original ad unit code look.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- leaderboard -->
<ins class="adsbygoogle"
 style="display:inline-block;width:728px;height:90px"
 data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
 data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Technical details: Basically what happens that it load in asynchronous form, means browser continue downloading adsbygoogle.js script without blocking the HTML parsing.

But here, in the lazy loading method I am going to change the ASYNC method to real DEFER. The AdSense script will start downloading in browser, once window will complete loading the main web page. In this way, visitor don’t have to wait for seeing whole page quickly for the AdSense.

For this purpose, you don’t need to make any big changes in your ad unit. Simply we will alter the style of loading adsbygoogle.js that will do all the magic.

All you need to follow below two Steps

  • First of all, remove below script from all ad units.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  • After then, add below JavaScript code in your Theme Footer, possibly just before the </body> tag
<!--noptimize-->
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
<!--/noptimize-->

Hint: Noptimize tag is to make compatible with Autoptimize plugin. It will prevent aggregating AdSense lazy loader inline JS.

  1. Above code, you may use via Theme option if available for adding custom script
  2. For Genesis, make use via Genesis Simple Hooks plugin with option genesis_after
  3. or Header and Footer plugin for any other theme.

2. What does this script exactly do?

This script will ensure that your AdSense Ad unit will start loading and become visible after finishing the complete loading of your main web page. That’s why I named it, Lazy Loading for Google AdSense.

4 bình luận
  1. depression causing vitamins Nói

    Very good post. I absolutely appreciate this site.
    Keep it up!

    1. OkeABC Nói

      Thank you so much. Glad you visited. Hope you come back often.

  2. minecraft hacks download free Nói

    That is appropriate, I’m speaking about getting yourself into that situation in whioch you didn’t refuse (when you ought to of, but you was just being
    friendly or attepting to keep tthe Peace) to your member and after this they may be running circles around you.
    It has a batle part that permitts yyou tto accumulate weapons to
    utilize itt to battle off of the block zombies who attack att
    night ass there are also a part that you have to perform some
    traveling around. The game has established a life of its own, with merchandise,
    popular culture references, parodies, or even a convention of dedicated fans that’s been wll attended in recent years.

Để lại bình luận

Địa chỉ email của bạn sẽ không được công bố.