こんにちは、プロクラスの國府です。
今回は、前回に続き、Webサイトの表示スピードの測定ツール「WebPageTest」の基本的な使い方を紹介したいと思います。
まず、「WebPageTest」のトップページを開きます こちら
下の写真を使って説明していきます。
写真の1の部分で、測定するテストの種類を、下記の種類を選択することができます。
- Performance Test
- Core Web Vitals
- Lighthouse
- Visual Comparison
- Traceroute
各テストの説明は、連載1回目の「Webサイトの測定ツール「WebPageTest」 特徴・概要編」で紹介しているので参考にしてください。こちら
写真の2の部分で、測定対象のWebページのURLを入力します。
Yahooのトップページなら 「www.yahoo.co.jp」と入力する。
写真の3の部分で、測定対象のWebページにアクセスするアクセス元の環境を、あらかじめテンプレート化して選択できる様になっています。希望するテンプレートのラジオボタンを選択しましょう。
テンプレートの説明左から、
- デバイスの種類(デスクトップかPCか)
- ブラウザの種類
- 回線の種類
- アクセス元の国名、地名
各テンプレート部分をマウスオーバするすると、吹き出しに詳しい説明が英文で表示されます。
テンプレート一覧に希望するものがない場合は、
写真の3の部分の下にある「Advanced Configuration Choose from all browser, location, & device options」をクリックすると、下記の様な画面になります。
上の写真の1の部分(Test Location)で、プルダウンメニューからアクセス元の場所(国名、地名)を選択します。または、プルダウン横のマップのピンをクリックすると、世界地図が表示され、ピンを選択した後「OK」をすることで選択することもできます。
上の写真の2の部分(Browser)で、アクセス元のブラウザを選択します。
- 「Test Settings」タブを選択したときの、設定を説明します(上の写真の3の部分)
Connection: 回線速度を選択します。
「Cable (5/1Mbps 28ms RTT)」は、
Cableは有線接続、
5/1Mbpsは回線速度で1秒間に1から5メガビット送り出すことができます。 28ms RTTは、通信相手に信号やデータを発信してから、応答が帰ってくるまでにかかる時間のことです。相手との物理的な距離や、経路上で中継・転送する装置などの数や処理時間に左右されます。
Desktop Browser Dimensions:ブラウザの解像度の指定です。解像度が高いとレンダリングに時間がかかります。
Number of Tests to Run: テストの実行回数です。
Repeat View: 「First View and Repeat View」は、ブラウザにページ情報のキャッシュがない状態でのテストとある状態でのテストを行います。
「First View Only」は、ブラウザにページ情報のキャッシュがない状態でのテストだけを行います。
Capture Video: ページが読み込まれる様子を動画でキャプチャするかどうかを選択します
Label: 選択した設定のテストに名前をつけます。
- 「Test Settings」タブを選択したときの、設定を説明します(上の写真の1の部分)
Stop Test at Document Complete: ドキュメント読み込み完了時にすぐにonloadイベントを発生させる場合にチェックする
Ignore SSL Certificate Errors: SSL関連のエラーを無視して、テストの実行を継続するかどうか
Capture network packet trace (tcpdump): ネットワークパケットの中身をトレースするかどうかを指定できます。
Save response bodies: リクエストのレスポンスの情報を保存するかどうかを指定します。
Preserve original User Agent string: 独自のユーザエージェントを保存するかどうかを指定します。
Disable AVIF image support: AV1の圧縮方式を使用した静止画像をサポートするかどうかを指定します。
Disable WEBP image support: WEBPフォーマットの画像サポートを無効にするかどうかを指定します。
Disable JPEG XL image support:JPEG XLフォーマットの画像サポートを無効にするかどうかを指定します。
Capture Full Size Video:
ページが読み込まれレンダリングされる様子をフルサイズのビデオでキャプチャするかどうかを指定する
以上で、「WebPageTest」の基本的な使い方編は終わりたいと思います。