How to use Google PageSpeed Test in CI

[t-jindai]

---

date: 2017-07-04
title: How to use Google PageSpeed Test in CI
summary: Is it possible to test site using Google PageSpeed Insight in CI ? The answer is YES!
slug: how-to-use-google-pagespeed-test-in-ci
lang: en-US
tags: [ci, performance]

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 [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 !!