Yesterday, Google announced the addition of Site Speed to Google Analytics, which adds a page load time dimension across a range of reports. Great! Lets get it working with our WordPress sites.

The Benefit Of Site Speed For Google Analytics

Google has a released a number of tools to help improve page load times, mostly under the Page Speed banner.

Site Speed goes a step further by integrating load time information into Google Analytics, across a range of reports. We’ll be able to see which pages are fastest (and slowest), what site performance is like against different visitor locations, browsers, operating systems etc.

But enough of that, I’m sure it will be covered in greater detail elsewhere. The angle I’m taking is how to get it working in WordPress.

Adding Site Speed To The Google Analytics Code

The code required to activate Site Speed is outlined in the Google Analytics help page for Site Speed. I’m going to be focusing on the newer Asynchronous code (stop reading now if you use the old code).

Here is the default code, as outlined by the help page.

[sourcecode language=”javascript”]<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push([‘_setAccount’, ‘UA-XXXXX-X’]);
_gaq.push([‘_trackPageview’]);
_gaq.push([‘_trackPageLoadTime’]);

(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>
[/sourcecode]

The new code that makes Site Speed work is the following new line:

[sourcecode language=”javascript”]_gaq.push([‘_trackPageLoadTime’]);[/sourcecode]

This is what we need to add to our existing code on our WordPress sites.

Setting Up Site Speed in WordPress

Although it’s possible to add your Google Analytics code directly to your theme, the vast majority of people will use a WordPress plugin to add the code. As the Site Speed feature is brand spanking new, it has not yet been integrated into these plugins.

That doesn’t mean you can’t use it – the most popular WordPress plugins for Google Analytics are flexible enough to let you add the tracking code yourself.

I’ll focus on the two main WordPress plugins for Google Analytics (that I’m aware of):

• Google Analyticator by Ronald Heft
• Yoast’s Google Analytics for WordPress by Joost de Valk

Edit: Site Speed has now been added to both of these plugins and is turned on by default. There’s no longer any need to do anything!

I’ve been using the Google Analyticator plugin for years and it’s served me well, but I’ve always wanted to try out Joost’s plugin, because he’s a first rate plugin developer. I’ll take this article as a chance to try it out.

There are a bunch of other WordPress plugins out there that do a similar job, but I can’t create instructions for all of them and these two are the only ones I know of with more than a million downloads each.

Google Analyticator

Edit: Site Speed has now been added to Google Analyticator and is turned on by default. There’s no longer any need to do anything!

It’s incredibably easy to set up the code for Site Speed in the Google Analyticator plugin. Simply do the following:

1. Go to Settings -> Google Analytics.
2. Find the “Additional tracking code (after tracker initialization)” and enter the following:
   _gaq.push([‘_trackPageLoadTime’]);
3. Click “Update Google Analytics Settings”.

You’re done.

Yoast’s Google Analytics for WordPress

Edit: Site Speed has now been added to Yoast’s Google Analytics for WordPress plugin. It’s turned on by default, although you are able to turn it off if you want to. You don’t need to follow the below instructions. Note the stripslashes bug has also been fixed.

The Google Analytics for WordPress plugin also contains the ability to add a custom method, explained below, although there are a couple of issues with it. The code it creates is as follows:

[sourcecode language=”javascript”]
var _gaq = _gaq || [];
_gaq.push([‘_setAccount’,’UA-2099355-13′]);
_gaq.push([\’_trackPageLoadTime\’]);
_gaq.push([‘_trackPageview’]);
[/sourcecode]

The first issue is that it adds the code in a slightly different order from the example Google gives: it’s added before _gaq.push([‘_trackPageview’]); rather than after it. I don’t think this will cause a problem, but I’ll monitor the results to make sure it works.

The second issue is that slashes have been added to the _gaq.push([\’_trackPageLoadTime\’]); code, before the quote marks. This ‘escapes’ the quote marks, meaning that JaveScript will process the command without them, eg: _gaq.push([_trackPageLoadTime]).

I’m not sure, but I believe this will break the code. As a result, I hacked the plugin to strip the slashes.

Note: The slashes are added as a security mechanism. It’s a great idea to add slashes on user generated input (never trust the user). However, it only works well if the input is to be displayed in the browser. If it’s actually going to run as code, you have to strip the slashes out again at display time or the code may not work (you have to trust the user or you may as well not bother letting them input code).

I’m happy to cede authority on WordPress security to Joost, Andrew Nacin, etc and am happy to be corrected on this, but it’s necessary to strip the slashes if it’s code that needs to run.

Edit: I’ve now reported this as a bug. To put this into perspective, anyone who has access to enter code in this field probably has access to the Plugin and Theme Editors, where they can enter code that will be executed as is.

Anyway, here’s how to add the code:

1. Go to Settings -> Google Analytics.
2. Click the “Show advanced settings” parameter at the bottom of the first section. Two more sections will be displayed.
3. In the 3rd section, titled Advanced Settings, find the Custom Code parameter and enter the following:
   _gaq.push([‘_trackPageLoadTime’]);
4. Click “Update Google Analytics Settings”.

To hack the plugin to strip the slashes, do the following:

1. Go to Plugins -> Editor.
2. Select Google Analytics for WordPress in the “Select plugin to edit” field and click Select.
3. Important: Make a copy of this file before editing. Do a backup of your site. Make sure you can put things back if it goes wrong.
4. Search for the following line (about half way down):
   [sourcecode language=”javascript”]$this->textinput(‘customcode’),[/sourcecode]
5. Change this to:
   [sourcecode language=”javascript”]stripslashes($this->textinput(‘customcode’)),[/sourcecode]
6. Search for the following line (about three quarters of the way down):
   [sourcecode language=”javascript”]echo "\t".$options[‘customcode’]."\n";[/sourcecode]
7. Change this to:
   [sourcecode language=”javascript”]echo "\t".stripslashes($options[‘customcode’])."\n";[/sourcecode]
8. Click Update file.
9. If you use a caching plugin (eg W3 Total Cache or WP Super Cache), you need to clear the cache.

You should then check your source code on the site. If it worked, you should see the following:

[sourcecode language=”javascript”]
var _gaq = _gaq || [];
_gaq.push([‘_setAccount’,’UA-2099355-13′]);
_gaq.push([‘_trackPageLoadTime’]);
_gaq.push([‘_trackPageview’]);
[/sourcecode]

The slashes have been stripped and it should be ready to go.

What next?

If you use a caching plugin (eg W3 Total Cache or WP Super Cache), you need to clear the cache before the code will start working.

Then, according to Google, you just need to wait for “a few hours” and hopefully you’ll start seeing the page load time information appear in Google Analytics!

Oh, don’t forget to remove this code when the plugin you use adds this feature in future (which I’m sure they will).