Track site speed / load time with Google Analytics events

In the rebound an article about the tracking of your site's performance with Google Analytics. Almost a year ago I wrote this article in Dutch, but there are some improvements that made life easier. Google Analytics released the 'set events as goals' functionality that is really helpful here.

The script I'm going to explain will track page load time and page render time per individual URL. I know some other articles that describe a comparing technique but I really think the way I use it gives you more insights (at least for smaller sites).

Sitespeed tracking is important

I don't have to tell you how important it is to know how visitors experience your site. Sluggish sites will cost you money in the end. Site speed is a minor SEO ranking factor and fast sites tend to have more pageviews per visit and a higher conversion rate.

First the technical part

To get the right numbers in your Google Analytics account you have to add some extra scripts. First a script that tracks the starttime of the page loading proces:

<script type="text/javascript">loadtimer=new Date();</script>

Put this code directly after the <head> tag. Then put the next line just before the </head>:

<script type="text/javascript">rendertimer=new Date();</script>

And last but not least the event tracking code that can be everywhere in your code:

<script type="text/javascript">
window.onload = function()
_gaq.push(['timer._setAccount', 'UA-XXXXX-2'], ['timer._trackPageview']);
_gaq.push(['timer._trackEvent', 'loadtime', location.href, , parseInt(new Date() - loadtimer)]);
_gaq.push(['timer._trackEvent', 'time-to-render', location.href, , parseInt(rendertimer - loadtimer)]);

Please use a brand new profile with a different UA number for this script. If you use the same UA number as your regular Google Analytics script this script will mess up your data.

I used the simple "window.onload" as an example here. But in most cases you would use a more robust method for adding something to the onload event of your document.

The results

By adding this script you can see the actual time that it takes for a visitor to completely load a page. This is more reliabe than a n=1 measurement that a tool like WebPageTest can do (no bad words about that tool, it gives you a lot of other useful insights):

If you go to the "event" report you will see two new categories: "loadtime" and "time-to-render". The first one shows you the time it took to completely load the page. The second one is the time people stared at a blank page. If that time is to high you also need to do some updates. If you click on one of those categories you will get the screenshot shown above. The column "Avg. Value" gives you the time it on average took to load a page.

What you can do also is an analysis of the loadtimes per browser, campaign, keyword or country:

I now know my site is slow in the United States, India and China, just look at the numbers. So, if you are worldwide oriented this could be a really important report.

Google Analytics events as goals

It's possible to set an event as a goal in Google Analytics. I created this one to keep track of slow page load times:

Every time someone hits a page that takes longer than 5 seconds to load it will trigger this goal. My target is to keep this number as low as possible 😉

Additional comment:
The described technique only measures the load time after the server has send the first byte (TTFB = Time To First Byte). Make sure you also look at the process before that first byte. Aaron gave some more explanation in the comments.

Click to activate social bookmarks