2016/08/24更新

[フロントエンド] 表示速度の計測ができるWebPagetestを使って、毎日自動計測を行う

こんにちは、サイトパフォーマンスに取り組み中の@yoheiMuneです。
今日はWebPageTestというフロントエンドの表示計測ツールの紹介と、そのAPIを用いた自動計測についてブログを書きたいと思います。

WebPagetestとは

WebPagetestとはフロントエンドの初期表示の時間などを計測できるツールの1つで、以下のサイトから利用できます。

https://www.webpagetest.org/

個人的にはこのツールの以下の点が気に入っています。

回線速度や端末エミュレートをしてくれる
数値を細かく表示してくれる
初期表示に必要なリクエスト一覧とその詳細が表示される
VisualCompletedという独自の1stViewの表示速度の指標がある

特にVisualCompletedという独自指標が、ユーザー視点に合っていていいなーと感じています（また、計測開始〜VisualCompletedまでのビデオキャプチャも見ることができます）。

使い方は簡単で、上記リンク先を開いて必要そうなところを入力して「START TEST」ボタンを押せば計測が開始します。以下はこのブログのトップページを計測した結果の例を貼り付けてみました。

ということで、詳細に結果を見ることができますので、ぜひ一度試してみてください〜。いろいろと学ぶことがあって楽しいですよ。

WebPagetestを自動的に実行する

さてここからが本題で、WebPagetestはRESTfulなAPIを提供していて、それを使うことで定期的に計測を行うことができます（仕事でパフォーマンスについて扱うときに調べていたら見つけた次第です）。

WebPagetestのドキュメントは以下にあり、 https://sites.google.com/a/webpagetest.org/docs/

RESTfulなAPIの説明は以下にあります。
https://sites.google.com/a/webpagetest.org/docs/advanced-features/webpagetest-restful-apis

ここでは備忘録も込めて、使い方をブログに残したいと思います。

APIキーを入手する

APIを利用するためにはAPIキーを入手する必要があり、その鍵をAPIのパラメータに設定する必要があります。以下より入手することができます。
https://www.webpagetest.org/getkey.php

入手の結果、以下のようなキーを入手できればOKです。

A.579e59b223742b70437111ecXXXXXXXX

APIを利用する（概要）

WebPagetestをAPI経由で利用する場合に、大きく分けて以下3つのAPIを利用します。

#01 Submitting test requests（テスト開始）
http://www.webpagetest.org/runtest.php

#02 Check test status（テストの終了をチェック）
http://www.webpagetest.org/testStatus.php

#03 Getting test results （テスト結果を取得）
https://www.webpagetest.org/jsonResult.php

それぞれについて詳細を書きたいと思います。実装についてはPythonを用いますが、それ以外の言語の方はそれように読み替えていただけたらと思います。

APIを利用する（テスト開始）

まずはテストを開始するためにAPIを実行します（ここでAPIキーを使います）。APIの説明（Submitting test requests）に合わせて、以下のように実装します。様々なパラメータが指定可能ですので詳細はAPIの説明をご覧ください。

import urllib.request
import urllib.parse
import json

# APIキー
API_KEY = "A.579e59b223742b70437111ecXXXXXXXX"

# 計測開始
url = "http://www.webpagetest.org/runtest.php"
params = {
    "url": target_url,
    "k": API_KEY,
    # レスポンスタイプをJSONに指定
    "f": "json",
    # Chromeを利用、3G回線をエミュレート
    "location": "Dulles:Chrome.3G",
    # モバイル表示を使用
    "mobile": 1,
    # モバイルデバイスはNexus5を使用
    "mobileDevice": "Nexus5",
    # 結果でビデオキャプチャを見れるように指定
    "video": 1
}
# リクエスト開始
url += "?" + urllib.parse.urlencode(params)
response_json = json.loads(urllib.request.urlopen(url).read().decode("utf-8"))

# 今後のAPIで利用するテストIDを取得
test_id = response_json["data"]["testId"]

# 結果を表示するURLを取得
result_url = response_json["data"]["jsonUrl"]

これでテストを開始することができました。次にこのテストが終了するまでをチェックします。

APIを利用する（テストの終了をチェック）

次にテストが終了状態になることを定期的にチェックします（WebPagetestの負荷によっては数分かかります）。APIの説明（Check test status）を詳細は参照ください。

import json
import time

# 計測終了をウォッチ
while True:
    # ちょっと待つ
    time.sleep(5)
    # テストの状態を取得する（ここでテストIDを使用する）
    url = "http://www.webpagetest.org/testStatus.php?f=json&test=" + test_id
    response_json = json.loads(urllib.request.urlopen(url).read().decode("utf-8"))
    status_code = int(response_json["statusCode"])
    # ステータスコードが200だと終了
    # ステータスコードが100番台の場合は、テスト中のステータス
    if status_code == 200:
        break
    # 400系はエラー
    elif status_code >= 400:
        raise Exception("ERROR!!! url=" + target_url)

こんな感じで処理が終わるのを待ちます。

APIを利用する（テスト結果を取得）

テストが終了したら結果を取得します。ここではテスト開始の時に取得したresult_urlを使います。

# テスト結果を取得する
url = result_url
response_json = json.loads(urllib.request.urlopen(url).read().decode("utf-8"))

# ここではVisualCompleteを取得しています
visual_complete_time = response_json["data"]["runs"]["1"]["firstView"]["visualComplete"]
print("visual_complete_time:", visual_complete_time)

レスポンスとしては非常に大きなJSONが帰ってきますので、その中から必要そうなものを取得します。

最後に

webPagetestを大規模に利用する場合はプライベートインスタンスも用意されていますが、今回のようにサクッと使う場合にはパブリックなものを使うといいですね。フロントエンド系の速度計測ツールは色々とありますが、自動実行できるあたりがWebPagetestは素敵です。もう少し触る予定なので、またノウハウをかけたらと思います。

最後になりますが本ブログでは、フロントエンド・開発関連・Swift・Linux・Python・Java・機械学習など雑多に情報発信をしていきます。自分の第2の脳にすべく、情報をブログに貯めています。気になった方は、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。

最後までご覧頂きましてありがとうございました！