LINEグループ「Digital Marketing Japan」を始めました

Webサイト高速化のおすすめKPI測定方法。WebPageTestの使い方

WebPageTestの使い方

ふきげん猫ちび

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

ふきげん猫ちび

ふきげん猫ちび

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

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

この記事の内容
  • WebPageTestとは?
  • WebPageTestをおすすめする理由
  • 各指標の説明
  • 使い方のコツ

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

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

参考 https://www.webpagetest.org

WebPageTestとは?

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

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

参考 Akamai Japanブログ | Akamai公式

WebPageTestの特徴

仮想環境で条件を指定して、実際の速度を秒数で見ることが出来る

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

テスト結果のURLが共有できる

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

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

APIを使っていろいろ出来る

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

WebPageTestをおすすめする理由

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

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

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

Google Analytisのページロードスピードを指標にしてはいけない理由

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

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

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

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

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

WebPageTestの場合は仮想環境でテストしている

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

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

実際のレポートを見てみる

WebPageTestの使い方

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

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

WebPageTest

世界のヘイショー

えっ。。。

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

各メトリックスの指標

  • First Byte … 最初の1バイトが到着するまでの時間
  • Start Render… 空白ページからコンテンツが初めて表示されるまでの時間
  • First Contentful Paint… ブラウザーが DOM からコンテンツの最初のビットをレンダリングし、ページが実際読み込み中というユーザーへの最初のフィードバックがなされる時間
  • Speed Index… Webページがどれだけ迅速に表示されて、可視化されたかを表すもの
  • Largest Content Paint… 重要なコンテンツがいつ表示されたか
  • Cumulative Layout Shift… 表示されるページ コンテンツにおける予期しないレイアウトのずれの量
  • Total Blocking Time
  • Document Complete Time… point where the browser onLoad event fires and is generally when all of the static page content has loaded
  • Document Complete Requests
  • Document Complete Bytes In
  • Fully Loaded Time…the point after onLoad where network activity has stopped for 2 seconds (usually any activity out here is from javascript on the page doing something dynamic)
  • Fully Loaded Requests
  • Fully Loaded Bytes In

参考 Webpagetestから始める継続的パフォーマンス改善ページロードタイム編 | azu.github.io

自動化されたレポートを作成する方法

Google Data Studioを使う場合

gas-webpagetestというGoogle Apps Scriptを用いて自動計測し、Google Data Studioで可視化する方法が以下の記事で紹介されています。

参考 gas-webpagetestでWebPagetestのパフォーマンス計測を自動化、可視化する | Web Scratch

まとめ

未完成ですが一旦公開します。

コメントを残す

メールアドレスが公開されることはありません。