Alex Gyoshev

Cutting the Google Analytics Script in Half

[Update: after a humbling pull request on GitHub, I was pointed to a blog post that shows a better process.]

I am a bit extreme when it comes to optimization (as I will prove in a bit). Both YSlow and Google PageSpeed are great pals in this, and I get concerned when they report inefficiencies. You see, I use Google Analytics in order to track the page views of this site. If you ever used it, you have certainly copied the tracking script from the GA site — the script that is generated for you automatically and you just need to paste in the pages that you want to track. I like this feature pretty much, as it saves time; it also saves Google the need to explain what code you need to write to get it done. However, the code that gets generated isn’t optimized, nor minified, so the above tools find it offensive. So I took the effort of optimizing it, and here is how.

Starting script

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXX']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www')
                 + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
  })();

</script>

This is the default snippet that gets generated from the GA site, without additional options.

Optimization process

  1. Array.push can accept multiple arguments. This is even mentioned in the online help, but the generated code does not contain it.

    gaq.push([‘setAccount’, ‘UA-20578581-1’],[‘_trackPageview’]);

  2. Both the HTTP and HTTPS GA scripts are identical. Furthermore, both URLs work fine without specifying a subdomain. Thus, using protocol-less URLs (part of the URI RFC) in order to link the JavaScript shaves off a few more bytes.

    ga.src = ‘//google-analytics.com/ga.js’;

  3. (Theoretically optional) The script persists its location in the document, which is nice for more advanced scenarios that require more tracking. However, placing the script anywhere else than before the closing body tag might degrade performance. If performance is more important than tracking,

    document.body.appendChild(ga);

And after a few manual minification tricks, here comes the…

Optimized script

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXX'],['_trackPageview']);

  (function(d) {
    var s = d.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = '//google-analytics.com/ga.js';
    d.body.appendChild(s);
  })(document);

Optimization statistics

After minification, the reduction is by 45% (187 bytes), since the current GA code generator does not minify its output. Voila!

The optimized script is active on this site, and was tested in IE6 (‘nuff said).

I hope that you will find this useful.

Comments