ウォーターフォールの使い方

英語からAIを使用して翻訳されました

この記事はAI技術を使用して翻訳されたことにご注意ください。正確性を維持するよう努めていますが、一部の詳細は元のテキストを完全に反映していない場合があります。情報に不明な点がある場合は、英語版を参照してください。

この機能は、EnterpriseプランまたはProプランのアドオンとして利用可能なExperience Monitoringを必要とします。

はじめに

ウォーターフォールは、ページを読み込むために必要なすべてのHTTPSリクエストをリストします。これには、アセット（画像、JavaScriptファイルなど）、サードパーティのリクエスト、ウェブサービスの呼び出しが含まれます。

ウォーターフォールには、時間的情報やデータ転送時のネットワーク接続の確立に関する情報が含まれています。ページの読み込みを理解するために役立つ情報を見つけることができます。例えば、さまざまなリソースの重さ、HTTPステータス、各リクエストおよびレスポンスで送信されるHTTPヘッダーなどです。

Speed Analysis Labには、分析レポート、比較レポート、ユーザーシナリオ機能の詳細なステップレポートにインタラクティブなウォーターフォールが含まれています。

レポートの内訳

タイミング

Screenshot_2023-03-09_at_16.21.39.png

タイミングセクションには、ページのすべてのパフォーマンスメトリックの値がリストされています。ウォーターフォールに表示したいメトリックを選択すると、関連するネットワークトラフィックとともに分析できます。

LCPが画像によってトリガーされる場合は、関連するリクエストを表示するためにLCPを選択してください。

長いタスク

Screenshot_2023-03-09_at_16.35.03.png

長いタスク（ウェブブラウザが50ms以上ビジー状態）と総ブロッキング時間の値。Max Potential FIDに関連する長いタスクは、異なる色で強調表示されています。

ウォーターフォール

Screenshot_2023-03-09_at_16.35.29.png

ウォーターフォールは、すべてのHTTPリクエストの順次リストを表示します。

デフォルトでは、レポートには以下が表示されます：

HTTPメソッド（ほとんどの場合GETまたはPOST）。
URL（名前にカーソルを合わせると完全なURLが表示されます）
HTTPステータス（200、301、404など）
レスポンスサイズ
接続の確立からレスポンスの受信までのさまざまなステップの内訳を含む時間軸上の配置

ウォーターフォールの詳細値

Screenshot_2023-03-09_at_16.36.21.png

リクエストの表現にカーソルを合わせると、リクエストとレスポンスタイムのマイルストーンに関する詳細な値を取得できます。

Screenshot_2023-03-09_at_16.36.54.png

DNSルックアップ：DNS解決に必要な時間。
接続中：HTTP通信に必要なTCP（および場合によってはSSL）接続を確立するために必要な時間。
待機中：HTTPリクエストが送信されてからレスポンスの受信が始まるまでの時間。
受信中：レスポンスの受信の開始から終了までの時間。

インターネットユーザーのコンテキストを現実的に再現するために、Speed Analysis Labはこれらのすべてのステップに遅延を注入しますが、DNS Lookupを除きます。したがって、観察された遅延は、テスト用に構成された接続の性質に依存します。これは特にConnectingステップに当てはまり、TCP接続とSSL接続（該当する場合）の両方で遅延が発生します。

DNS LookupとConnectingステップは常に存在するわけではないことに注意してください。DNS解決はドメインごとに1回のみ必要であり、既存のTCP接続が使用されていない場合にのみTCP（および該当する場合はSSL）接続が必要になります。

Screenshot_2023-03-09_at_16.37.43.png

ラインの任意の場所をクリックして、特定のリクエスト/レスポンスに関する詳細情報を表示します。

リクエストの完全なURL、関連するIPアドレス、リクエストおよびレスポンスのHTTPヘッダーを見つけることができます。

フィルターとカスタマイズ

Screenshot_2023-03-09_at_16.39.12.png

'カスタマイズ列'をクリックして、表示設定をカスタマイズします。

注意: 表示設定は自動的に保存されます。

列名	説明
メソッド	リクエストで使用されるHTTPメソッド（GET、POST、PUTなど）
URL	リソースの名前 - 名前にカーソルを合わせると完全なURLが表示されます。
ドメイン	リクエストを送信しているドメイン（例：example.com）。
ステータス	HTTPレスポンスのステータス（200、301、404など）、キャッシュの状態（「キャッシュから」）またはリクエストのエラー（例：「ブラウザによってリクエストがブロックされました」、AdBlockまたはBlocklist / Allowlist機能を使用している場合）。
タイプ	リクエストに関連付けられたコンテンツのタイプ（スタイルシート、画像、XHRなど）。
サイズ	レスポンスサイズ（ネットワークを介して転送されたサイズ、圧縮されている場合はリソースの圧縮サイズになります）。値にカーソルを合わせると詳細が表示されます。
プロトコル	プロトコル（http/1.1、h2など）
スキーム	URLスキーム（http、https、wssなど）
リモートアドレス	サーバーのIPアドレス（Google DNS 8.8.8.8によるドメインDNS解決後に取得）
イニシエーター	リクエストを最初にトリガーしたリソースと関連するソースコードの行（例：analytics.js: 28）。イニシエーターの値にカーソルを合わせると、関連するコールスタックが表示されます。
時間	リクエストを送信してから完全なレスポンスを取得するまでの合計時間。
優先度	ウェブブラウザによってリクエストに与えられた優先度。
タイミング	リクエスト/レスポンス通信のさまざまな段階の時間的内訳。

Screenshot_2021-05-19_at_15.20.46.png

URLフィルターを使用して、選択したテキストを含むリクエストのみを表示します。

リクエストをそのタイプ（スクリプト、XHRなど）に応じてフィルタリングすることもできます。

これら2つのタイプのフィルターは、独立して使用することも、組み合わせて使用することもできます。滝の左下のエリアには、フィルタリングされた要素の数と重みが、リクエストの合計と比較して表示されます。

任意の列名をクリックすると、その情報の値に基づいて滝の要素をソートできます。最初のクリックで昇順ソートが適用されます。2回目のクリックで降順ソートが得られます。

ヒント： サードパーティのコンテンツ（外部依存関係）を調査するための良いアプローチは、ドメインとイニシエーターの列を表示し、それらの列でソート機能を使用することです。

依存関係マップ

Screenshot_2023-03-09_at_16.40.09.png

依存関係マップは、ウェブページ上のHTTPリクエスト間の依存関係を理解するのに役立ちます。

依存関係マップを使用して、どのサードパーティがどのリクエストに責任を持っているか、サードパーティが予想以上のデータを読み込んでいるか、または不明なサードパーティが関与しているかを分析します。

Screenshot_2023-03-09_at_16.41.57.png

レスポンスの重さが重いほど、ノードのサイズは大きくなります。
ドメインが変わるたびにノードの色が変わります。

このセクションの記事