Have you noticied how many times you have to wait for ads loading before being finally able to read the content of a website? In fact, ads such as Adsense are very slow to load, which is definitely not good for websites owners because it can result in user boredom or even worst, the use of an adblocker.
In this article, I’m going to show you how you can load your Adsense ads at the bottom of your page and then replace it using jQuery.

The problem with adsense

[tweet]The main problem with Adsense ads (and more generally, all ads that load the same way) is that they do not use any loading manager, which means that the user browser will have to execute the ad script when it is called in the source code.

Imagine that a blog post have an ad just before the content: Before being able to display the content on the screen, the browser have to execute the ad script and load external resources such as images, styles or even worst, flash files, before the user can finally read your content.

Considering that fact, it is pretty easy to guess that if you have many ads, a single page of your website can take a while to load. A slow website is always a bad thing because your visitors don’t like to wait.
If your ads are taking to much time to load, your visitors will either stop reading your blog or use an adblocker and “steal” your content.

Building an Adsense loader

Enought talk, it is now time to code a bit! As many of you are not developers, I’ll try to keep the things as simple as I can.

The first thing to do is to create divs to embed your ads. Those container can then b styled using CSS.
In this example, a notice will be displayed before the ad has been loaded.

Paste the following code where you’d like you ad to be displayed. Don’t forget to modify the parameter within brackets with your own Adsense info.

<div id="ads-[ads_id]" class="ads [ads_format]">
    Advertisment
</div>

What we’ve done is pretty simple: We created a container with:

• An unique id: We will use it to load our Adsense ad within it.
• A ads class: It will allows us to give a style to the container while ads are loading.
• A ads_format class: used to specify the ad format (250*250px, 468*60, etc…)

Now, let’s apply some CSS styling:

 .hide {
  display: none;
}

.ads {
  background-color: #F4F4F4;
  color: #666666;
  font-size: 11px;
  text-align: center;
  text-transform: uppercase;
}

.square250 {
  height: 250px;
  line-height: 250px;
  width: 250px;
}

.banner468 {
  height: 60px;
  line-height: 60px;
  width: 468px;
}

Once you added the css styles, we are now ready to insert the Adsense code.
Paste the code at the end of your html file (or, if you’re using WordPress, in the footer.php file)

<div class="hide">
    <!-- Ads -->
    <div id="adsref-[ads_id]">
        <script type="text/javascript">
google_ad_client = "pub-[client_id]";
google_ad_slot   = "[slot_id]";
google_ad_width  = 250;
google_ad_height = 250;
        </script>
        <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
    </div>
</div>

Each ad is inclued in a div with the id adsref-[ads_id] which “link” the container with the ad.
The ad itself isn’t displayed (using the CSS class hide): in fact, there’s no interest to display ads at the bottom of the page, even if it is just for 2 or 3 seconds.

Now, we only have to create the ad loader, which will move the ads on their respecive containers once the page has been loaded.
In this example, I’m using the jQuery framework.

$(function() {
    var $ads;
    $('div[id^="adsref-"]').each(function() {
        $ads = $('#ads-' + this.id.substr(7)).empty();
        $('ins:first', this).appendTo($ads);
    });
});

That’s all. Now your ads will be loaded only when your page is loaded, which is a very good thing for a more usable website.

This article is a translation of the article “Optimiser le chargement des AdSense” from Pioupioum. If you read French, there’s a lot of good tips on his blog!