If you're using a continuous integration service it is pretty easy to add in-browser site performance testing to your suite of tests. Sitespeed.io is a fantastic tool for analyzing the render processing time (among other things) for sites- far beyond just looking at the time totals but specifics such as paint times, DOM content load and complete times, and more. If you're doing javascript heavy work or lots of intergrations with asynchronous or third party services this can be really helpful for tracking the improvement- or degradation- of your work.

I'm using CircleCi as my continuous integration tool. This should work with services such as Travis as well. My circle.yml file adds the following items:

dependencies:
pre:
npm install -g sitespeed.io

And something like this test. Craft the URI to meet your testing environment, browser types, and number of test iterations to meet your needs.

test:
override:
- sitespeed.io -u http://SITE.LOCAL --budget cnf/sitespeed/budget.json -b chrome -n 3 -r $CIRCLE_ARTIFACTS/sitespeed --suppressDomainFolder --outputFolderName test

The test specifies performance budget file which sets the performance requirements. You can tune the specifications in this file for the characteristics that you're looking for- first paint time, final render time, etc. Your test results are put into the artifacts directory so you can browse them at some later point- here's where the artifacts are in the circle build:

And here's an actual report which has been run as part of the CircleCi build. 

Arguably the hardest part of this process is building the performance budget file which is tailored to your needs, particularly since running them on a CI server is going to have a different profile than your production environment.

Categories: Planet Drupal