Lazy Load AdSense Ads - Complete Guide

I have been optimizing my website for one month and when I started optimization of my website I was shocked when I saw that my website is having very high load time and in GTmatrix my website page load grade was C.

Before that, I never tested my site in any loading speed testing tool and I started optimizing my site to lower its load time so that it will rank in the Google search engine.

While doing the optimization I saw that AdSense ads were the main factor that was making my website load slower and it was such a hard task for me to resolve this issue because AdSense ads are also very important to load. After research, I found a solution to lazy loading responsive AdSense ads which helped me a lot.

The technique that I used to lazy load AdSense ads is in this article you can also implement this lazy loading technique for your AdSense ads to load them only when they are required not at the page load time.

Before the optimization my website speed grade was C but now you can check my website load time and its grade will be approximately A and 90% scores.

There is a simple plugin available in jquery version or in vanilla JS version, you can use any which will help you to lazy load your AdSense ads with responsiveness.

There are many advantages of using this lazy loading plugin for AdSense ads but first of all, let me tell you the problems that you face if you don't use this login.

AdSense Ads Before Using Lazy Load:

AdSense Ads After Using Lazy Load:

If you are not using this plugin then your AdSense ads will automatically load when your website's web page is loaded and all the AdSense ads are loaded simultaneously at the same time.

The ad size is decided on page load and if the user changes the orientation of their device then the ad size will not be changed, it will remain the same which is decided at the page load time. That doesn't sound good! Is it?

Using this lazy load responsive AdSense ads plugin you can also set up auto impression functionality on your ads using any event like a click, scroll, resize, or any other event by using destroy method. Don't worry about it I am going to tell you all about it.

Issues Without Lazy Loading Adsense Ads Plugin:

Now, in short, these are some issues that you may face if you are not using this lazy load responsive Adsense ads plugin.

• Your website load time will be very high.
• Ad size will not be adjusted if the user changes the orientation of their device.
• You cannot destroy ads if you want.

The solution for all the problems listed above is using this lazy loading responsive AdSense ads login no matter where the AdSense ad is, above or below the viewport it won't get loaded on page load and it is only loaded if the ad is in view.

This plugin also helps to resize AdSense ads when the user changes their screen or device orientation. You can also reload the banners at particular breakpoints using this plugin.

The plugin itself is not too much longer a piece of code it's a very tiny or short piece of JavaScript code that is available in two versions, vanilla JS and jQuery.

The global function name for the plugin name is adsenseloader.

You can download the js files from the links below.

adsenseloader.js no dependencies (IE 9+) 1.1KB when minified and gzipped. jquery.adsenseloader.js jQuery dependency 835 bytes when minified and gzipped.

Initialization:

To initialize this plugin use the following code.

// vanilla
var instance = new adsenseLoader('.adsense'); // accepted argument types: Selector String, Element, NodeList, Array
 
// jQuery
$('.adsense').adsenseLoader();

Default Options:

The default options or configurations that are used in this plugin are you can customize them according to your requirements, the description is also provided.

var options = {
    laziness: 1,
    /*
        @int (<=0)
        This sets the laziness of loading the ads: (viewport height) * laziness. For example:
        0 – ad load starts when at least a tiny part of it gets in the viewport;
        1 – ad load starts when the distance between the ad and the viewport is no more than the height of the viewport;
        2 – 2x viewports, etc.
    */

    onLoad: false,
    /*
        @bool
        A callback function is fired when the ad is fully loaded.
        A single argument (object) of the ad element is passed. For example:
        onLoad: function( ad )
        {
            alert( ad.getAttribute('data-ad-slot') + ' ad is loaded');
        }
    */
};

// vanilla
var instance = new adsenseLoader(".adsense", options);

// jQuery
$(".adsense").adsenseLoader(options);

Destroy Method/Function:

As I have told you at the beginning of this article that this plugin also has a destroy method or function which performs the functionality as its name indicates, it destroys the ads and brings back the corresponding DOM fragment to the default state or in simple this function will help you to reload your AdSense ads.

// vanilla
var instance = new adsenseLoader('.adsense', options);
 
instance.destroy(); // Destroys All Ads
// or
document.querySelectorAll('.adsense')[0].adsenseLoader('destroy'); // Destroys First Ad

// jQuery
$('.adsense').adsenseLoader(options);
 
$('.adsense').adsenseLoader('destroy'); // Destroys All Ads
// or
$('.adsense').eq(0).adsenseLoader('destroy'); // Destroys First Ad

Other Global Variables / Options:

These are some other options that are globally used in this plugin you can also customize them but the defaults are provided below.

var options = {
    scriptUrl: "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",
    /*
        @string (url)
        URL for Google Adsense's executive script file
    */

    throttle: 250,
    /*
        @int (milliseconds)
        This defines how often the plugin should make calculations during the processes such as resize of a browser's window or viewport scroll.
        250 means that this happens 4 times in a second.
    */
};

