WebPageTestの使い方【サイト表示高速化の計測ツール】

ふきげん猫ちび

Webサイトを高速化したい

Webサイト高速化のプロジェクトに関わっているんだけど、どうやって効果を計測するの？

ふきげん猫ちび

WebPageTestというツールの使い方を知りたい

このような方に向けて書いていきます。

この記事の内容

特に会社でWebサイトの高速化のプロジェクトに取り組んでいる人にとっては必須ツールになると思うので、参考にしてみてください。

ちなみにURLはこちらです。

WebPageTestとは？

オープンソースで公開されているWebサイトのパフォーマンス（スピード）を計測するためのWebサイトです。

無料で気軽に利用できるので、活用している企業も多いです。

僕は4G、iPhone X、Chromeという条件で計測しているのですが、よく「全部ロードするまでに６秒もかかるのか、遅いな～」と絶望しています笑。

僕が一番便利に感じているのはここですね。

他の人にテスト結果を共有したい時はURLをコピペするだけでOK（どのくらいアーカイブをしてくれるのかは分かりません）。

APIが取得できるので、Google Sheetと組み合わせて自動計測したり、大量のページを１クリックで計測したりといろいろ出来ます。

Webサイトのスピードというのは普通に計測するのが難しいです。

会社で高速化のために何かをした後に、「トップページが２秒速くなった」みたいな報告をしたい気持ちは分かります。

ただ、Webサイトのスピードというのは条件によって異なるので、デバイスの種類や回線によってどのくらい速くなるのかなども変わってきます。

Google Analyticsの計測方法は、実際のユーザーがページロードにかかったスピードを計測しています。

さらにGoogle Analyticsはサンプリング形式（すべてではなく特定のデータを抽出する）を用いているので、定義としては以下のような認識になります

「ランダムに選定されたのユーザーがWebサイトを訪問した時のページスピード」

ここで問題になるのが、Google Analyticsのページスピードはは訪問しているユーザーのデバイスや回線に依存するということです。

これによって、ページスピードを高速化するために変更を行った後にGoogle Analyticsの数字を見ても「変わっていない」みたいなことがよくあります。

仮想環境で一定の条件で計測することにより、変更前と変更後の変化を見ることが出来ます。

それでも時間帯や曜日、アクセス数などの条件が違うと平等な条件でなくなってしまうのですが、そこらへんのコツは後述しています。

webpagetest.orgで計測したいページのURLを入力し、「Start Test」をクリックするだけです。

結果は以下の通りでした。

Security ScoreがFというショッキングな結果が表示されて少し動揺しています笑。

スピードはまあ良いスコアが出ていると思います。

First Byte … 最初の1バイトが到着するまでの時間
Start Render… 空白ページからコンテンツが初めて表示されるまでの時間
Speed Index… ファーストビューが見えるまでにかかった時間
Document Complete Time… 静的コンテンツの読み込みが終わった速度。画像やHTMLコードなどが該当します。
Document Complete Requests … 静的コンテンツをリクエストする数
Document Complete Bytes In … 静的コンテンツを読み込み始めた時間
Fully Loaded Time…静的コンテンツ＋動的コンテンツの読み込みが終わった速度。JavaScriptなどでダイナミックにコンテンツを読み込んでいる場合は遅くなります。
Fully Loaded Requests …静的コンテンツ＋動的コンテンツを含めたすべてのファイルをリクエストする数
Fully Loaded Bytes In … 静的コンテンツ＋動的コンテンツを含めたすべてのファイルを読み込み始めた時間

ちなみにその他のWebサイトスピードのレポートでよく使われる指標もついでに書いておきます。

First Contentful Paint… ブラウザーが DOM からコンテンツの最初のビットをレンダリングし、ページが実際読み込み中というユーザーへの最初のフィードバックがなされる時間
Largest Content Paint… 重要なコンテンツがいつ表示されたか
Cumulative Layout Shift… 表示されるページコンテンツにおける予期しないレイアウトのずれの量