When Google Analytics (GA) first came out they recommended you place their tracking script (urchin.js) in the html header (with all the other javascripts on the page). Since pages are synchronous by nature, this meant all the data on the page was sent from the server to the browser in a steady stream, top to bottom. Placing the GA script in the header increased the likelihood that a visitor’s browser would load the script, but it delayed the loading of the rest of the page until after the GA script had loaded completely – sometimes adding 5-15 seconds to page load time.
Google replaced their urchin.js with a new ga.js script, and with it suggested you place the script immediately above the </body> tag, which is below all your page content. This allowed the contents of the page to load first (which appeared faster), and let the GA script load as the very last thing on the page. This method meant that the page looked like it was loading faster, but ran the risk of not tracking all visits to the page (because people might navigate away before the GA script had fully loaded).
Recently, Google has introduced a new method for loading the GA script, this time asynchronously. Asynchronous loading really came into vogue with AJAX. To oversimplify, a developer could write a page with placeholders on it. This page would load very quickly, and after it was loaded, a script would run in the browser that requested the data to be put in the place holders. Data for several place holders could be requested at the same time and take as long as they needed to load, but the remainder of the page would be visible AND usable during this time.
Google applied this asynchronous methodology to their GA script, so the page loads completely, then sends a request for the GA bits to be loaded, this happens in the background while the visitor is using the page, without impacting the visitor’s surfing experience.
Technically this method doesn’t save any time over either of the prior methods. It does, however, appear to the end-user to save time, giving the impression of increased speed.
The new code (via the Google Analytics blog) is:
1: <script type="text/javascript">
2: var _gaq = _gaq || [];
3: _gaq.push(['_setAccount', 'UA-XXXXXX-X']);
4: _gaq.push(['_trackPageview']);
5:
6: (function() {
7: var ga = document.createElement('script');
8: ga.type = 'text/javascript';
9: ga.async = true;
10: ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
11: (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
12: })();
13: </script>
Let me know how your implementation goes!
