gas-webpagetestというGoogle Apps Scriptで動作するパフォーマンス計測ツールがあります。

このツールでは、WebPagetestという指定URLなどにウェブブラウザでアクセスし、パフォーマンスに関するメトリクスを取得するツールの計測や結果の記録を自動化できます。

記録はGoogle SpreadSheetに逐次書き込まれ、その記録をGoogle DataStudioで可視化したりダッシュボードを作成できます。

ここまででてきたツールは無料で十分に使えます。 gas-webpagetestを使うことでとりあえず計測を自動化してみるようなところを殆どコストなしに実現できます。

gas-webpagetestを使って取得した記録データをGoogle DataStuidoで可視化したサンプルは次のURLで確認できます。

• DataStudio + gas-webpagetest: https://datastudio.google.com/u/0/reporting/16CAqnC3ErfJ_B0UypUq4zQzYdReuW24i/page/1hVS

なぜ継続的に計測するかについては、次のスライドで紹介しています。 他のパフォーマンス計測サービスなども紹介しています。

• Webpagetestから始める継続的パフォーマンス改善

gas-webpagetest

gas-webpagetestは1サイト = 1リポジトリ = 1SpreadSheetのデザインになっています。 (1:nの対応もやればできなくないと思いますが、IssueやPRを出すといい気がします)

そのため計測するサイトごとにSpreadSheetを作成して、そこへ紐づく形でGoogle Apps Script(gas-webpagetest)をデプロイします。

Google DataStudio側で複数のデータソースの合成などもできるので表示側でデータをくみあわせるといったことも可能です。

使い方

gas-webpagetestはNode.jsとYarnが必要なので先にインストールしておいてください。

1. git clone this repository

次のリポジトリを好きな名前でcloneします。

git clone https://github.com/uknmr/gas-webpagetest.git
cd gas-webpagetest

2. Install dependencies by yarn

リポジトリの依存をYarnでインストールします。 gas-webpagetestではclaspというGoogle Apps Scriptを開発するためのフレームワークを使っています。

yarn install

3. clasp login

claspを使ったことがない人は、Google Apps ScriptをCLIからデプロイするために認証が必要です。

次のコマンドを叩くと、ブラウザでGoogle Apps Scriptの認証画面が開くので認証してください。

yarn clasp login
# Login and Authorize clasp

4. Create empty spreadsheet that is recorded result of WebPagetest

ここから、記録するGoogle SpreadSheetの準備をしていきます。

1. ここから新しいSpreadSheetを作成する
2. SpreadsheetのIDをコピーしておく

• たとえばSpreadSheetが https://docs.google.com/spreadsheets/d/asn__asxScJZi-2asd4242sd23HO441Ok/edit#gid=0 というURLの場合は
  • asn__asxScJZi-2asd4242sdHOeB6t5XFdOk が spreadsheet id です。

5. Create new Google Apps Script and connect it your spreadsheet.

次のコマンドをターミナルで叩くと新しいGoogle Apps Scriptを作成して、そのApps Scriptを先ほど作成したSpreadSheetに紐づけます。

先ほどコピーしたspreadsheet idを使うので、次のように引数に渡してください。 <script title>はなんでも大丈夫なので、分かりやすいタイトルにしておくといいです。

yarn run create-gas "<script title>" "<spreadsheet id>"
# Example
# yarn run create-gas "gas-webpagetest" "asn__asxScJZi-2asd4242sdHOeB6t5XFdOk"

yarn run create-gas command’s arguments:

• 第1引数: Google Apps Script title
• 第2引数 spreadsheet id

このコマンドで次のエラーが出る人は、表示されているURLにアクセスして、パーミッションを許可して”ON”にしてください。 初めてGoogle Apps Scriptを書く人はオフになっていると思います。

Error: Permission denied. Enable the Apps Script API: https://script.google.com/home/usersettings

6. Configure .env file

ここからは、どのサイトを計測するかやどのような頻度や設定で計測するかを.envファイルに書いています。cloneしたリポジトリには.envというファイルが入っているので、このファイルを編集します。

.envファイルの次の3つは最低限変更が必要です。 また、WebPagetestのAPIキーが必要になるのでWebPagetest - Get API Keyから登録して取得してきてください。(一日150回まで叩けます)

• WEBPAGETEST_API_KEY: WebPagetest API key
  • WebPagetest - Get API Keyからメールアドレスを登録するAPIキーが手に入る
• RUN_TEST_URL: 計測したいURL
• SHEET_NAME: SpreadSheetで記録先となるシートの名前
  • シートの名前は下部に表示されているタブみたいな部分の名前です。
  • 

Note: URLがログイン必須の場合は、WebPagetest scriptを書いてログインするスクリプトを指定する必要があります。

.envのサンプルは次のような感じです。 モバイルで計測したい場合はWEBPAGETEST_OPTIONS_MOBILEオプションを1に端末を指定します。 PCで計測したい場合はWEBPAGETEST_OPTIONS_MOBILEオプションを0して、WEBPAGETEST_OPTIONS_LOCATION=ec2-ap-northeast-1:Chromeでブラウザや場所を指定します。

