Measuring performance with sitespeed.io

Intro.

In this tutorial, I will introduce you to an amazing performance tool I have come across: sitespeed.io.

The official website describes the tool as “the complete toolbox to test the web performance of your website.” What makes the tool even greater? Yep, you’ve guessed it; it is also open source.

Sitespeed.io gathers some popular performance tools in one place to get a clear picture of the state of your site in a matter of seconds! This tutorial will help you get your sitespeed.io environment up and running using Docker.

Downloading sitespeed.io docker image

For this tutorial, we will be using docker to set everything up. If you do not have docker installed yet, you can do so from here.

As soon as you have docker up and running, we need to download the official sitespeed.io image. To do this, you must execute the following in your terminal:

docker pull sitespeedio/sitespeed.io

Once this is done, we can double check that everything installed successfully by executing the following command:

docker images

If the sitespeed.io image is listed, then the docker image was downloaded successfully.

Our first performance test

With the image successfully downloaded we can run our first basic performance test.

In the terminal, execute the following command:

docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io -b chrome https://<website>

Don’t forget to replace <website> to any site of your choice (it can also be localhost), and in a matter of seconds, sitespeed.io will generate a report on your site’s performance against google chrome.

The report is stored in a directory which is created in the same place you executed your command from. Find the index.html file and load it into your favourite browser.

Voila, this is just a summary of your score. Let us navigate throughout the report in a little more detail, shall we?

As you may have noticed, sitespeedio accepts some different options depending on your preferences. These are probably the most popular:

1. Browser: -b [chrome,firefox] (default: chrome)
2. Iterations: -n (how many times you want to test each page, default: 3)
3. Connectivity: -c [“3g”, “3gfast”, “3gslow”, “3gem”, “2g”, “cable”, “native”, “custom”] (default: native)
4. Crawler: -d (How deep to crawl (1=only one page, 2=include links from the first page, etc.) default: 1)
5. Mobile agent: -mobile (Set UA and width/height. For Chrome it will use device Apple iPhone 6.)

So let’s say you want to run your test on a chrome browser, using a mobile agent, with the crawler going through the links of the first page, one iteration and a 3g connectivity you would execute the following command:

docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io -b chrome --mobile -d 2 -n 1 -c 3g https://<website>

Integrating more tools

As mentioned before, sitespeedio also integrates with other services to give you a clearer picture of your site’s performance.

Webpagetest

Let’s start off with WebPageTest. This comes out of the box, so it is fairly simple to integrate. Before you try this out, you would need a WebPageTest API key.

Once you have that in hand, execute the following command:

docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io -b chrome --mobile -d 1 -n 1 -c 3g --webpagetest.key <API> --webpagetest.runs 1 https://<website>

GPSI

Next up is google page insight. This is a bit more tricky to integrate, but the step by step guide below should make it a simple process.

1. Like WebPageTest you also need an API key to use GPSI
2. In the same directory we have been working on till now need to install the plugin by cloning the following repo: https://github.com/sitespeedio/plugin-gpsi
3. Now we need to execute the following command within the plugin-gpsi directory:

• npm install

1. Once that is done we need to make some changes to our sitespeedio command, so we need to add the following options:
2. -plugins.add “/sitespeed.io/plugin-gpsi”
3. -gpsi.key “<yourKey>”

The resulting command is the following:

docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io -b chrome --mobile -d 1 -n 1 -c 3g --webpagetest.key --webpagetest.runs 1 --plugins.add "/sitespeed.io/plugin-gpsi" --gpsi.key "<yourKey>" https://<website>

Organising your command using a config file

With more options you add, the more your command is going to grow(and get super untidy), to keep everything tidy we can use a JSON config file.

Moreover, the command will now look like the following:

docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io --config config.json http://<website>

Continuous monitoring using Grafana & Graphite

Why go through all this trouble to check your site’s performance once? Why not continuously monitor the performance so you could compare how your site is performing over time? The guys at sitespeedio made this super easy using Grafana and Graphite. To set this up, we will be using docker compose.

Next, we need to build our new docker-compose file with the following command:

docker-compose up -d

This command should install all images in the docker-compose file, and also boot them up.

We now need to edit our config.json and add the graphite host:

We can now run our test:

docker-compose run --rm sitespeed.io --config config.json http://<website>

Go to: http://127.0.0.1:3000, and you can see your results 🙂

You can also set this up with Jenkins, and run the test on a scheduled basis. Amazing right?

Github Repo.

That’s it for today, as usual, if you have any questions or comments, you can use the comment section below.

P.S. We are looking for guest authors, interested? Contact Us