今回は社内でプライベートに運用している Webpagetest について紹介します。

日経新聞やDev.toなど爆速を実現している Web サイトが度々話題となります。
それは Web サイトにとってページの表示速度が非常に重要で関心が高いからだと思います。
サーバサイドの速度も重要ですが、近年、クライアントサイドの描画スピードのチューニングにも注目が集まっています。

残念ながら爆速といえる状態は実現できてはいませんが、いこーよやいこレポでもページの表示速度は重要だと考えていて絶えず改善を続けています。

速度改善は計測から始まります。
まず現状を計測してボトルネックを把握し、改善施策を実施してまた計測、そして前後を比較する。それにより施策の効果を測ることができます。

その計測、皆さんどうしているでしょうか？

手っ取り早いツールとしては Chrome のデベロッパツールに組み込まれている Lighthouse を使うことです。 Web エンジニアならば Chrome はすでにインストール済みだと思いますので、すぐに利用できます。結果だけでなくどう改善すればよいかアドバイスもくれます。最新の Chrome68 からは Lighthouse3 にアップデートされ、計測速度も機能も改善されているようです。
PageSpeed Insightsも同様のツールです。

ただ、これらのツールはワンショットの測定を行うには手軽で便利ですが、定期的、継続的に測定するのは大変です。

そこで、アクトインディでは WebPagetest を利用しています。

Webpagetest とは

サイトにアクセスしてみると「Test a website's performance」と書かれています。そのとおりウェブサイトのパフォーマンスを計測できるツールです。 Google を中心にオープンソースで開発されており、無料で利用できます。

次のような機能を持っています。

測定対象の Web サイトの URL を指定して測定できる。
各ファイルのダウンロード時間、JS の実行時間を計測できる
ブラウザの表示状態のスクリーンキャプチャを撮ってくれる
Lighthouse も組み込まれている
スマホをエミュレートした測定ができる。
API で計測実行ができる

もっと知りたい方はアカマイさんのブログ記事が詳しいので参考にしてください。
WebPagetest をご存知ですか？ - Akamai Japan Blog

Webpagetest はすぐ使えるように無料のパブリックサーバが提供されていますが、プライベートサーバを立てることも可能です。

アクトインディでは次の理由からプライベートサーバを運用しています。

混んでると待たされることがある。
ステージング環境も計測したいけれど Basic 認証のパスワードを入力するのがちょっと...
測定結果がいつまで保存されるのかよくわからない。

プライベートサーバを立てる

OSS なのでソースも手に入りますが、Dockerhub に Docker イメージも公開されています。

見ての通り、サーバとエージェントで構成されています。サーバはエージェントを操って計測してその結果を参照するためのもので、エージェントは実際に計測対象のサイトにアクセスするためのブラウザを実行するモジュールですね。

ソースを取ってきて動かすより、Docker でサクッと動かすほうが楽です。複数のコンテナが必要なので、Docker Compose を使って動かしています。

計測してみる

いこレポを次の条件で計測してみます。

測定対象 URL: https://report.iko-yo.net
計測回数: 1
画面キャプチャあり
timeliine、Lighithouse計測あり
Chrome のモバイルエミュレーションを有効にして iPhone6 でエミュレート
回線速度のエミュレートなし

計測が終わると結果は次の様に表示されます。

次の項目が表示されています。

各指標のスコア（画面右上に並んだ四角内の数字）
Waterfallチャート
- 各ファイルのダウンロード時間、実行時間を表示する
- クリックすると拡大表示できる
スクリーンキャプチャ

サマリーの結果以外にも詳細結果が確認できます。

Filmstrip View

どの時点でなにが表示されていたのか時間の経過とともに画面キャプチャを撮ってくれるのでそれを参照する画面です。
最大60FPSの時間解像度で表示できます。
First Meaningful Paintまでどれくらい時間がかかっているのか？どの要素の表示が遅いのか、速いのか？などを視覚的に確認できます。

