How to use Google PageSpeed Test in CI

This post was originally published at How to use Google PageSpeed Test in CI.

Motivation

You know site performance is important for SEO, Conversion but it is difficult to find how to test it continuously. (It was difficult for me…). So I will explain how to set up peformance test in CI using Google PageSpeed Insights.

Outline

I will explain continuous performance test settings using Google PageSpeed Insights in Travis CI with heroku. Application I want to test is this blog which is generated by Pelican so the application is totally static site (no need DB and server side program).

• Heroku app
• Travis CI connected with github repository

Basic flow is below.

- 1 Make PR in github repository

2 Start test process in Travis CI

• 1 Install depandencies
• 2 Build application
• 3 Push built application to heroku
• 4 Run Google Page Insight test

Prepare heroku

First step is setup heroku for test the application.

$ mkdir ${app_name}
$ cd ${app_name}
$ git init
$ heroku apps:create ${app_name}

This article could be good reference to make static server on heroku !

Edit CI settings

Second step is setup travis CI. You can see travis CI settings for repository like below.

https://travis-ci.org/${account_name}/${repository_name}/settings

You need those settings in Environment Variables section.

• HEROKU_API_KEY
• TEST_SITE_GIT_REMOTE
• TEST_SITE_URL ### HEROKU_API_KEY

Heroku app is git repository and it’s private so to clone it in travis server you need this token. You can see it thru this command.

bash
$ heroku auth:token

TEST_SITE_GIT_REMOTE

heroku app git url. git protocol would be better git@heroku.com:${app_name}.git instead of https protocol not to be asked id/password everytime.

TEST_SITE_URL

heroku app url to test.

Edit CI tasks

Basic travis.yml is here. You need replace ${your install process here} and ${your build process here} for your application

sudo: required
language: node_js
node_js:
  - "7"
install:
  - ${your install process here}
  - npm install
  - scripts/setup_heroku.sh
  - git clone $TEST_SITE_GIT_REMOTE output
before_script:
  - ${your build process here}
  - cd output && git add --ignore-removal . && git commit -m 'deploy for test' && git push origin master -f && cd -
script:
  - npm test $TEST_SITE_URL
after_script:
  - heroku keys:clear

setup_heroku.sh

setup_heroku.sh

This script add ssh private key to heroku to clone repository thu heroku CLI.

I use nodejs heroku command which is not recommended by heroku because I could not install other installation methods… If you have idea let me know!

npm test $TEST_SITE_URL

"devDependencies": {
    "psi": "^3.0.0"
  }, 
  "scripts": {
    "test": "npm run test_psi",
    "test_psi": "psi --strategy mobile"
  },

psi is npm module to do Google pageSpeed Insights.

Reference

You can check example here

Let me know if you have question !!