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

How to Setup Lazy Load for Google AdSense Ad units?

1 2.345.175

- Advertisement -

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.

- Advertisement -

Để lại bình luận

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

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

1 bình luận
  1. OkeABC Nói

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