特に便利なのは次の様に複数の結果を比較できることです。例えば、速度改善を行った前後で思ったように結果が出ているのかを評価できます。

※ この結果の上は回線エミュレートなしの結果、下は3G回線相当の回線速度での結果です。

Timeline 表示

Chromeのデベロッパツールのtimelineに慣れている人ならページレンダリングの様子はこちらのほうが見やすいかもしれません。
表示されるものは同じです。ボトルネックになっていそうな部分を開いてドリルダウン可能です。

Lighthouse の結果

計測時にLighthouseを有効にしておくと、次の様にローカルのChromeで実行したときと同様の結果を見ることができます。
これもChromeのデベロッパツールで利用した場合と結果の内容は同じです。

※ この結果は回線速度のエミュレートをしていないのでPerformance100を達成できています。アクトインディでは通常、回線エミュレートじて遅いネットワークでの計測で評価しています。

APIで定期計測実行

このような結果が確認できるように、定期的に実行して記録しています。

例えば次の様に API を叩くと上記条件のような計測ができます。

http://localhost:4000/runtest.php?url=https://iko-yo.net/facilities&label=CRON&runs=1&mobile=1&location=Linux:Chrome&f=json&mobileDevice=iPhone6&video=1&lighthouse=1&timeline=1

このようなAPIリクエストを一日数回、cronで実行しています。

docker-compose ファイルを公開します

さて、ざっくりどのような計測ができるのかを説明しましたが、自分でやってみたいと興味を持たれた方がいれば幸いです。

自分で動かしてみたい方のためにアクトインディで使っている docker-compose の設定一式を公開します。

actindi/compose_files_for_webpagetest: Docker Compose files for private WebPagetest instance.

Linux上なら次のコマンドを実行して http://localhost:4000
にアクセスすれば使えます。最初の実行はイメージにビルドがあるのでちょっと時間がかかります1。

$ git clone https://github.com/actindi/compose_files_for_webpagetest.git
$ cd compose_files_for_webpagetest
$ docker-compose up

Mac OS なら次の様にオプションを付けてdocker-compose
コマンドを実行してください。
（残念ながら Mac OS では回線速度のエミュレートはできません）。

$ docker-compose -f docker-compose.yml -f docker-compose-macos.yml up

Windowsでは... すみません。手元に環境がなく試していません。

また、ある程度の人数で共用して使うならば、エージェントの数を増やしたほうがいいでしょう。
--scaleオプションを使うことで、エージェントを複数起動できます。

例えば次のコマンドはエージェントを３つ起動してバックグラウンドで実行します。

docker-compose up --scale wpt_agent=3 -d

ご注意

ローカルネットワークでの利用のために作ったものなので認証等はありません。必要ならNginx等でリバプロして、Basic認証等を利用してください
計測後、ゾンビプロセスができることがあります。その場合、再起動すればゾンビプロセスが消えます。

最後に

アクトインディでは計測に基づいてサイトパフォーマンスをチューニングし続けます。
一緒に爆速を目指したいエンジニアを募集しています。

アクトインディ株式会社's job postings

Webpagetestでサイトのパフォーマンスを定期計測する

Takamichi Shimomoto

アクトインディ株式会社 / Other

UX 開発開発秘話エンジニア表示速度

4 Likes

アクトインディ株式会社

