[α版公開] Webパフォーマンス定常計測ツール「rabify CI」を作った理由と、仕組み、使い方。

2020年1月4日 08:34

「本当は速くならない「Webサイトの表示高速化アンチパターン」10選」という記事を書いたところ、話題になりました。「計測しないとわからないよね確かに」ととても嬉しいコメントもいただいたのですが、「アンチパターンは使わないようにしよう」などと、もともとのコンセプトである「計測しよう」というメッセージを伝えるのは難しいなと感じたところです。

で、どうして計測が難しいのかと思うと、敷居低く定期的に計測するツールがないんですよね。

本記事で紹介してるrabify CIはalpha版です。予期せぬ不具合や、aplha版においてレコードしたデータの保全については保証しかねます。顧客と契約したデータ格納など本番利用につきましては、本リリースまでお控えいただきますようお願い申し上げます。

なぜ定常計測か

ふたつ理由があります。まずひとつ目は、私たち人間は、表示速度を絶対値として知覚することができず「速くなった気がする」「遅くなったかも」と主観でとらえるからです。そして、その速度の変化も50ms程度では認識することができません。ですので、

1. 最適な速度のWebサイトをリリースする
2. 保守を繰り返すうちに遅くなっていく（1作業50ms程度で知覚できない）
3. 普段作業してる人は変化に気づけないけど、たまに訪問するユーザは1日50ms×60作業後だと3秒遅くなってて離脱する

ということが起こりえます。ですので、客観的な定常計測データが必要なのです。

もうひとつが1回の計測では誤差が大きく検証材料として不十分だからです。Lighthouse/PageSpeed Insightsなどの無料ツールがでたことにより、少しずつ日本でも「パフォーマンスを計測する」という文化は広がってきたように感じるのですが、Webのパフォーマンスは、ドメインやサーバのアクセス数、ユーザのパソコン、ネットワーク環境などによって測定ごとにランダムで遅延するものであり、実際計測していると「この回だけすごく遅い」みたいなことがよく起こります。

スクリーンショット 2019-12-23 9.01.53

上記例の画像例だと、時々1秒単位で遅くなってたりします。Lighthouseが「計測する度に点数が違うガチャゲー」と言われる所以ですね。

そこで、定期的に計測しつつ、かつ比較する時も50回、100回の計測によって収束した値を確認しようというのが定常計測です。

定常観測ツールが高い理由と、rabify CIのコンセプト

CatchPointをはじめとして、様々なWebパフォーマンスの定常観測ツールが存在しています。しかし、本格的なものばかりで気軽にはじめるには少し難しくなっています。

その理由ですが、一般的な定常観測ツールは、Webサイトを観測するためのサーバを用意しており、また観測ごとに「観測サイトが多くなったからサーバスペックが遅くなった」ということが起きないように、使えるCPUとメモリを確保するため潤沢にサーバ台数を用意する必要があります。30分に1回計測ユーザが1万いるだけで、1日48万回ヘッドレスブラウザを立ち上げて観測して記録する必要があるので、基本料金が高くなるのも納得です。

そこで、rabify CIでは、CLIを用意して、ユーザが自分自身で構築した環境で値を計測してもらうことにしました。CircleCI Workflowなど、CIツールがスケジュールに沿ったコマンドの実行のサポートをしているのでさほどハードルは高くありません。また、サーバサイドモニタリング（※ Localhostでの計測）を推奨し、計測ライブラリで測定環境をシュミレーションすることにより、ドメインやネットワークの影響を最小限にとどめることにしました。

rabify CIのはじめ方

https://www.rabify.me/ にアクセスして、右上の「サインイン」からアカウントを作成ください。

スクリーンショット 2019-12-23 9.46.03

現在、パスワードとGitHubログインを用意しています。ちなみに、パスワードはAuth0の仕様でバリデーションが厳しいので、GitHubをおすすめします。

ログインすると管理画面に入りますので「ADD NEW」から計測するWebサイトのURLを入力ください。未リリースの場合は「https://example.com」で大丈夫です。

スクリーンショット 2019-12-30 17.18.40

OKをクリックすると画面が遷移しますので、「SETTINGS」タブをクリックして、以下の画面を表示します。

スクリーンショット 2019-12-30 17.19.32

ここでの設定の仕方は、１．ローカルホストを計測する場合　／　２．リモート（外部URL）を計測する場合、で異なります。チュートリアル的にそれぞれ進めていきましょう。Nodeのインストール済みのパソコンが必要になりますので、未インストールの場合は https://nodejs.org/ja/ から先にインストールください。

計測を実行する（単体実行）

１．リモートホストを計測

まず、リモートホストを計測してみましょう。実在する https://www.example.com をネットワーク越しに計測します。「Target」の値をRemoteにします。

そして、SAVEをクリックしたあと、タブ「COMMAND」に移動してみましょう。

