How to Use Lazy Loading for Adsense Ads to Improve your Page Speed

On This Page,You can easily know about How to Use Lazy Loading for Adsense Ads to Improve your Page Speed.

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 targetted towards the site content and the audience.

What is lazy loading?

Lazy load may be a technique that defers the loading of an object until it appears within the visible area of your visitor’s browser. This feature is employed by plugins like WP Rocket to implement images or videos on websites without ruining their page speed.

Advanced Ads Pro also provides a lazy load feature, but it’s not limited to pictures and videos only. you’ll use it for all types of injected content. The feature is out there as an option within the settings of all ad placements.

Why should you defer (some) ad loading processes?

Why do you have to load single elements later than others? Lazy loading can help page speed optimization, save your visitors’ bandwidth, and improve the user experience. Since its effect is objectively measurable, search engines may additionally honor your improved page speed.

Ad networks like AdSense don’t load simple image files only you inject their code. These ads call an external domain to load multiple files, perform checks, track impressions, and eventually show the visible ad content on your website. This process repeats for each single ad unit.

lazy loding page speed

Some webmasters attempt to double their revenues by injecting more ads. In my experience, it’s not worthwhile . The visitor’s span is restricted and won’t increase with a better total amount of ads. the sole thing that increases needless to say is that the load time of your website.

As you’ll see within the following example, one AdSense unit increases the load time between 140ms and 200ms. are you able to estimate what happens to your page speed if you’d inject a dozen of such ads into your site?

The effect of lazy loading on page load time and revenues

The following mini case study illustrates how the wise use of Lazy Loading may result in better performance and better ad revenues. I already optimized my example page with the plugin WP Rocket before analyzing the lazy loading impact.

Two AdSense units are placed under the page header and at rock bottom of every article. you’ll also see some affiliate links within the content area and a number of other self-hosted image ads within the sidebar.

In the following, i will be able to focus only on the AdSense unit at the post bottom because there wouldn’t be any advantage in enabling lazy loading for the header ad above the fold.

I used Pingdom to live the page load time and ran a dozen tests for this case study. the typical load time of the already optimized page was about 740ms. After enabling lazy load for the post bottom ad, it dropped below 540ms.

An improvement of 200 ms doesn’t sound earth-shattering, but that’s a load time boost of quite 25%. I achieved it by just delaying one single ad unit. confine mind that the more ads you’re injecting into your page, the upper the impact of lazy loading on the load time.

Lazy loading, ad revenues, and what you ought to concentrate to

Besides the positive effect on the page speed, I noticed better Active View rates of these blocks with the enabled lazy loading feature. This improvement may result in higher ad revenues for Active View campaigns in AdSense.

If you sell ads per impression, please concentrate to the very fact that deferred loaded ads will get only tracked if displayed on the page. Very eager users who rarely reach the top of your articles won’t trigger such an impact . So you ought to expect a touch lower number of ad impressions when using lazy loading than you’d estimate supported your traffic.

But that doesn’t need to be an obstacle . there’s no better argument within the current debate about click fraud, bot traffic, and unreal viewability than using lazy load for ads and not selling bloated ad impressions.

Improve page speed with lazy loading images

It’s no secret — pages that load faster rank higher in SEO, have lower bounce rates, and drive better engagement together with your site visitors. One web asset that’s notorious for slowing down your site are images. to assist your pages load faster, Google also officially recommends lazy loading for images in their developer documentation. Lazy loading helps pages have a faster initial load time by deferring the loading of images until the page visitor scrolls to the image.

To help you abide by best practices, and improve your page speed and SEO ranking, we’ve made it so you’ll easily enable lazy loading for your images on your pages.

Here’s how it works:

If you’re using the default image module, simply add the image module to a page, and choose lazy loading within the ‘image loading’ toggle.

lazy image loding

If you’re employing a custom module that contains a picture field, loading options are going to be shown by default, but are often hidden by a developer if they might prefer that option not be shown within the editor. When the loading options control is shown, the default is about to “Lazy.”

If you’re adding a picture within an upscale text module, these images are going to be set to lazy load by default. to show off lazy loading, select the module, click on the pencil icon to edit, click on the “advanced” tab of the image editing popover, then select “default”.

Note for developers: this implementation on the image field and module use the loading attribute, which uses native browser based lazy loading. This update shouldn’t conflict with custom coded implementations that enable lazy loading.

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.

How to enable lazy loading on your WordPress site

To use lazy loading for ads, you first need to install and activate Advanced Ads Pro. Afterward, you can enable this module in Advanced Ads > Settings > Pro.

lazy load

When you enable the lazy load module, you can define when the ads should begin to load. Set the number of pixels before they are visible on the user’s screen. In the last step, activate the function for the placements you want to load your ads deferred. That’s it!

Leave a Reply