PageSpeed Insights API - Track Page Speed for Free

Steve — Fri, 31 Jan 2020 17:51:15 +0000

There are many ways that you can track your website's PageSpeed. You could integrate Google Lighthouse into your CI pipeline. You could use a paid service to track performance for you.

Did you know that you can track it for free?

You can use Google Sheets and the PageSpeed Insights API to track the performance daily.

I have been using it to track the performance of the top 10 websites in the US:

It has been running for over 5 months. The graph above shows that Youtube and Reddit's performance is getting worse! This data is useful to see how you are improving site performance over time.

In this post, we are going to set up your own Google Sheet. It will track key pages on your website using the lighthouse performance score.

What is PageSpeed Insights?

PageSpeed Insights is a free web tool from Google. It allows you to analyze the performance of a website. Enter a page URL into the analyze box and click analyze. Google will then read your page and come back with some results.

Here are the results from https://dev.to a score of 91 is very impressive:

The 91 is the Lighthouse performance on mobile this is the default score that is shown. Lighthouse is another free tool from Google that runs a few different types of audits on your site. The one we are focusing on here is the performance audit.

To get the lighthouse score it will run through a series of audits and present a score from 0-100. So this is not a metric in time but a performance score. With 100 being the fastest and 0 being the slowest.

You want to be in the 90s if you can and you should set yourself this goal. One of the main reasons that you need a fast site is that it will increase conversion. It will also help with your Technical SEO. If Google sees that your site is fast it will rank better in their Search results.

The PageSpeed Insights Tool is good at running a one-off test but how can we use it to track performance over time.

Well, they have an API.

PageSpeed Insights API

You can get the same data in JSON for free by using the PageSpeed Insights API. So that we can set up the spreadsheet later you need an API key. To do this first visit the getting started page.

Once on the getting started page scroll down to the Optional: Set up an API Key section.

Click on the “Get a Key” button and a pop up will appear:

Select “Create a new project” name the project “PageSpeed” and click “Next”:

You will then see your API Key:

Make a note of this API key as we will need it later when you copy the Google Sheet.

Let’s look at this next.

PageSpeed Tracking with Google Sheets

Now we have set up an API key for PageSpeed Insights you can make a copy of the “Track Page Speed for Free” Google Sheet.

Open the Sheet and then choose “File” and “Make a copy…".

This will make a copy of the sheet and move it to your Google Drive account.

We are now only three steps away from this working for you:

Set the API key in the script
Set up the page URLs that you want to track
Create a trigger to run the script daily

Let’s start with setting the API Key.

1) Set the API key in the script

Now that you have a copy of the Google Sheet we can change the script and add the API key that we grabbed earlier.

To do this we need to open the script editor in Google Sheets. To do this choose “Tools” -> “Script Editor” from the Goole Sheets menu:

This will open up a new tab showing the script. It is JavaScript and is easy to edit so that you can track your pages.

We first need to change a script property called “PSI_API_KEY”. This is like an environment variable in code. It uses this property when it makes a call to the PageSpeed Insights API.

So in the script editor click on the File menu and then select “Project properties”:

This will open up a pop-up, select the “Script properties” tab and then click on the “Add row” button.

Give the new row the name of “PSI_API_KEY” and the value is the API key you copied from earlier.

Once done, click save and we can move on to step 2.

2) Set up the page URLs that you want to track

In the script editor, you can see the JavaScript code that runs the test. There is an array that looks like this:

var pageSpeedMonitorUrls = [
  'https://www.google.com',
  'https://www.youtube.com',
  'https://www.amazon.com',
  'https://www.facebook.com',
  'https://www.yahoo.com',
  'https://www.reddit.com',
  'https://www.wikipedia.org',
  'https://www.bing.com',
  'https://www.ebay.com',
  'https://www.netflix.com'
];

To track your pages you can replace these URLs with your own. Do this now and we can move on to the final step.

3) Create a trigger to run the script daily

The final thing to configure is the trigger that will run the script every night. So back in the script editor click on the “Edit” menu and then select “Current project’s triggers”:

This will open up a new tab showing the triggers for the project. As this is a new project the triggers should be empty.

Go ahead and click the “Add Trigger” button and you will get a pop-up. Configure the “monitor” function to run daily and from midnight by selecting the set up as below:

Then click Save.

Once you have finished this the script is ready to run every night.

Wrapping Up, PageSpeed Insights: Track Page Speed for Free

You have learned a few things in this post:

What is PageSpeed Insights?
How you can use the PageSpeed Insights API
How to use Google Lighthouse Performance Report
How to use Google Sheets to run a custom script
How to use triggers to run a script daily

Putting all this together you can track the performance of key pages on your website over time.

There are many ways to improve your site performance but the first step is to measure it. This will give you feedback when you make changes so that you can see the site improve.

Forem: Steve