How to Lazy Load Adsense Ads? Why Lazy Load Adsense? Revenue Uplift?

0 668

Lazy Loading Ads is a set of techniques in web and application development that defer the loading of Ads on a page to a later point in time – when those Ads are actually needed, instead of loading them up front. These techniques help in improving performance, better utilization of the device’s resources, and reducing associated costs.

What Happens When you Lazy Load Adsense Ads?

Lazy loading Adsense demo: Ads are loaded only when it is visible or about to be visible. It loads only required ads and save resources.

Lazy Loading defers the loading of an Adunit that is not needed on the page immediately. An Ad, not visible to the user when the page loads, is loaded later when the user scrolls and the Ad actually becomes visible. If the user never scrolls, an Ad that is not visible to the user never gets loaded.

It carries two main advantages.

1. Performance Improvement

This is the most important one for you as a website administrator – better performance and load time.

With lazy loading, you are reducing the number of Ads that need to be loaded on the page initially. Lesser resource requests mean lesser bytes to download and lesser competition for the limited network bandwidth available to the user. This ensures that the device is able to download and process the remaining resources much faster. Hence, the page becomes usable much sooner as compared to one without lazy loading.

2. Cost reduction

The second benefit for you is in terms of delivery costs. Ads delivery, or delivery of any other asset js or css, is usually charged on the basis of the number of bytes transferred.

As mentioned earlier, with lazy loading, if the Ad is not visible, it never gets loaded. Thus, you reduce the total bytes delivered on the page, especially for users that bounce off the page or interact with only the top portion of the page. This reduction in bytes transferred from your delivery network reduces delivery costs. This will become more apparent as we explore lazy loading further.

What Happens when you not use Lazy Load Adsense Ads? Eager Loading…

Adsense Ads without Lazy load demo: When lazy loading is not used, all Adsense ads are loaded at once wasting resources, even the ads at the bottom are loaded.

When you do not use Lazy load all Ads, Images & Widgets are loaded at once, It is known as eager loading, When they load they compete for bandwidth and device’s resources website speed may be affected.

How to Lazy Load Adsense?

Google Adsense does not provide a direct way of lazy loading, but you can use some open source javascript libraries to achieve lazy loading of Adsense ads.

1 LazyHTML

LazyHTML is an ultimate solution for Lazy Loading Adsense ads, LazyHTML is not limited to only Adsense Ads, it can Lazy Load any Ads from Any Adnetworks.

LazyHTML can be made to lazy load Adsense by wrapping the adcode and loading LazyHTML code from a cdn.

Basic Usage:

Load the Script: This includes lazyhtml javascript and adsbygoogle.js by Google Adsense, You must replace the ca-pub-xxx with your publisher id.

You must add the following Lazyhtml & Adsense script into Head section of your website.

<script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyhtml.min.js" crossorigin="anonymous" debug></script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxx" crossorigin="anonymous"></script>

Wrap the Adsense code with LazyHTML wrapper. You must wrap each and every Adsense codes in your website.

<div class="lazyhtml" data-lazyhtml>
  <script type="text/lazyhtml">
  <!--
  <ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXX"
     data-ad-slot="YYYY"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
  -->
  </script>
</div>

2 LazyAdsense

LazyAdsense is one of the open-source library that can be used to Lazy Load Adsense Ads, the drawback of Lazy Adsense is it can only Lazy load Adsense ads and code conversion is required.

Related Links:

Basic Usage:

Load the Script: This includes lazyadsense javascript and adsbygoogle.js by Google Adsense, You must replace the ca-pub-xxx with your publisher id.

You must add the following Lazyadsense & Adsense script into Head section of your website.

<script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/adsense-lazyload.min.js" crossorigin="anonymous"></script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxx" crossorigin="anonymous"></script>

Convert the typical Adsense Code into LazyAdsense Code.

Instead of using the typical Adsense code, you must convert it to LazyAdsense tag, Like in the example down below.

This is a typical Adsense code.

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXX"
     data-ad-slot="YYYY"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

You should rename the tag ins into div and rename adsbygoogle to lazyadsense as the example below.

LazyAdsense Tag.

<div class="lazyadsense"
     style="display:block"
     data-ad-client="ca-pub-XXXXXX"
     data-ad-slot="YYYY"
     data-ad-format="auto"
     data-full-width-responsive="true"></div>

Convert all Adsense code and use the Converted code instead of typical Adsense code, So you all of your Adsense Adunits can be lazy loaded.

Leave A Reply