// vanilla
adsenseLoaderConfig(options);

// jQuery
$.adsenseLoaderConfig(options);

So after the initialization of this plugin and adding the JavaScript code on your website now it's time to add HTML code so that you can implement your AdSense ads on your website.

You simply have to create an element with class adsense because adsense is the class that is used in the above script for your ease please use the following code which is provided below.

HTML Markup:

<div class="adsense">
  <ins data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></ins>
</div>

Now here comes controlling the size of your AdSense ads and we will do it using CSS. There is the CSS code, we have used CSS media queries to make your AdSense Ads responsive to every device.

CSS Markup:

.adsense {
    width: 970px;
    height: 90px;
    display: block;
}
.adsense:before {
    display: none !important;
}
.adsense ins {
    width: 100%;
    height: 100%;
    display: block;
}

@media screen and (max-width: 1024px) {
    .adsense {
        width: 728px;
        height: 90px;
    }
    .adsense:before {
        content: "1024";
    }
}

@media screen and (max-width: 800px) {
    .adsense {
        width: 468px;
        height: 60px;
    }
    .adsense:before {
        content: "800";
    }
}

Now AdSense will automatically serve ads that have dimensions according to the given dimensions in the above CSS code and using media queries and pseudo-element ::before we will guide the plugin when the ads should be loaded.

Ads sizing job is split into two branches in which CSS is the logic and JavaScript is used for execution.

If you want to see the demo of lazyload responsive AdSense ads you can view my website ads, right on this page.

If you want to show multiple AdSense ads in different sizes you can also do that but for that, you have to provide logic using CSS.

Below is the HTML code for two sized AdSense ads, one is a leaderboard for which our element will have adsense--main class name and the other is inside the sidebar with adsense--side class name with their particular styles you can use any if you want.

HTML Markup:

<!-- HTML code for Leaderboard -->
<div class="adsense adsense--main">
<ins data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></ins>
</div>

<!-- HTML code for Sidebar Square -->
<div class="adsense adsense--side">
<ins data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></ins>
</div>

CSS Markup:

.adsense:before {
    display: none !important;
}
.adsense ins {
    width: 100%;
    height: 100%;
    display: block;
}

.adsense--main {
    width: 728px;
    height: 90px;
}
.adsense--side {
    width: 336px;
    height: 280px;
}

@media screen and (max-width: 1024px) {
    .adsense--main {
        width: 468px;
        height: 60px;
    }
    .adsense--main:before {
        content: "1024";
    }
}

@media screen and (max-width: 800px) {
    .adsense--side {
        width: 250px;
        height: 250px;
    }
    .adsense--side:before {
        content: "800";
    }
}

Indicating Add Loading Process:

If you want to indicate the loading process of AdSense ads you can do that in multiple ways by providing a placeholder image, adding a text, border, background color, or anything else that meets your requirement. This placeholder will be shown when your ad is not loaded; when it is loaded, this placeholder will be automatically removed.

For the indication of the loading process of your AdSense ads, you can use the code which is provided below.

HTML Markup:

<div class="adsense">
  <ins data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></ins>
  <p class="adsense__loading"><span>Loading...</span></p>
</div>

CSS Markup:

.adsense {
    position: relative;
}
.adsense__loading {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: table; /* for vertical centering */
    position: absolute;
    top: 0;
    left: 0;
}
.adsense--loaded .adsense__loading {
    display: none;
}

.adsense__loading span {
    text-align: center;
    vertical-align: middle; /* for vertical centering */
    display: table-cell; /* for vertical centering */
}

Using a callback function onload we can add a class adsense--loaded to our parent element which is responsible for hiding the AdSense loading element or placeholder.

Javascript Markup:

// vanilla
var instance = new adsenseLoader(".adsense", {
    onLoad: function (ad) {
        if (ad.classList) ad.classList.add("adsense--loaded");
        // IE 10+
        else ad.className += " " + "adsense--loaded"; // IE 8-9
    },
});

// jQuery
$(".adsense").adsenseLoader({
    onLoad: function ($ad) {
        $ad.addClass("adsense--loaded");
    },
});

In the above example codes, you have to replace your AdSense client ID and also your AdSense ad slot ID also try adding all the attributes that are given by Adsense in ins tag when you generate Ad Code.

After using this plugin your website speed will be optimized which will help you to rank higher in Google search results and get more traffic.

Compress the codes before using them so that you will not face any errors or difficulties.

Wind UP:

Now here this article ends up. I hope that I have covered all the topics and all the questions related to lazy load responsive AdSense ads.

If you still have any kind of issues you can comment on your problems in the comment section below I will be waiting for your comments and reply as soon as I can.