This is the sixth post in a series that addresses several different ideas on how to speed up your website. This series was brought about because of Google’s new focus on how quickly webpages and websites load; by focusing, I mean that they are now saying that page load speeds are one of the factors they use to determine the rank of the page in the search results. Google has made it clear that page speeds are not a major factor, but it is one. Google is one reason to speed up your site as much as possible, but another is probably more important: it improves your users’ experience on your site.
In this series we’ve been coving a wide range of topics:
- An Overview of Site Speed
- How to find out if your web pages are too slow
- How to optimize photos for faster loading
- How to use caching and htaccess to speed up your site
- How to compress your site
- How to speed up Google Analytics using asynchronous tracking codes (This post)
- How to speed up your JavaScript and CSS (Coming Soon)
This post covers an issue that many web masters encounter: Google Analytics Javascript code slowing down your site.
Google Analytics Slowing Down Your Website?
For most sites, the basic answer to this question is, “Yes, it is.” Analytics works by downloading a fairly large Javascript library that powers the application. And, while this library is downloading, nothing else can happen on the page. That’s why Google recommends you put their code at the bottom of the HTML code because when a browser puts together a page, it literally goes from top to bottom. So, if Analytics’ code is on the bottom it will be the last thing that loads and it won’t slow down the rest of the page.
How To Speed Up Analytics: Asynchronous Tracking Code
Google obviously knew that their code slowed things down. So, they came up with a solution that will speed things along. They call it Asynchronous Tracking and it’s pretty easy to do. Asynchronous Tracking is possible because of the new HTML5 and the fact that modern browsers can download multiple files at the same time.
There is a second way that Asynchronous Tracking speeds up your site: the new code gets all the commands ready before the Javascript finishes loading. Once the Javascript is loaded, the commands are processed and sent to Google.
How to Install the Asynchronous Tracking Code
It’s pretty easy to do.
First, Google recommends that you remove the old code. They don’t recommend having both codes on your pages.
Next you need to copy the code below and paste it just above the </head> tag of your site. I’m assuming that the <head> tag is in the header file of your site which is included on every page of your site; that way you’ll only have to install it once. If that isn’t the case…it’s going to be a bit more work because you have to put the tracking code on every page.
Note: Google recommends that you put the tracking code directly above the </head> tag. However, this will likely break IE6. By placing it below the <body> tag you can still support IE6…if you want. The choice is yours. UPDATE: A Google engineer has informed us that the IE6 problems putting the code in the header were fixed after the beta version. Here’s the code to put where you will:
<script type=”text/javascript”>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_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>
Once it’s pasted into your code, then make sure to change the UA-XXXXX-X part with your web property ID. Now save everything and you should be fine if your site is pretty basic. However, there are a couple of issues that you might need to address.
Advanced Asynchronous Tracking
619Cloud.com installed the Asynchronous Tracking Code and found that their event tracking and their forms that are submitted by AJAX were no longer being tracked by Analytics. They came up with the solution and even produced a video on how to take care of these problems simply and easily.
Justin Cutroni at Analytics Talk also addresses this issue in his very good post on Asynchronous Tracking. Scroll down to the How to Add Items to the Queue section.
Next up, we talk about how to speed up your Javascript and CSS files other than compressing them.
Great article! This is a very useful summary.
The note about problems in IE6 is inaccurate though. Previously, there was a beta version of the snippet that had problems in IE 6 & 7 when it was put into the head of some sites. That problem was fixed. The current snippet (the one you’ve listed above) has no issues in IE, even when put into the head. Google now recommends putting the snippet in the head.
Brian,
Thanks for pointing that out! We will update the post shortly with your correction (just updated our tracking code).
Hi Brian,
Nice post… By the way, I just modified the Google Analytics plugin for WordPress and added the new asynchronous tracking method… Please review my post about Asynchronous Google Analytics plugin for WordPress at http://www.minilibra.com/wordpress/plugins/analytics.html
Cheers
Bambang Sugiarto