It’s the last part of our Stage 3 optimization research. And we are going to perform some actions to remove blocking behavior of AdSense blocks (and any other advertisement as well).

What is blocking JavaScript

Here is a very good article from Steve Souders about how JavaScript blocks web page rendering and how this can be prevented. For our website such blocking behavior can be illustrated the following way:

As you can see here AdSense (googleads.g.doubleclick.net) prevents our pictures to be downloaded (and actually stops page rendering).

How to prevent it

We can just move all our JavaScript libraries to the very bottom of the page (all — counters, jQuery, MooTools, etc, etc). And browser will load them only after the other content of the page will be rendered. Generally it’s good only if you have some libraries which don’t perform document.write code. And what is case of Google AdSense?

Almost every dynamic advertisement network (this can be rich media ones, and context ads, and so on) uses document.write to inject a part of DOM tree (it can be also an iframe) directly to advertisement placeholder. In case of iframes this can be tolerably – because they download all resources in parallel. But browser every time stops to get the initial JavaScript file, and page ‘freezes’ for a while. What is not good.

And how can we handle such dynamic ads?

Dynamic ads — dynamic unblocking

First of all we definitely can load ads in the bottom of the page. But we have a trouble here — we need to move them to initial placeholders. So we can use a piece of JavaScript code to perform this (actually we are just removing blocking behavior, not building a complex system to load all dynamic assets on the web page in a special order).

For example for AdSense we have the following JavaScript code:

<script type="text/javascript"><!--
google_ad_client = "pub-xxxxx";
google_ad_slot = "xxxxxxx";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

We need to use here a placeholder with the same height (to prevent content jumping when we inject actual advertisement back). As far as we have here height of 60 pixels we can use

<div id="placeholder" style="height:60px"></div>

And in the end of our HTML document (just in footer) we should write the following:

<div id="sourcecode"><script type="text/javascript">... google code here...
</script></div>

<script type="text/javascript">(function() {
var a=document.getElementById("sourcecode"),
b=document.getElementById("placeholder").parentNode;
b.innerHTML=b.innerHTML.replace(/
<\/div>/i,a.innerHTML);
a.parentNode.removeChild(a)
}())</script>

The first part of this code just consists of AdSense code (which is listed above) enveloped by a container. The second part is a dynamic replacement our placeholder (with a given height) with our advertisement. If you have several different ads — you just need to use different pairs of sourcecode/placeholder for them. That’s all.

Automation and actual results

There is the only WordPress plugin which implements the above logic — it’s WEBO Site SpeedUp. It has about 40 default patterns for known ads and counters.

Actual result from this magic is non-blocking JavaScript. The figure below shows our website load waterfall. As you can see some advertisements are loaded even after onDOMready event (blue line here) is fired.

Conclusion

Depending on ads number and their placement you can significantly improve your website usability and prevent content rendering blocking with AdSense (and any other advertisement) delayed loading.

Related Posts

• February 19, 2010 -- Best practices performance – does it matter? (0)
• January 17, 2010 -- Less files – faster website, but how much? (2)