Track Page Load Times Automatically With Google Analytics!

We’ve come up with a great way to use Google Analytics to automatically track the loading time of individual pages on a web site using Google Analytics and a bit of JavaScript. After following the steps below, you’ll be able to track the very same page load times each and every one of your trackable users are encountering and you’ll also be able to determine which of your pages are the worst offenders.

Note: Since, for one reason or another, the traditional non-asynchronous Google Analytics code is still in use across a majority of websites, that is what will be covered in this post. Accordingly, the code examples shown below are based on the traditional Google Analytics tracking code.

Update: We’ve just published an update to this article dealing with the new asynchronous version of the Google Analytics code! Go ahead and read it!

The problem many have encountered in trying to implement this sort of solution was that once the load time tracking script had been added and Event Tracking enabled, Google Analytics would stop tracking the website’s bounce rate, which would eventually be reported as 0.00%. This is a highly sub-optimal state of affairs.

The trick to solving this problem is to use a separate tracking profile to handle the Event Tracking. Once isolated from the Event Tracking, the primary account will continue reporting bounce rates and the page load times will be reported in a secondary account.

A great thing about this approach to page-load time tracking is that you can let your visitors do all the work, instead of feverishly refreshing your Firefox and checking YSlow for Firebug each time you want to know how long your webpage has taken to load. No, just follow these steps and check Google Analytics in a few hours; you’ll be able to get a much better handle on your load times once you’re done.

1. Create a new website profile in Google Analytics. To do this, go to ‘Analytics Settings’ and select ‘+ Add new profile’ in the ‘Actions’ column. Under ‘Choose Website Profile Type’, select ‘Add a Profile for a new domain’. This step will allow you to track load times per visitor in a way that will not impact your bounce rate tracking on your pre-existing tracking profile. Be sure to name the profile in a way that will allow you to identify it as the load-time tracking profile as opposed to your pre-existing tracking profile. Take note of the number that begins with “UA” and contains two dashes.
2. Ensure that Event Tracking is turned ‘on’ in this new account. Event Tracking is the linchpin of this whole operation. Without it, you get nothing.
3. Insert the following (bold) code into the Google Analytics Tracking Code currently residing in your CMS’s footer template. The greyed-out code is there to give you a sense of where the new code should go. Ensure that you replace the “UA-XXXXXXX-Y” code with the new website profile number you noted in the previous step.
   

   • try{
             var pageTracker = _gat._getTracker("UA-XXXXXXX-X")
                      pageTracker._setDomainName("none");
                      pageTracker._setAllowLinker(true);
                      pageTracker._setAllowHash(false);
                      pageTracker._link();
                      pageTracker._linkByPost();
                      pageTracker._trackPageview();
             var secondTracker = _gat._getTracker("UA-XXXXXXX-Y")
                      secondTracker._trackPageview();
     }
     catch(err) {}

   If your site has an e-commerce component which you are tracking with Google Analytics’ e-commerce functions, you will want to ignore the previous box and instead insert the same code into the area greyed-out in the box below:

   • pageTracker._trackTrans();
             var secondTracker = _gat._getTracker("UA-XXXXXXX-Y");
                     secondTracker._trackPageview();
     }
     catch(err) {}

   You will want to have your technical services department or web development contractor ensure that this will not interfere with your e-commerce tracking.

4. Upload ‘time-tracker.js’ to the root of the folder in which your header and footer templates reside. Download the file from Google Code here. For a non-CMS-based site, put ‘time-tracker.js’ instead into the folder where you keep your html files.
5. Insert the following (bold) code to your header template, just before the tag.
   As before, the greyed-out code is there to give you a sense of where the new code should go.
   Be sure to replace yoursite.com/folder marked in bold with the URL of the folder where your header and footer templates (or html files) are located.
   

6. Go back into Google Analytics and click ‘Content’ and then ‘Event Tracking’. Under the heading ‘Top Events’, you should see a new section entitled ‘Page load time’. This is a good thing.

Enjoy your page load stats!