Matt Bailey
Designer & Developer

Using Sitespeed.io in a Vagrant Virtual Machine

sitespeed.io

Not so long ago I came across a fantastic command line tool called sitespeed.io. It enables you to generate a nicely formatted report about the speed and performance of a site. Performance is something I’m really interested in, and this is a perfect tool to add to the arsenal.

Now, being a glutton for punishment I decided against the easy install option (using Homebrew on a Mac) and instead decided to try and get it working in a Vagrant virtual machine.

I had already set up a Vagrant boilerplate, so it was a question of modifying this to install the various dependencies required by sitespeed.io.

It actually took quite a bit of research, reading, and trial and error to finally get it up-and-running. Please bear in mind that I’m not a backend developer or sys-admin, just a lowly frontend designer trying to refine his workflow, and increase his experience and skill base, so I may not have done things in the most efficient way - Let me know if anything I mention could be done better.

Anyway, if you’re still interested here are my experiences.

Dependencies Installation on Linux

My Vagrant boilerplate creates an Ubuntu Precise box. There are Linux installation instructions on sitespeed.io, but they’re (understandably) a bit vague when it comes to installing the requirements so I’ll take you through each one in turn.

Note: In my examples I’m just giving you the raw code you can run on the command line in your VM. However, I actually run all this from a shell script that gets called each time I provision the VM. You can see the install script here if you’re interested.

PhantomJS

Initially I went for the easy option to install PhantomJS:

$ sudo apt-get install phantomjs

"That was straightforward" I thought… However, it turns out that the apt-get package list for Ubuntu Precise only includes PhantomJS version 1.4, and sitespeed.io requires a newer version (you’ll get a load of errors when you finally try to run sitespeed.io). In the end I came across this gist and was able to install PhantomJS version 1.9 as a result (obviously you need to sudo apt-get remove phantomjs first if you already have it installed like I did).

$ cd /usr/local/share

$ sudo wget -q https://phantomjs.googlecode.com/files/phantomjs-1.9.0-linux-x86_64.tar.bz2

$ tar xjf phantomjs-1.9.0-linux-x86_64.tar.bz2

$ sudo ln -s /usr/local/share/phantomjs-1.9.0-linux-x86_64/bin/phantomjs /usr/local/share/phantomjs

$ sudo ln -s /usr/local/share/phantomjs-1.9.0-linux-x86_64/bin/phantomjs /usr/local/bin/phantomjs

$ sudo ln -s /usr/local/share/phantomjs-1.9.0-linux-x86_64/bin/phantomjs /usr/bin/phantomjs

Java

Installing Java was a bit more straightforward, although it took me a while to figure out that the package name was default-jre and not simply java. Go figure?…

$ sudo apt-get update
$ sudo apt-get install default-jre

Note: The reason you run sudo apt-get update is to make sure your local package list is up-to-date.

curl

I used a tool called PuPHPet to initially create my Vagrant boilerplate, and it generates a config.yaml file that is very easy to modify and add new features to. As luck would have it I’d already added curl for an earlier project. In the config.yaml file the relevant bit looks like this:

PuPHPet config.yaml - curl

If you haven’t used PuPHPet then you could install curl using apt-get.

$ sudo apt-get update
$ sudo apt-get install php5-curl

xsltproc

xsltproc was also pretty straightforward.

$ sudo apt-get update
$ sudo apt-get install xsltproc

If you’ve already just run sudo apt-get update you probably don’t need to run it again here (Linux gurus, is that correct?).

sitespeed.io installation and Set-up

Installation

Again, the instructions are pretty vague, at least to a frontend designer. It tells you to clone the project from Github, or download and unpack the zip. Well my first question was clone it to “where”? After picking the brains of a couple of my dev colleagues I was basically told “wherever you want to”. So helpful. I like things neat and tidy and in their proper place, so I did a bit more research it seems like a common place to store tools/scripts is in the /usr/local/share directory, so that’s what I settled on.

$ cd /usr/local/share
$ git clone https://github.com/sitespeedio/sitespeed.io.git

Set-up

I then symlinked the binary so that I could call it on the command line without having to use the whole path.

$ sudo ln -s /usr/local/share/sitespeed.io/bin/sitespeed.io /usr/local/bin/sitespeed.io

$ sudo ln -s /usr/local/share/sitespeed.io/bin/sitespeed.io /usr/bin/sitespeed.io

To test that sitespeed.io is now available run the following command.

$ sitespeed.io -h

You should get some output telling you how to use sitespeed.io.

Using sitespeed.io

To generate a report run the following command from somewhere in your web project, for example /var/www/[my-project]/site. You need to run sitespeed.io from a directory that will be accessible through the browser.

$ sitespeed.io -u http://my-project.dev/

Obviously the site you want to run the report on can be anything, but in my case I’m using Vagrant for local development so I want to test the site I’m developing locally.

Let sitespeed.io do it’s thing, it may take a minute or so. Once it has finished you’ll be able to access the report in your browser (the URL will obviously depend on your own particular directory structure and the datetime stamp of the particular report).

http://[vm-private-ip-address]/[my-project]/site/sitespeed-result/2014-07-16-15-57-55/

Note: You will need to put in the private IP address of your VM in order to access it through the browser. In my case my VM is set up to use 192.168.56.101.

Summary

And there you have it, a VM with the awesome sitespeed.io set up and ready to go. If you use a Vagrant boilerplate (example) with setup scripts (example) then you can configure this once and not have to worry about it again. It also means that if other members of your team use Vagrant (which is the whole point right?) then only one of you has to do it.

Go forth and optimise!

Dealing with Errors and Problems

sitespeed.io has pretty good documentation and FAQs. I encountered a couple of specific issues that I’ve highlighted below. If you find you’re getting java.net.SocketTimeoutException: Read timed out errors read this.

Also kind of related, if it seems to take an age to analyse the site read this (increase the number of allowed processes) and this (how to test one page only).