0

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

ブラウザのDevToolsからエクスポートした.harファイルをアップロードすると、各リクエストのタイミングデータから実際のウォーターフォール図を表示し、欠落したキャッシュヘッダー、未圧縮レスポンス、レンダリングブロックの可能性があるスクリプトもチェックします。

🔒 ブラウザ内で完全に処理されます。ここに入力した内容はアップロードされません。

ファイルをここにドラッグ&ドロップ、またはクリックして参照

ブラウザのDevTools → ネットワークタブからHARファイルをエクスポートし(リクエスト一覧を右クリック → 「すべてをHARとして保存(コンテンツ付き)」)、ここにドロップしてください。解析と描画はすべてローカルで行われ、ファイルが外部にアップロードされることは決してありません。

処理中... 0%
HARファイルを解析中
ウォーターフォールを構築中
リクエストを分析中
完了

結果

HAR(HTTP Archive)ファイルは、ブラウザのDevToolsネットワークパネルがページ読み込み時に記録した全情報をJSON形式で書き出したものです。具体的には、各リクエストとレスポンスのヘッダー、各レスポンスボディの正確なサイズとMIMEタイプ、リクエストごとのタイミング内訳が含まれます。Chrome、Firefox、Edge、Safariでは、DevToolsを開いてネットワークタブでページを再読み込みし、リクエスト一覧を右クリックして「すべてをHARとして保存(コンテンツ付き)」を選ぶことで作成できます。本ツールはそのエクスポートファイルを直接読み取るため、再取得や再リクエストは一切行われません。

ウォーターフォールチャートは、ファイル内に既に存在するデータだけから構築されます。各エントリのtimingsオブジェクトは、リクエストをブロック、DNSルックアップ、接続、SSL/TLSネゴシエーション、送信、待機(最初のバイトまでの時間)、受信の各フェーズに分解し、それぞれが固有の色の帯として描画されます。HAR仕様ではSSL時間は接続時間にも含まれているため、まず差し引く処理を行います。これを行わないとTLS部分が二重に計上され、バーの幅がリクエストの実際の所要時間と合わなくなります。点線の垂直マーカーは、ファイル自身のページタイミングから直接読み取ったDOMContentLoadedとLoadを示し、ページが操作可能になる前に完了したリクエストがどれかを正確に確認できます。

チャートに加えて、本ツールはHAR形式に既に記録されているフィールドに対して3つの検出ルールを実行します。キャッシュ可能なレスポンス(ステータス200、203、206)にCache-ControlもExpiresヘッダーも付いていない場合、再訪問時に最初から再ダウンロードが必要になるものとして検出します。HTML、CSS、JavaScript、JSON、SVGなどのテキスト系レスポンスが1KBを超えるにもかかわらずContent-Encodingなしで配信されている場合、多くのサーバーで設定1行で有効化できる簡単な圧縮の機会損失として検出します。さらに、ページ自身のDOMContentLoadedオフセットより前に開始されたCSSまたはJavaScriptリクエスト(レンダリングブロックの典型的な兆候)を検出します。

これらすべての処理は、アップロードしていただいたファイル内に既にあるデータに対して行われます。ネットワークアクセス、外部の検索サービス、元のページの再取得は一切ありません。HARファイルはお使いのブラウザタブ内で読み取り、解析、描画が完結し、外部にアップロードされることは決してありません。