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.

3 thoughts on “Cutting the Google Analytics Script in Half

  1. I see a lot of interesting posts on your page. You have to spend a lot of time writing, i know how to save you a lot of
    time, there is a tool that creates unique, google
    friendly posts in couple of minutes, just search in google – k2
    unlimited content

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>