How to Setup Lazy Load in Google Adsense Ads Responsive Unit

On This Page,You can easily know about How to Setup Lazy Load in Google Adsense Ads Responsive Unit.

Google Adsense is a program is run by Google. The program allows the publishers around the Google network of content sites to offer automatic text, video, images, advertisements to name a few. All of this is directly targeted towards the site content and the audience.

Why Lazy Load Google Adsense

Lazy loading may be a popular web-design pattern. It essentially loads an object (the ad during this case) when the user gets to it by scrolling the page. So your page will stop loading after important and above the fold elements are finished. If the user wants to navigate more, new objects will load in real-time.

By lazy loading Google Adsense, you’ll take some pressure of the initial loading process. making it easier for the page to load and for users to possess a fast check out the location , and take actions consistent with what they see. Maybe they need to click on the navigation bar. Why load the footer ad for them anyway?

Instruction for Setup Lazy Loading for AdSense

Naturally, this is how an original ad unit code look.

code 1

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, within the lazy loading method i’m getting to change the ASYNC method to real DEFER. The AdSense script will start downloading in browser, just one occasion window will complete loading the most website . during this way, visitor don’t need to await seeing whole page quickly for the AdSense.

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

All you would like to follow below two Steps

First of all, remove belowscript from all existing ad units.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Now it will appear like this

<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>

After then, add below JavaScript code in your Theme Footer, possibly just before the body tag.

Method 1. onload event

Hint: Noptimize tag is present to form compatible with Autoptimize. it’ll prevent aggregating AdSense lazy loader inline JS.

<!--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-->
  • Above code, you’ll use via Theme option if available for adding custom script
  • For Genesis, make use via Genesis Simple Hooks plugin with option genesis_after
  • or Header and Footer plugin for the other theme.
genesis

What does this script exactly do?

This script will make sure that your AdSense Ad unit will start loading and appear after finishing the entire loading of your main website . That’s why I named it, Lazy Loading for Google AdSense.

Method 2. onscroll event

This approach will load ad unit once user scroll your website .

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

I hope this help you in improving performance of your site.

The Easy Way: Install Better Ads Manager

Better Ads Manager is one among the most popular WordPress ads plugins and with 120+ ad locations, Adsense Compatibility, Adblocker detector, and AMP support has the features to match its reputation.

The most recent update of higher Ads Manager comes with lazy loading Google Adsense as a default. you’ll enable it easily through the plugin’s options. To enable lazy loading for Adsense take the subsequent steps:

lazy loding ads
  • In WordPress admin panel, open Better Ads options.
  • Open Ads Manager
  • Click on Lazy Loading Ads (picture above)
  • Set Lazy Load Ads? to Yes, Lazy load all Ads

That’s it!

Leave a Reply