# WebPagetest API Key
## See https://www.webpagetest.org/getkey.php
WEBPAGETEST_API_KEY=A.asdasdasdsdasdasdasdasjdlasjd
# Test Target URL
RUN_TEST_URL=https://www.youtube.com/watch?v=6UeRMMI_IzI
# Run Test interval
## Set run test interval by using Google Apps Script Time-Based Trigger
## Execute runTest function every RUN_TEST_INTERVAL
## Example:
## `2h`, `1h`, or `30m`
## Limitation:
## - Can not combine hour with minutes
##   - `1h30m` => Error
## - Allow to set one of `1m`, `5m`, `15m`, `30m` as minutes
RUN_TEST_INTERVAL=30m
# Sheet name to record
SHEET_NAME=stats
# If it is 0, suppress Network Error report from Google Apps Scripts
REPORT_NETWORK_ERROR=0

# WebPagetest Options
# https://sites.google.com/a/webpagetest.org/docs/advanced-features/webpagetest-restful-apis
## Number of test runs (1-10 on the public instance)
## gas-webpagetest use median results
WEBPAGETEST_OPTIONS_RUNS=3
## Location to test from
WEBPAGETEST_OPTIONS_LOCATION=ec2-ap-northeast-1:Chrome
## Set to 1 to skip the Repeat View test
WEBPAGETEST_OPTIONS_FVONLY=1
## Set to 1 to capture video (video is required for calculating Speed Index)
WEBPAGETEST_OPTIONS_VIDEO=1
## Set to 1 to disable optimization checks (for faster testing)
WEBPAGETEST_OPTIONS_NO_OPTIMIZATION=1
## Set to 1 to have Chrome emulate a mobile browser
WEBPAGETEST_OPTIONS_MOBILE=0
## Device name from mobile_devices.ini to use for mobile emulation
## only when mobile=1 is specified to enable emulation and only for Chrome
WEBPAGETEST_OPTIONS_MOBILE_DEVICE=Pixel
##  Set to 1 to have a lighthouse test also performed (Chrome-only, wptagent agents only)
WEBPAGETEST_OPTIONS_LIGHTHOUSE=1
## WebPagetest Scripting Option
## Set file path to scripting file
## https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting
# WEBPAGETEST_OPTIONS_SCRIPT_PATH=./script.txt
....

7. Deploy the gas-webpagetest script to your Google Apps Script: yarn run deploy

最後のこのスクリプトをGoogle Apps Scriptとしてデプロイします。

次のコマンドでデプロイできます。設定を変更したい場合は再度デプロイしてください。

yarn run deploy

Setup schedule for gas-webpagetest script

gas-webpagetestがデプロイされると、紐付いているSpread Sheetには次のようにメニューが出現します。

• Run Test
  • WebPagetest APIを使ってテストを手動実行します
• Get Test results
  • テストした結果を取得してSpread Sheetに書き込みます。
• Update column titles
  • 必要なカラムのタイトル(1行目)を更新します。初回に実行しておくと良いです。
• Set run test time triggers
  • .envで設定した頻度で定期的にRun Testを実行するCronをセットします。
  • デフォルトでは30分に1度計測します

はじめて使うときは次のような手順を踏めばあとは自動的に計測記録が溜まっていきます。

0. Spread Sheetにアクセスする
1. “Update column titles”を実行する
2. “Set run test time triggers”を実行する

後は数日とか1週間程度放置しておくと記録が増えているはずです。 手動で試したい場合はRun Testを実行してみてください。(計測は時間がかかるので定期的にGet Test resultsも必要です)

可視化

Google DataStudioとSpread Sheetを連携させると記録したデータを可視化できます。

1. Data Studio Connect to Dataにアクセスして、先ほどのSpread Sheetをデータソースとして追加する
2. Template Projectを開く
3. テンプレートプロジェクトの右上の”このレポートをコピーして作成”があるので、これをコピーして自分のSpreadSheetをデータソースとして選択する

これだけで次のようなダッシュボードが見れるようになります。

おわりに

gas-webpagetestはもともと@uknmrさんが作成して公開しているツールです。

• DataStudioとGASでWebPagetestの計測結果をグラフ化する | mediba Creator × Engineer Blog

似たような仕組みのものを作ろうとしていたところ、gas-webpagetestがあったので機能追加していいか聞いて、大量のPRを送ってひとまず自分が欲しかったものができた感じです。

@uknmr こんにちは。
claspでWebPageTestの計測/記録スクリプトを書こうとしていて、https://t.co/O6lUavovFz を見つけて、やりたいことはほぼ同じでした。
そのため足りない部分についてのPRとかを送ろうかなと思ったのですが、一部破壊的な変更もしないといけないためどうするのがいいでしょうか?

— azu (@azu_re) July 28, 2018

WebPagetestで十分なパフォーマンスデータが取れるかはまた別の問題です。 パフォーマンスはいろいろな要因がぶつかりあった副作用によって変化するので、ちゃんととるならもっといろいろなデータが必要です。また現在のgas-webpagetestでは中央値を使っているので、「ユーザのn%が改善するから入れよう」といったパーセンタイル的な指標のデータにはなっていません。

• Prioritizing the Long-Tail of Performance - TimKadlec.com

それでもファイルサイズなどUAにあんまり依存しないデータを集めるにはコスト面も含め手軽だと思うので、興味ある人は試してみてください。

• uknmr/gas-webpagetest