スクリーンショット 2019-12-30 17.20.24

まず、一行目に「INSTALL CLI」として、CLIのインストール方法が書いてあります。

% sudo npm install @rdlabo/rabify-cli -g

このコマンドで、計測用のCLIをインストールします。インストール後は「rabify」コマンドが実行できるようになります。試しにインストールしてから rabify コマンドを引数なしで実行してみましょう。以下のように表示されたらインストールに成功しています。

% rabify
CLI for rabify
VERSION
 @rdlabo/rabify-cli/0.1.4 darwin-x64 node-v10.16.2
USAGE
 $ rabify [COMMAND]
COMMANDS
 ci     Build Command for rabify CI
 hello  describe the command here
 help   display help for rabify

-bash: rabify: command not found と表示された場合、npmパッケージにパスが通っていません（nvmなどご利用の時に起こりえます）。その場合、.bash_profileで設定してパスを通してください。

続いて、計測コマンドを実行してみましょう。ID, TokenはそれぞれCOMMANDにかかれている割り当てられたものを利用してください。

計測コマンドを実行します。

% rabify ci run --id=【自分のID】 --token=【自分のTOKEN】

すると、計測ライブラリをインストールして自動的に計測を開始、一定時間かかったあとに、結果をサーバに送信します。コマンドラインで以下の結果が表示され、rabify CI上のグラフでプロットされれば計測完了です。

スクリーンショット 2019-12-23 10.11.16

1回の実行で、SIMULATE（ライブラリによるシミュレーション）、DEVTOOLS（ブラウザによる結果のシミュレーション）、PROVDED（実測）のそれぞれが3回ずつ行われます。

ローカルホストを計測する場合
続いて、ローカルホストの測定を行います。それではまずrabify CIの設定を行いましょう。Targetの値をLocalに変更します。

スクリーンショット 2019-12-30 17.21.30

そして、「Directory」にルートからのパス（www/public/index.htmlが公開フォルダの場合はwww/public）を入力ください。計測時は、そのDirectoryをターゲットにローカルサーバを立ち上げます。また、ビルドのコマンドがある場合はCommandを入力して「SAVE」をクリックして保存してください。

コマンドラインで、プロジェクトディレクトリに移動して、ビルドが必要な場合はビルドコマンドを実行します（上記の場合は、npm build）。そして、ビルドが完了したら、計測コマンドを実行します。

% rabify ci run --id=【自分のID】 --token=【自分のTOKEN】

すると、自動的にローカルサーバを立ち上げ、計測を実行します。成功すると、先程同様にrabify CIにデータが送信され、チャートに結果がプロットされます。

まとめ

このようにrabify CIでは、rabify CIのWebアプリ上で計測について設定を行い、CLI越しにその設定を取得して計測を行います。当然のことですが、計測途中でWebアプリの設定を変更すると、そこから異なる値を取得することになりますのでご注意ください。

計測を実行する（定期実行）

では、CircleCIを使って定期実行をスケジュールしましょう。COMMANDの「CIRCLECI」に設定ファイルが用意されています。

スクリーンショット 2019-12-30 17.22.32

プロジェクトフォルダに .circleci/config.yml ファイルを用意して、このコマンドをそこにコピーして、GitHubにプッシュします（プロジェクトフォルダ直下にpackage.jsonがない場合は、package.jsonが必要です）

そして、CircleCIにログインして、左の「ADD PROJECT」から当該プロジェクトの「SETUP PROJECT」をクリックしてください。以下のような画面が表示されますので、Operation SystemはLinuxのまま、Languageは「Node」を選んで、右下の「Start building」をクリックします。

スクリーンショット 2019-12-23 10.18.56

うまくいけば、ビルド後、1時間に1回測定が行なわれ、rabifyCIへ測定データがアップロードされつづけるようになります。

schedule_workflow:
triggers:
- schedule:
cron: "0 * * * *"

定期実行のスキーマは、最後のほうの「cron」によって設定されており、標準は1時間に1回となっています。調整する場合は https://www.server-memo.net/tips/crontab.html を参考ください。

これで完了です。

未実装な部分

以下が現時点で予定している実装です。

・ユーザプロフィールの入力
・トップページ以外の計測（マージ待ち）
・計測結果のシェア機能
・二者の計測結果の比較機能
・利用上限の設定と課金システム
・ドキュメント

現在、alpha版ということでご了承ください。またバリデーションが甘くなっています。直します。

お気づきのことや機能要望は https://github.com/rabify-team/rabify にお願いします。

スポンサーの募集

できるだけユーザに低金額帯でご利用いただけるように、広告スポンサーを一口30万円で募集する予定です。もし興味がある方は https://twitter.com/rdlabo までご一報ください。Webの世界で定常計測を当たり前にするためにご協力いただけましたら幸いです。

それでは、また。

この記事が気に入ったらサポートをしてみませんか？