Non-blocking Google Adsense ads: improve page speed

Adsense releases non-blocking Adsense!
Yes, it happened, finally: Google has released a new version of the Adsense show_ads.js file that loads in a non-blocking way. Per today, March 18 2011, Google serves it to Chrome, Firefox and IE8 browsers and support for more browsers is coming. As a bonus: publishers do not have to change their code! Read the Google Code blog post about the new Adsense code

Important: Will Alexander posted a comment about the failure of this trick: it may (and often will) result in double impressions for ads served to visitors with Gecko (Firefox) and WebKit (Chrome) browsers. Do Not Use This Trick!!!

Google Adsense for Content ads block the rendering of the page, if you use the default ad code (as Adsense provides it). In all browsers, but especially in IE6, IE7 and IE8, this has a real negative impact on the user experience.

The Adsense code snippet is not optimized for performance. On a page with a single ad, the code delays page rendering by 0.3 to 0.5 seconds, and this goes up when the Adsense servers are slow.
In this article I explain the problem, show & discuss test results and provide the solution, including the optimized code that you can use on your site!

Note: Google is currently working on a new, smart way to load Adsense for Content ads in webpages in a fast, non-blocking fashion. I've seen Google engineers present about this at the 2010 Velocity Web Performance conference and it looks very promising. That's 2 months ago and I have no idea when the new code will become available. So, if you want to improve the user experience on your site today, read on and use the optimized code. Please read the update at the top of this page: Adsense officially released the new, non-blocking code.

The problem

The Adsense for Content code loads a JavaScript file from a Google server, and does this in a way that blocks the loading and rendering of your webpages.

Let's take a look at the code:

<script type="text/javascript">
google_ad_client = "pub-6714325395728247";
google_ad_slot = "1214663382";
google_ad_width = 728;
google_ad_height = 90;
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

The problem lies in the last part:

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Looks normal, right? Sure, most websites load external JavaScript files this way.
But that doesn't make it right.
This script tag causes the browser to block. What it blocks depends on the browser. The table below shows - for all important browsers - how the browser behaves when it encounters this Adsense script tag.

Browser Continues rendering Downloads other objects in parallel
IE6 & IE7 No
IE8 & IE9 (preview) No
Firefox 3.0 No
Firefox 3.6+ No
Chrome 3+ No
Safari 4+ No
Opera 10 No
iPhone & iPad No
The problem is biggest in IE6, IE7, Firefox 3.0 and Opera 10 because these browsers will basically not do anything else while the external JS file is downloaded, parsed and executed. On many pages, IE8 will behave just as badly because it cannot download images in parallel with the JavaScript file and often that is the only type of object it actually could download.

Is the problem big? Yes

I created a simple test page to find out what impact the Google Adsense for Content code really has on page rendering and user experience. The page consists of 1 external CSS file, a single Adsense ad at the top of the page, followed by 8 images. I uploaded the page and all objects to my server in The Netherlands and ran several tests on the awesome Webpagetest.org (a great free web performance test tool for Internet Explorer). Webpagetest.org offers several test locations and I chose the Amsterdam test location with 3000 kbps downstream and 500 kbps upstream speeds.

Tests on IE7 and IE8 show the problem is significant: the Adsense ad slows down the page by approximately 0.4 seconds.

To better understand where this 0.4 second delay comes from, let's take a closer look at how IE7 loads the test page.
Google Adsense - slow page load time - IE7 waterfall chart
Click for bigger version. View full test results on Webpagetest.org

The negative impact on page load time is clearly visible. IE7 doesn't start loading the first PNG image (album.png) until the browser is done loading, parsing and executing the 4 (!) Adsense JavaScript files.
Now imagine that the Google server is down or really slow. This would cause that first Adsense .js file to block the rendering of the page and - in many browsers - block the loading of other page objects. Your page load times could increase big time!

The solution

There is a simple, cross-browser way to load the Adsense ad without blocking the page (credits to Rufal)
In a nutshell:

1. Create an empty DIV

Create an empty <div> where you want the ad to appear on the page. Or, if you already have a <div> with your Adsense code inside, simply remove the Adsense code.
Important: set the correct width and/or height (using CSS like style="height:60px;") for this <div>. If you don't ...

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

2. Place Adsense code in another DIV, at bottom of page

By 'the bottom of the page' I actually mean the bottom of your HTML. Paste the Adsense code right before the closing </body> tag. As a result, the ad will be loaded inside this <div>.
Not to worry ... step 3. will take care of putting the ad right where you want it: inside that first empty <div>.
Important: make sure this <div> is a block element. By default, a <div> is just that, but you may have some CSS that specifies otherwise. The quick 'better-safe-than-sorry' solution is to add style="display:block;" to this 2nd <div>

<div id="adsense-loader" style="display:block;">
<script type="text/javascript"><!--
google_ad_client = "pub-6714325395728247";
google_ad_slot = "5223628649";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

3. Add JavaScript code to insert the ad into 1st DIV

All the code does is find the <div> with ID adsense and cut & paste the contents of the adsense-loader <div> in it.

<script type="text/javascript">
var loader = document.getElementById('adsense-loader'); 
document.getElementById("adsense").appendChild(loader);
</script>

The solution works in all browsers, including IE6.
As I expected, the blocking effect is gone. This has two benefits:


Here's the waterfall chart for the test page with the optimized code.
Google Adsense - fast optimized code - IE7 waterfall chart
Click for bigger version. View full test results on Webpagetest.org

You should notice two things:

Visual comparison

Will the user really notice the difference? Judge for yourself. Compare how the 2 test pages load, by viewing this awesome side-by-side comparison video:

Please install Flash.

Go ahead, test this way of loading and showing Adsense for Content ads on your own site. You may expect lower page load times, which helps improve the user experience, conversion and Google rankings.

Your feedback please!

I'm looking forward to receiving your questions and remarks.
Do the Adsense ads slow down your pages? Have you implemented this solution? Does it work, or not? Do you know of an alternative/better solution?
Leave your comment below (now comment), send me a message via Twitter or via email: aaron {at} aaronpeters {dot} nl.

Like it? Share it!

Links

Comments