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

Every millisecond matters these days

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. Google Page Speed Dashboard WidgetHead 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):

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.

13 thoughts on “Keep Track of Load Times Using Google’s Page Speed API”

  1. Peter says:

    So, I just need to added “_gaq.push(['_trackPageLoadTime']);” to Google Analytics code, it will work ?

    1. That’s right. Just add it in where I’ve shown it and you’re set.

  2. Reedu says:

    I got an 82/100 and of course you know I have no idea what that means, right? But I am interested nonetheless!

    1. Well that’s really good. I’m at about 77 or 78. I’m not sure exactly how that translates in Google’s eyes, but clearly it’s a good score

  3. I got an 86. But a 71 on mobile.
    Dave, your link to Google Page Speed page seems to go to a signup for Google cloud services.
    Page speed is at https://developers.google.com/pagespeed/

    1. Thanks for updating the link mate. Appreciate it.

  4. No prob, buddy. I still owe you!

  5. Webmaster says:

    The most website performance increase I got when I started using CSS sprites. Caching settings is also a good thing to check twice.

    1. CSS sprites is something that I’ve been meaning to investigate. Seems intimidating. Do you have a tutorial that you used? For me, caching was the single biggest factor in improving speed.

      1. Webmaster says:

        Dave, take a look at code.google.com/speed/page-speed/docs/caching.html and other PageSpeed suggestions.

  6. Ryan says:

    What line do we need to add to track the Page Speed metric? It looks like you have a shortcode that isn’t being parsed.

    1. You’re right. I recently switched Syntax highlighting plugins and that shortcode didn’t get changed. I’ve updated it now.

  7. Anurag says:

    Some of the things that I have followed to achieve a faster load time, higher performance and better score with google page speed are – using css sprites as much as possible, minify css and js, using a decent CDN and using image compression plugins with wordpress.

    These are some tried and working methods which helped me to achieve page speed score of 92 on my blog which receives very heavy traffic :)

Leave a Reply