Ending The ga.js Wait
Google Analytics is ubiquitous, not least of all because it's better at what it does than most of the alternatives. Also, it doesn't require any install or maintenance. And it's free. What's not to like?
Frankly, not much, but if I had to nit pick, I'd note that the worst part of Google Analytics is the ga.js
script that does the actual tracking of content. It's not bad, in and of itself, but it tends to load slowly. There are several reasons for this:
- Another DNS lookup to resolve
http://www.google-analytics.com/
. This DNS entry is likely to be "warm" given how frequentlyga.js
is used on the web, but as Jim Roskind explained on the Chromium blog, it's the outliers that kill you. - It's kinda big. At 9K on the wire (22K unzipped),
ga.js
is kinda chunky for what it does most of the time, namely tracking a single page load. - The default instructions are bone-headed. They direct you to do a
document.write()
which is a blocking, synchronous operation WRT page loading. This is tres dumb. Reasonable people should just includega.js
with a<script>
tag, but nearly nobody does. Turns out that sane defaults still matter. - Load times seem totally random. As with DNS lookup,
ga.js
's latency varies wildly. This isn't backed up by anything empirical, but many pages feel blocked byga.js
for a near eternity.
So how to fix this? Dojo 1.3's dojox.analytics.Urchin
to the rescue! Given that I was going to be including Dojo on the page to do other things anyway, I can use 1.3's new Urchin system to help amortize the cost of using Google Analytics. The code running on this blog now includes the following code (more or less):
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js">
</script>
<script type="text/javascript">
dojo.addOnLoad(function(){
setTimeout(function(){
dojo.require("dojox.analytics.Urchin");
dojo.addOnLoad(function(){
var tracker = new dojox.analytics.Urchin({
acct: "UA-XXXXXX-X" // your tracking # here
});
});
}, 100);
});
</script>
You can see the real thing by looking at the bottom of this page which pulls in custom.js which includes this logic. Pete Higgins blogged about how the module works when he first wrote it, and the strategy is to load Dojo from a CDN (since the page wanted it for other things) and wait until after the page has loaded to include ga.js
. This delayed loading ensures that the page is responsive before we start doing anything related to tracking. The nested calls to dojo.addOnLoad
show how we can wait for one set of modules to finish before kicking off another group, and in this case we also wait until after the page is responsive to load dojox.analytics.Urchin
. This module further delays loading of ga.js
, meaning that it doesn't matter how long it takes for things like DNS to resolve and for Google to serve ga.ja
since it's not ever blocking the user.
Looking at the "before" and "after" shots in firebug gives you some idea of how this technique can really make a difference:
[caption id="attachment_941" align="aligncenter" width="300" caption="using dojox.analytics.Urchin, we can get a responsive page and then track usage"][/caption]
We get page tracking and the user gets an interactive page faster. Rad.