lyncd

Better Google Analytics JavaScript that doesn’t block page downloading

If you saw Steve Souders’ March 5 talk at Google and have ever used Google Analytics, then you were probably amused when he used GA’s JavaScript insertion code as his “wrong” counterexample. Well, at least I was, and somebody else mentioned it in the Q&A so I figure I’m not the only one.

The GA insertion code that Google gives you to put on your site does a couple of bad things: First, it uses document.write, and second, it loads ga.js directly, which blocks browsers from doing any page rendering or downloading of other page components (images, scripts, stylesheets) during the whole time it takes ga.js to download and execute. In other words, Google Analytics makes your pages load slower!

Using Steve’s best practices, I’ve coded up a better version that does DOM insertion of the script tag and uses the “script onload” technique to initialize the tracker, so that it doesn’t block I/O, and you can inline it anywhere on the page or even load it from an external file. You can choose to lazy-load GA whenever you want — for instance, even after window.onload fires — so that it’s totally asynchronous and doesn’t interfere with page rendering at all.

If you’ve got no idea who Steve Souders is (former front-end optimization guru at Yahoo, and now at Google) or what I’m talking about, I strongly recommend you check out Steve’s book, High Performance Web Sites, and its 14 rules for high-performance sites, which are also summarized on Steve’s site and Yahoo’s Exceptional Performance blog. Steve is currently working on a follow-up book with 10 (so far) new rules, which you can get a sneak peak at by watching this talk on the first three and the March 5 talk on the next three (skip to 39:00 to see him bring up GA). Steve also gave a talk at SXSW (slides) yesterday.

The code

Here’s the Google Analytics insertion code that I put together from Steve’s examples — it’s pretty simple, really. Instead of the code Google tells you to use, you can just copy-paste this instead. You can use it inline, or load it from an external .js file:

(Updated 3/27 per thread)

/* 
Inserts GA using DOM insertion of <script> tag and "script onload" method to
initialize the pageTracker object. Prevents GA insertion from blocking I/O!

As suggested in Steve Souder's talk. See:
http://google-code-updates.blogspot.com/2009/03/steve-souders-lifes-too-short-write.html
*/

/* acct is GA account number, i.e. "UA-5555555-1" */
function gaSSDSLoad (acct) {
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."),
      pageTracker,
      s;
  s = document.createElement('script');
  s.src = gaJsHost + 'google-analytics.com/ga.js';
  s.type = 'text/javascript';
  s.onloadDone = false;
  function init () {
    pageTracker = _gat._getTracker(acct);
    pageTracker._trackPageview();
  }
  s.onload = function () {
    s.onloadDone = true;
    init();
  };
  s.onreadystatechange = function() {
    if (('loaded' === s.readyState || 'complete' === s.readyState) && !s.onloadDone) {
      s.onloadDone = true;
      init();
    }
  };
  document.getElementsByTagName('head')[0].appendChild(s);
}

/* and run it */
gaSSDSLoad("UA-5555555-1");

Be sure to use your own tracking code in place of “UA-5555555-1.”

Other things to consider

Using code like this means you could choose to load the GA tracker higher up in your pages, with less of a penalty versus Google’s insertion code, which causes serious blocking if it isn’t at the very bottom just before </body>. It’s still best to load GA last unless you really want to count every pageview possible.

You could also modify the last line of my example so that gaSSDSLoad() isn’t triggered until after window.onload (I didn’t do this in my example, because I wanted it to be a drop-in replacement for Google’s code). That way, GA doesn’t even start downloading or executing until after your page is displayed. For instance:

window.onload = function () { gaSSDSLoad("UA-5555555-1"); };

If you’re using Dojo, you might want to take a look at this Dojo module (mentioned by Steve in his talk), which also lazy-loads GA. My version is different in that (1) it’s standalone and doesn’t require Dojo and (2) it uses the “script onload” method to detect when ga.js has finished downloading (as Steve suggested), instead of polling with a timer. That means it does a slightly better job of firing _gat._getTracker() as soon as ga.js is loaded, compared to the Dojo version.

In his talk, Steve said he hoped the Dojo folks would incorporate his suggestions and improve their version. That’s all well and good, but considering where Steve works, let’s hope Google takes his suggestions! (Otherwise, the irony of “Google is the new Yahoo” will be just too much.)

I’ve been running my version for a few days and haven’t noticed any problems (no traffic drop-offs from any browsers/user agents), but no guarantees of course. Please let me know if you notice any bugs or have suggestions! (First person to tell me they already wrote this exact thing 6 months ago gets a special prize. :) )