Automating PageSpeed Insights

Here at earthware we stick to the mantra that performance is a feature. As part of our site sign off process we ensure all aspects of a site are optimised, from compression through to image optimisation and caching. Now that more and more people are browsing sites on their mobile phone or tablet we look at optimising for mobile first, for example by eliminating render-blocking javascript and css.

Tooling

There are litreally hundreds of site checkers available to test a site in, a few examples are:

The service we use consistently at earthware is Google's PageSpeed Insights, as it has several advantages over the other available services:

  • It's from Google! Site speed has, for a long time, been a metric considered when Google have been ranking your site in their search results, therefore a poor performing Google PageSpeed test will lead to your site appearing on the dreaded page 2 on Google's results.
  • It concetrates on performance and performance alone - some of the other services will provide additional information such as missing meta descriptions but for a performance tool we are only interested in tests and resulting information about the performance of the site.
  • It provides a set of APIs that allow developers to automate tests and view results from the whatever set of tooling we like. Sound interesting? Then read on!

Automating PageSpeed Insights

As mentioned above Google PageSpeed provides a set of APIs to help you automate running PageSpeed tests. Though there is an argument for rewriting the wheel and writing your own implementation, a number of libraries already exist:

For the rest of this post I'll be concentrating on how we've used psi and how you can include it as part of your build process.

psi

psi-screenshot

psi is a node package that can be used in two ways: programmatically or from the command line.

Programmatically

The programmatic implementation is useful when integrating either into a larger script/package or as part of a task runner (e.g. gulp or grunt). An example of how to use psi programmatically is below:

const psi = require('psi');

psi('earthware.co.uk').then(data => {
  console.log(data.ruleGroups.SPEED.score);
  console.log(data.pageStats);
});

Further usages and an explanation of the passed in arguments can be found in the github repository.

Command line

As with most CLI utilies its best practice to install psi globally:

npm install --global psi

Once installed psi can be run like the below:

psi earthware.co.uk --strategy "mobile"

psi is available on npm here, and is on github here.