Tweet

Non-blocking Google Adsense ads: improve page speed

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!

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	No
IE8 & IE9 (preview)	No	Scripts, Stylesheets, Images
Firefox 3.0	No	No
Firefox 3.6+	No	Scripts, Stylesheets, Images
Chrome 3+	No	Scripts, Stylesheets, Images
Safari 4+	No	Scripts, Stylesheets, Images
Opera 10	No	No
iPhone & iPad	No	Scripts, Stylesheets, Images

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.

Click for bigger version. View full test results on Webpagetest.org

• The HTML and stylesheet are loaded first, as expected
• Then, the Adsense JavaScript file is loaded, parsed and executed (show_ads.js), which results in 3 more JavaScript files being fetched from Google servers (items 4, 5 and 6).
• Once the browser is done processing these 4 .js files, the actual ad is retrieved from a Google (Doubleclick) server (item 7) and the first content images are downloaded

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:

• Create an empty <div> where you want the ad to appear
• At the bottom of the HTML, place the original Adsense code inside another <div>
• Directly after the 2^nd <div>, add 2 lines of JavaScript that will insert the ad in the 1^st <div>

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 ...

• The ad will push already rendered content downwards or sideways, once it loads. This is annoying because it interrupts scanning/reading the page and you have to re-focus on the page.
• Browsers will have to do a reflow and this takes time. Always prevent browser reflows if possible.

<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 2^nd <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 1^st 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:

• The ad doesn't slow down the loading and rendering of the web page
• There is no risk of the ad causing big load time problems (when Google servers are down or slow)

Here's the waterfall chart for the test page with the optimized code.

Click for bigger version. View full test results on Webpagetest.org

You should notice two things:

• The first content images start downloading much sooner. Hooray!
• IE starts downloading that first Adsense .js file (show_ads.js) pretty soon, even though the script file is at the bottom of the HTML. You would expect the browser to first download all images because these are higher up in the HTML. However, since the browser has already parsed the entire HTML (and built the DOM tree), it can start processing that .js file. And this actually helps page performance. If you look closely, you can see that while the browser is connecting to the Google server, it starts downloading 2 more content images (items 6 and 7). And because these images finish downloading before the Adsense script file is fully downloaded, IE can start downloading the next 2 images. Yeah, parallel downloading!

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:

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

• Official Google Adsense blog
• What is a non-blocking script? (by Nicholas Zakas)
• Browser script loading roundup (by Steve Souders)
• Performance analysis of Adsense ads (by Steve Souders; more techy)
• Original source of the solution

Comments