How to use Google PageSpeed Test in CI
Tags: ci, psi, performance
Published: 2019-02-20 23:52:40

---
title: How to use Google PageSpeed Test in CI
published: true
tags: ci,psi,performance
canonical_url: https://blog.tomoyukikashiro.me/post/how-to-use-google-pagespeed-test-in-ci
---

This post was originally published at [How to use Google PageSpeed Test in CI](https://blog.tomoyukikashiro.me/post/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](https://developers.google.com/speed/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](https://blog.tomoyukikashiro.me) which is generated by [Pelican](https://blog.getpelican.com/) 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](http://blog.teamtreehouse.com/deploy-static-site-heroku) 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](https://travis-ci.org/%24%7Baccount_name%7D/%24%7Brepository_name%7D/settings)

You need those settings in `Environment Variables` section.

- HEROKU_API_KEY
- TEST_SITE_GIT\_REMOTE
- TEST_SITE_URL
 ![travis settings screen](https://i.gyazo.com/87e20559c8cb8e514c1eedff9925d5b6.png)
### 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](https://github.com/tomoyukikashiro/blog.tomoyukikashiro.me/blob/master/scripts/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](https://devcenter.heroku.com/articles/heroku-cli#npm-version) 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](https://github.com/addyosmani/psi) is npm module to do Google pageSpeed Insights.

## Reference

You can check example here ![https://github.com/tomoyukikashiro/blog.tomoyukikashiro.me](https://github.com/tomoyukikashiro/blog.tomoyukikashiro.me)

Let me know if you have question !!