Lazy Load Adsense to Improve Your Page Load Speed

As a good website administrator, you will try to improve the site’s page loading speed. Some of you may have installed or plan to install Google AdSense on your site. However, no matter how fast your site is, adding Google AdSense will reduce its load speed. Additionally, it could be two to five times (or even more) slower than without AdSense. Therefore, using lazy load on AdSense is one way to minimize AdSense’s impact on site page load speed.

Website speed vs. conversion trade-off

Before you use this optimization, you should understand its implications. Your website’s speed will improve at the expense of fewer AdSense impressions.

Figure 1. Web page load speed before and after installing AdSense (without lazy loading).

As the website’s speed improves, so will the user experience. However, we all know that Google AdSense will slow things down. So, you have the option of changing it or leaving it as is. You can optimize your AdSense if you are satisfied with the improvement and are willing to accept the consequences.

You may want to do some experiments to see if you benefit from using lazy loads. Still, it may take a long time before you can compare them. Here’s the steps:

Experiment 1: Install AdSense without lazy load on your site. Keep track of the earnings from AdSense and the average load speed within a few weeks or months.
Experiment 2: Next, implement lazy load on the existing AdSense code. Also, keep track of the earnings from AdSense and the average load speed in the same period as experiment 1.
Compare the earnings from AdSense and the average load speed from experiments 1 and 2 above. From that comparison, you can determine whether you need to use lazy load or not.

Lazy load using a plugin

Third parties offer lazy load plugins for content management systems (CMS) like WordPress. Few plugins you can choose are:

Ad Inserter has a lazy load feature in its paid version (Pro)
Advanced Ads has a lazy load feature in its paid version (Pro)
The free version of the Ad Inserter or Advanced Ads plugin combined with the Flying Scripts plugin.

Generally, implementing Lazy Load AdSense is easier with a plugin. You can set when and how AdSense ads start showing up. Is it a few seconds after the page loads? Is it when the visitor starts scrolling, clicking, or some other action? You can decide it without doing technical things like coding.

Lazy load using the manual way

Websites like Blogger don’t have plugin options for lazy loading. So the only option is to manually install lazy load AdSense.

AdSense code structure

Before you can optimize AdSense, you must first understand the structure of the ad unit code. Each AdSense unit code could be divided into three parts. Let’s call it “Ads JS library“, “Ads Unit Identifier“, and “Ads load command“. Then, the structure of the ad unit code is as follows:

<!-- Init Ads JS library -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- Ads Unit Identifier -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<!-- Init Ads load command -->
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

The Ads JS library is the core code of AdSense. All AdSense functions are available there. In fact, you only need one of them to cover an entire page.

The Ads Unit Identifier will then instruct Google on where and how to load the ads. This unit identifier represents the location where you want an advertisement to appear. If you want to show two ads, you must duplicate this identifier (e.g., before the content and in the sidebar).

And finally, Ads load command is the caller that will receive the ads. The quantity of this command must match the quantity of Ads Unit Identifiers.

So, in order to optimize this ad unit code, you must defer both Ads JS library and Ads load command. Therefore, you must run both after the initial page load and when the user begins to interact (e.g., scroll) with the page.

I discovered some code to create a lazy load for AdSense. However, this is insufficient, especially if you have Auto Ads enabled. So I combine and modify some existing recommendations to meet my needs.

The lazy loading of AdSense code

First, locate and remove the Init Ads JS library and Init Ads load command from all ad unit code structures in each of your AdSense code.

Therefore, the only component of each AdSense code is the Ads Unit Identifier. Leave this part untouched. So, the code will look like this:

<!-- Init Ads JS library (removed)-->

<!-- Ads Unit Identifier -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<!-- Init Ads load command (removed)-->

Second, please insert the following code at the end of your HTML, just before the </body> tag.

<!-- Defer Ads JS library -->
<script type='text/javascript'>
//<![CDATA[
/* Lazy Load AdSense*/
var lazyadsense = !1;
window.addEventListener("scroll", function() {
    (0 != document.documentElement.scrollTop && !1 === lazyadsense || 0 != document.body.scrollTop && !1 === lazyadsense) && (! function() {
        var e = document.createElement("script");
        e.id = "g_ads_js", e.type = "text/javascript", e.async = "async", e.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
        var a = document.getElementsByTagName("script")[0];
        a.parentNode.insertBefore(e, a)

      	/* only for AdSense Auto ads*/
      	var gads = document.getElementById("g_ads_js")
        gads.setAttribute("data-ad-client", "ca-pub-XXXXXXXXXXXXXXXX");

    }(), lazyadsense = !0)
}, !0);
//]]>
</script>

<!-- Defer Ads load command -->
<script>
    (adsbygoogle = window.adsbygoogle || []).onload = function () {
        [].forEach.call(document.getElementsByClassName('adsbygoogle'), function () {
            adsbygoogle.push({})
        })
    }
</script>

Look at lines 14 and 15 in the example above. if you have Auto Ads enabled in your AdSense site settings, Replace ca-pub-XXXXXXXXXX with your AdSense ID. Otherwise, remove both lines 14 and 15.

After that, please double-check your website. Make sure the ads only start loading after you scroll down the page.

Correction for cumulative layout shift

On May 18, 2020, Google updated its algorithm. It takes into account any alterations to the initial positions of the HTML elements. The cumulative layout shift (CLS) is the term used to describe this change in location. Consequently, it might influence the page’s SERP ranking. The user’s intended changes, however, have no effect on the CLS.

By using the code for Google AdSense lazy loading above, you may speed up the website. However, it will be disadvantageous to the CLS score. Because an HTML element containing AdSense has a height of 0 pixels before it is loaded. However, once the AdSense ads are loaded, the element’s height will change to around 280 px to 320 px. The initial position of all elements beneath AdSense will be moved down automatically. This could raise the CLS score above 0.5. The suggested maximum value, however, is 0.25 at most.

Therefore, it is necessary to change the code structure above. Search for all of your Ads Unit Identifier, then add the <div> </div> tags (lines 1 and 13) as shown below:

<div style="min-height: 280px;">
     <!-- Init Ads JS library (removed) -->

     <!-- Ads Unit Identifier -->
     <ins class="adsbygoogle"
          style="display:block"
          data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
          data-ad-slot="1234567890"
          data-ad-format="auto"
          data-full-width-responsive="true"></ins>

     <!-- Init Ads load command (removed) -->
</div>

However, if you use Ads Unit with fixed dimensions, you will need to adjust the minimum height of <div> above to match its height value. Suppose you have a 728x120px Ads Unit, then your <div> height should be <div style="min-height: 120px;">, as shown in the code below:

<div style="min-height: 120px;">
     <!-- Ads Unit Identifier -->
     <ins class="adsbygoogle"
          style="display:inline-block; width:728px; height:120px"
          data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
          data-ad-slot="1234567890"></ins>
</div>

Please take note that there won’t be any Ads Unit Identifier code if you only use auto ads. Therefore, if the CLS value is too high as a result of AdSense’s lazy loading, I do not yet have a fix. In that case, remove the lazy-load AdSense code and replace it with the original auto-ads code.

Cover image by freepik