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

travis settings screen

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 [email protected]:${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 ! https://github.com/tomoyukikashiro/blog.tomoyukikashiro.me

Let me know if you have question !!