Measuring Page Load speed with Google Analytics

UPDATE: Google now has a built-in tool for doing this. Simply add the following: _gaq.push([‘_trackPageLoadTime’]); and hey presto: Page-load-speed tracking. See this page for more info, including an important caveat. With Google now including Page Load speed in their page-ranking algorithm, many of our clients started asking us how fast their sites load. There’s lots of developer tools that can help with this - I use (alternately) the Google Page Speed tool and Yahoo! YSlow during development to tweak page load times. But this doesn’t help our clients very much. There’s a chart you can use on Google Webmaster Tools, but overall, I don’t find Webmaster Tools particularly end-user friendly. As it’s name implies, I’m not sure that it is supposed to be. A couple of our more technical clients use it, but most don’t use it, or don’t really get it. The chart that Google Webmaster Tools spits out can be found under “Labs”, then “Site Performance”. It looks like this:

Which is nice, and gives a clear delineation of what's good, and what's not. As you can see, this site rides right on the edge of being "fast". When a client asked if I could tell him how fast individual pages are loading, this gave me the idea of using Google Analytics' Event Tracking feature to log how fast a page loads. What's nice about this is that most of our clients "get" Analytics, and are used to going there to see their stats. So additional stats there works for them. With Google's visual guidelines in place, I set about making this happen. I decided to name the Event Category "PageLoad". I then added 5 labels to group the results:

1. Fast (less than 1500 MS) (because Google, according to Webmaster Tools, considers anything 1.5s or faster “fast”.
2. Acceptable (less than 3000 MS)
3. Middling (less than 5000 MS)
4. Slow (less than 10000 MS)
5. Unacceptable ( 10000 MS or longer)

These groupings are completely arbitrary - I could have set them at any time span. Those just seemed reasonable to me, based on knowing that most of our sites have an average load time of 2800 MS, based on our internal tools. So then I had to track it. The code is as follows:

var pageLoadStart = new Date();

window.onload = function() { var pageLoadEnd = new Date(); var pageLoadTime = pageLoadEnd.getTime() - pageLoadStart.getTime(); // let’s set some second (1000s of ms) segments if (pageLoadTime < 1500) loadStatus = ‘Fast (less than 1500 ms)’; else if (pageLoadTime < 3000) loadStatus = ‘Acceptable (less than 3000 ms)’; else if (pageLoadTime < 5000) loadStatus = ‘Middling (less than 5000 ms)’; else if (pageLoadTime < 10000) loadStatus = ‘Slow (less than 10000 ms)’; else loadStatus = ‘Too Slow (more than 10000 ms)’; var myPath = document.location.pathname; if( document.location.search) myPath += document.location.search; // round the time to the nearest 10 ms. pageLoadTime = Math.round(pageLoadTime / 10) * 10; // send the GA event try { _gaq.push([‘_trackEvent’, ‘Page Load’, loadStatus,myPath,pageLoadTime]); } catch(err) {} }

Some Notes:

• I have the first line (var pageLoadStart = new Date();) at the very top of my header, right after the tag. The window.onload() function sits in the footer.
• I round my values to the nearest 10 MS - but this might be too many values, too noisy. So you could round to the nearest 100 MS or even nearest second if that worked  better for you.
• the document.location.pathname just passes the page’s address to Google, so I can see which pages are slow, or when particular pages or slow.
• You can only send integers to the Event Tracking widget.
• the _gaq.push() line is where I send this to Analytics. You might have your Analytics tide to a different variable, in which case change the _gaq to whatever you use. For more on how event tracking works, see the docs

What my client then sees in Google analytics is a chart like this (note - I’m using the new version of Analytics - yours might look different):

As you can see (this is for the home page of the site), the results are ALL over the place. Which is troubling, but that's for another day to figure out why it sometimes loads _sooooo sloooowwwwlyyyyy_. (We're currently running an A/B test wherein a video auto-plays or not. My best guess is that because the page doesn't finish loading until _after_ the video starts to play, that explains the slow loading. But maybe not). Regardless of the actual performance of this particular page, you can see how this is a nice little chart for clients to see - nothing too technical (I could possibly be even less technical by not including the MS numbers in the labels), but provides them some easy insight into how their site is doing. **Caveat:** This chart obviously doesn't include any pre-processing factors - connection speed, server-side scripts taking a long time, etc. But it's still pretty useful, I think.