ASP.NET

The Google PageSpeed API & MVC 4

Dean Hume

Mar 12, 2013 • 3 min read

I often use tools such as Yahoo! YSlow and Google PageSpeed to profile the performance of my websites. These tools offer useful performance suggestions that will improve the speed and performance of my sites if implemented correctly. They both plug into the browser and can be run at the click of a button. Depending on how often you profile your website, it can be quite a manual process running the tool through the browser every time you wish to check the performance of a web page. Fortunately, Google have developed an API for the Google PageSpeed service.

The API allows you to programmatically generate PageSpeed scores and suggestions and makes it easy to integrate performance analysis into your development tools and workflow. If your company or organisation is interested in web performance, you could build tools around this and use it as part of your Continuous Integration process. You could even use it to build a performance dashboard for all of your products. It's a pretty cool API that can be easily implemented.

In this article, I am going to run through a simple example using ASP.NET MVC 4 and the PageSpeed API that will show you how to retrieve performance results for a webpage. The API will return performance information about your site such as the score, performance rule/result, and the rule impact.

API key

In order to get started, you will need to get an API key from the Google APIs Console. In the Services pane, activate the PageSpeed Insights API and go to the API Access tab. The API key is near the bottom of that pane, in the section titled "Simple API Access." After you have an API key, your application can append the query parameter key=yourAPIKey to all request URLs.

Using the service

Once you have your key, calling the API is a pretty simple process. You simply need to hit the following URL with the API key and the page to be checked.

https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url={pageURL}&key={yourAPIKey}

Try and use that URL in your browser with your API key and page to test. The API returns a set of results in JSON which is easy to read and work with.

In this example, I am going to use ASP.NET MVC 4 to work with the API and build a simple dashboard. Using the power of C# and MVC 4, we can write an ActionMethod that is asynchronous and calls the API in a non-blocking fashion. The code below shows this ActionMethod in action.

On line 1, I am adding a simple 'async' keyword in the declaration of the Action. This signals to the framework that we are going to run this Action asynchronously.

On line 4 and 5, I am calling the Google PageSpeed API using the web page that I want to profile as well as the API key that we generated earlier. You may also notice that I have decorated the client.GetAsync method with an await operator. This notifies the framework that it needs to await the completion of this method. The beauty of the new asynchronous functionality in .NET makes it really simple to write asynchronous code. It is no longer a complex and tedious task to get your code to run asynchronously.

On line 10, I am using the await operator again and reading the contents of the HTTP request that I made in line 5. Finally, I am deserializing the contents of the response into an object that I can return to my view. The code snippet below shows the object that the HTTP response is deserialized into.

It's as simple as that! You can choose to do whatever you want with the data on your views. As part of an experiment, I used the results from the Google PageSpeed API and built a performance dashboard.

It is still in the early stages, but I am hoping to add to this continually. For more information, check out the page on this site at www.deanhume.com/Home/PageSpeed

API key

Using the service

Further reading