＜パーパス＞「次世代に価値を残す」私たちは、先達から良きものを継承し、感謝の気持ちを大事に、次の世代にその恩返しをしていきたいと想っています。今、自分たちが在ること、得られている物に感謝し、足りない部分は自分たちが補っていく。そして、次の時代を担う子ども達に少しでも素敵な環境を渡す。そのための手段の一つとして、アクトインディはサービスを提供しています。＜「いこーよ」に込める想い＞こどもたちの可能性は無限大です。親や大人たちは「こどもの才能を伸ばしてあげたい」「こどもの未来に何か良いものを残したい」と想いつつも、忙しい現代社会では日々のできごとに追われてしまいがち...。私たち「いこーよ」は、こどものかけがえのない今に向き合います。全力で遊んで、挑戦して、工夫して。その時湧きあがる驚きや悔しさや喜びは、こどもたちにとって人生の宝物になっていくはずです。「いこーよ」はこどもたちがたくさんの宝物を手に、その可能性を伸ばしながら、家族と共に成長していく社会を創っていきます。＜運営サービス＞【メディア事業】 ★いこーよ日本最大級の親子のお出かけポータルサイトです。2008年サービス開始後、親子の子育てや、お出かけに向き合ってきました。いこーよを通じて家族のおでかけや会話が増え、子ども達の笑顔が増えることで明るい社会創りにを目指してサービスを運営しています。今では年間7,852万UB/年、3.19億PV/年を誇る、国内の8割の子育て層が利用する日本トップクラスのサービスとなりました(2023年3月時点)。投稿される口コミをはじめ、各コンテンツの質の高さを追求しています。屋内プレイパークやアスレチック、遊園地など、様々なジャンルのおでかけ施設で使えるお得なクーポンの有料会員サービス「いこーよプレミアム」や「いこーよアプリ」も開発。 *姉妹サービス紹介* ★いこーよニュース（旧サイト名「いこレポ」） 2017年7月にサービスを開始したパパママ向けのパパママ向けの「子どもとお出かけしたくなる！遊びまとめニュース」を発信するおでかけニュースサイト。 ★未来へいこーよ子どもの未来を考える子育てサイトです。 2020年4月にスタートした「生きるチカラ（非認知能力）」をテーマにした子育てサイトです。「未来へいこーよ」では、子どもたちの「生きるチカラ」の土台となる好奇心や、頑張る気持ち、もっと知りたいという探究心、自分のアタマで考える力を育む様々な情報や体験を提供しています。 ★いこーよとりっぷ 2021年の8月にスタートした「地域の個性を親子に届ける」をテーマにした体験情報サービスです。「地域」の風景、習慣、文化や技術に触れて、感じることが、その地域への愛着を生み、大切な場所として受け継がれていく。そのつながりは、いつか子どもたちの生きる糧になる。「いこーよとりっぷ」は、親子が10年先も思い出せる体験づくりをお手伝いします。【研究事業】 ★いこーよ総研いこーよ総研（いこーよ総合研究所）とは、全国のお出かけ施設・レジャー施設のさらなる発展や市場の活性化を願い、お出かけに関わる様々な調査・分析データをコンテンツとして提供する、お出かけ施設の課題改善を目的とした情報メディアです。 ★子どもの未来と生きる力研究所子どもの健やかな心の成長を促す様々な体験や子どもの年齢ごとの心の成長などを独自に研究・分析します。予測不可能な世の中を生きていく力が子どもたちに求められている今、その力を育むために何が必要かについて研究し、子どもたちの未来に貢献したいと考えています。【イベント事業】 ★リアルお仕事体験　こどもわーくこどもわーくは、「本当の環境で本物の達人から、実際の仕事を学ぶ」をコンセプトに実施するリアルなお仕事体験プログラムです。本当の仕事現場で、いきいきと働く大人たちとのワクワク・ドキドキのふれ合いを通して様々なことへの気づきの機会を提供。好奇心や感受性を刺激し、子どもたちの「生きる力」を育む事業です。 ★いこーよ四季冒険部普段できない四季折々の自然体験を通して「年齢×体験」で子どもたちの可能性が広がる場を生み出し続けます。身近な自然の楽しみ方も提案しています。現在、埼玉県狭山市、飯能市、神奈川県厚木市を拠点に開催。 ✦6歳になったら机を作ろう！山を守るためには、私達アクトインディは子ども達山に入り間伐し、その木材を使って机づくりを行っています。小学入学前の子ども達が自分の学習机を作ります。川や海を支えている山。その山の木を活用した学習机を作る体験は、自然の恵みに感謝する心を育みます。私達は、このイベントを体験した子どもたちが、よりよい未来を創る担い手となることを願っています。