HAR ファイル ウォーターフォール アナライザー

HAR (HTTP アーカイブ) ファイルは、ページの読み込み中にブラウザの DevTools ネットワーク パネルが記録したすべてのもの (すべてのリクエストと応答ヘッダー、各応答本文の正確なサイズと MIME タイプ、リクエストごとのタイミングの内訳) の JSON エクスポートです。 Chrome、Firefox、Edge、または Safari から作成するには、DevTools を開き、[ネットワーク] タブでページをリロードし、リクエスト リストを右クリックして、[内容を含む HAR としてすべて保存] を選択します。このツールは、エクスポートされたファイルを直接読み取ります。再フェッチや再リクエストは行われません。

ウォーターフォール チャートは完全にファイル内に既に存在するデータから構築されます。各エントリの独自のタイミング オブジェクトは、リクエストをブロック、DNS ルックアップ、接続、SSL/TLS ネゴシエーション、送信、待機 (最初のバイトまでの時間)、および受信フェーズに分割し、各フェーズは独自の色付きセグメントとして描画されます。 HAR 仕様に従って、SSL 時間も接続内に含まれるため、最初に差し引かれます。そうしないと、TLS 部分が 2 回カウントされ、バーの幅がリクエストの実際の継続時間に加算されなくなります。破線の垂直マーカーは DOMContentLoaded と Load を示し、ファイル自体のページ タイミングから直接読み取られるため、ページがインタラクティブになる前にどのリクエストが終了したかを正確に確認できます。

このツールは、グラフ以外にも、HAR 形式がすでに記録しているフィールドに対して 3 つの検索ルールを実行します。これは、Cache-Control ヘッダーも Expires ヘッダーも持たないキャッシュ可能な応答 (ステータス 200、203、または 206) にフラグを立てます。つまり、繰り返しアクセスする場合は、応答を最初から再ダウンロードする必要があります。これは、コンテンツ エンコーディングなしで提供された 1 KB を超えるテキスト応答 (HTML、CSS、JavaScript、JSON、SVG など) にフラグを立てます。コンテンツ エンコーディングは、ほとんどのサーバーが 1 つの設定行でオンにできる簡単な圧縮の機会です。また、ページ自体の DOMContentLoaded オフセット（レンダリングをブロックするアセットの古典的な特徴）より前に開始された CSS または JavaScript リクエストにフラグを立てます。

これらはすべて、アップロードしたファイル内にすでに存在するデータに対して実行されます。ネットワーク アクセス、外部検索サービス、元のページの再取得は必要ありません。 HAR ファイルはブラウザ タブ内ですべて読み取られ、解析され、レンダリングされ、どこにもアップロードされることはありません。