Keep Track of Load Times Using Google’s Page Speed API

With site load times becoming more and more of an influencing factor in your site’s ranking, it is becoming increasingly important to speed up your site and know the inner workings of the way your site loads so that you can identify where the bulk is.

We’ve already gone over several ways in which you can speed up your site (see Create Your Own Fast Social Sharing Buttons For WordPress, for example) and there will be more tutorials on this very subject in the future (now would be a good time to sign up to the RSS feed if you aren’t already).

But this tutorial is going to show you how to gauge your site load speed and track it over time.

On-the-spot analysis

Google recently came out with an API for their Page Speed algorithm, which allows site owners to check their load speed on a scale of 0-100.

Even better than that is the news that a recent upgrade of the W3 Total Cache plugin (which I highly recommend for your page caching needs) includes a tool for you to do an on-demand analysis of your page load speed. Here’s how to get it:

1. Make sure you have W3 Total Cache installed, activated and upgraded.
2. Go to the Google Page Speed page and login with your Google Account (please don’t tell me you don’t have one…).
3. Turn the Page Speed project On and then hit the API Access link in the menu on the left and get your Google Page Speed API key.
4. Login into your WordPress site and go to your W3Total Cache Settings (make sure you’re on the General Settings tab).
5. Scroll all the way down to the bottom to the miscellaneous settings, enable the Google Page Speed Dashboard Widget and enter your API key.
6. Head to your dashboard and check out your page score. Note that you can refresh the analysis, and see the areas where Google sees big problems (in red) or minor problems (in yellow) so that you can work on them.

Track your load speed over time in Google Analytics

You can now add an extra line of code to your Google Analytics tracking code and Google will track your site loading speed as an extra metric in Google Analytics.

Of course, this unleashes all kinds of potential as you can track the improvement of your load speed over time and mark significant changes to your site, see what countries load your site the quickest and even look for correlation between load speed and bounce rate for instance.

To start tracking this metric, add the sixth line to your AdSense tracking code (probably installed in either header.php or footer.php if not controlled by a plugin):

<script type="text/javascript">

		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-9669661-12']);
		_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>

Once you start collecting data, you’ll be able to pull it up in Google Analytics under the Content section (you have to be using the new version of Google Analytics – see the link in the top right hand corner of the screen).

What kind of a Google Page Speed score are you getting? Have you managed to increase it? What Page Speed metrics are you still having trouble improving? Let us know in the comments.