ifabio.lifestream

Google Analytics unblocks the Web w/ Async support

December 2 2009, 3:21am

I heard a huge cheer from the Internet today and found that Google Analytics has launched async mode which finally unclogs our browsers from blocking. Steve Souders must have had the loudest cheer, and wrote up his view:

The pain of loading JavaScript files is that they block the page from rendering and block other resources from downloading. There are workarounds to these problems. Chapter 4 of Even Faster Web Sites describes six techniques for Loading Scripts Without Blocking. One of those, the Script DOM Element approach, is the technique used in the new Google Analytics async pattern. Google Analytics’ ga.js file is a perfect example of a script that should be loaded asynchronously - it doesn’t add any content to the page, so we want to load it without blocking the images and stylesheets that give users what they really came to see. Improved Uptime What happens if a script takes a long time to load, or fails to load? Because scripts block rendering, users are left staring at an empty page. Google Analytics has an amazing infrastructure behind it, but any resource, especially from third parties, should be added cautiously. It’s great that the GA team is evangelizing a pattern that allows the web site to render while ga.js is being downloaded.

To get going, simply change your ga script code to follow the pattern: PLAIN TEXT [removed]

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-XXXXX-X']);

_gaq.push(['_trackPageview']);

(function() {

var ga = document.createElement('script');

ga.src = ('https:' == document.location.protocol ?

    'https://ssl' : 'http://www') +

    '.google-analytics.com/ga.js';

ga.setAttribute('async', 'true');

document.documentElement.firstChild.appendChild(ga);

})();

It’s extremely cool to see this pattern being evangelized for such a major piece of the Internet. A few items of note:

Obviously, you have to replace “UA-XXXXX-X” with your ID.

Since ga.js is being loaded asynchronously, there has to be a way for web site owners to couple their desired GA functions with the code when it finishes loading. This is done by pushing commands onto the Google Analytics queue object, _gaq.

Once all your callback commands are queued up, the ga.js script gets loaded. This is wrapped inside an anonymous function to avoid any namespace conflicts.

Inside the anonymous function is where we see the Script DOM Element approach being used - with two nice improvements. A ’script’ element is created and its SRC is set to the appropriate ga.js URL. Looking ahead to support of asynchronous scripts in HTML5, the ‘async’ attribute is set to ‘true’. Very nice! The main benefit of this is it tells the browser that subsequent scripts can be executed immediately - they don’t have to wait for ga.js. The last line adds the script element to the DOM. This is what triggers the actual download of ga.js. In most of my code I do document.getElementsByTagName(”head”)[0].appendChild, but that fails if the document doesn’t have a head element. This is a more robust implementation.