こんにちは、プロクラスの國府です。
今回は、前回に続き、Webサイトの表示スピードの測定ツール「WebPageTest」の
測定結果の見方を紹介したいと思います。
その前に、前回の掲載からWebPageTestに大きな変更点がありまして、アカウントを作成してログインしないと計測テストができないようになりました。右上の「Sign-up」からアカウントを作成してください。また、プランも無料プランと有料プランがあるので注意して
作成してください。
テストケースに「Site Perfomance」を選んだ時の測定結果の見方を説明しています。
●「Page Performance Metrics」の見方
ブラウザからリクエストしてからの時間遷移のポイントごとの状況やページ容量やブラウザの見た目のタイムラインなどの測定結果を表示しています。
「Time to First Byte」
Webサーバから最初にデータを受信するまでの時間
クライアントのネットワーク転送速度
サーバ側のリクエストを受けてからレスポンスを返すまでの処理時 間などが影響してきます
「Start Render」
ブラウザーの見た目で、最初にピクセル表示されるまでの時間
クライアントが使っているデバイスのスペックやブラウザの種類などが影響してきます
「First contentful paint」
ブラウザーがテキスト、画像(背景画像を含む)、白以外の canvas や SVG を描画するまでの時間
クライアントが使っているデバイスのスペックやブラウザの種類などが影響してきます
「Speed Index」
ページの可視部分が表示されるまでの平均時間です
「 Largest Contentful Paint」
Webページのメインコンテンツが読み込まれて、ビューポート内に表示される最大の画像またはテキストブロックのレンダリングの時間。
メインコンテンツとは何かというと、下記のものが挙げられるそうです。
<img> 要素
<image>要素内の<svg>要素
<video> 要素
url()（CSSグラデーションではなく）関数 を介してロードされた背景画像
テキストノードまたはその他のインラインレベルのテキスト要素の子を含むブロック
「Cumulative Layout Shift」
意図せぬレイアウトの「ズレ」や「崩れ」を表す指標で
0（良い）から1（悪い）までの範囲で染ませれます。
「Total Blocking Time」
マウスのクリック、画面のタップ、キーボードの押下といったユーザー入力への応答がブロックされている合計時間。
時間が短い方がよい指標。
「Page Weight」
特定のウェブページの総バイト数
Googleの推奨では、1.6MB以内を目安としているようです。
●「Individual Runs」
テストごとの測定結果を表示しています。
「Waterfall」
リクエストごとのタイムライン
CPUの使用率の時間遷移などの計測結果の表示
「Content Breakdown」
コンテンツの種類ごとのリクエスト数の割合
コンテンツの種類ごとのバイト数の割合