HARファイルビューアー
HARファイルの内容を表示・分析します。
概要
HAR ファイルは、ブラウザが読み込んだすべてを JSON で記録したもので、DevTools から 書き出せます。正確ですが、目で読むのはほぼ不可能です。このビューアはそれを DevTools で見ていたウォーターフォールに戻すので、他の人から送られてきた キャプチャを、その人のブラウザを開かずに読めます。
各バーは、ブラウザが実際に記録したフェーズに分かれています。キューでの待機 (blocked)・DNS・接続・TLS ハンドシェイク・最初のバイトまでの待ち (TTFB)・ ダウンロードです。ほとんどが TTFB の長いバーはサーバー側の問題、ほとんどが ダウンロードの長いバーはペイロードの問題です。
使い方
- DevTools の Network タブでリクエスト一覧を右クリックし、Save all as HAR を選びます。
- そのファイルをここにドロップするか、クリックして選択します。ページの外には出ません。
- 種別で絞り込み、行をクリックすると URL とフェーズの内訳が出ます。
- TRANSFER BY TYPE で、ページ重量を実際に占めているものを確認します。
フェーズの読み方
6 つの区間はブラウザが記録したもので、計算で導いたものではありません。そして それぞれが問題の持ち主を指しています。
| フェーズ | 測っているもの | 長い場合の持ち主 |
|---|---|---|
blocked | ブラウザ内で接続枠を待った時間 | ページ側 — 並列リクエストが多すぎる、または HTTP/1.1 |
dns | 名前解決 | DNS 事業者、または初回訪問でキャッシュが冷えている |
connect | TCP ハンドシェイク | オリジンまでのネットワーク距離 |
tls | TLS ハンドシェイク | 証明書チェーンの長さ、またはセッション再開が効いていない |
ttfb | 送信後に待った時間 | サーバー。ほぼ常にアプリケーションか DB の時間 |
download | 本文の受信 | ペイロードのサイズ、または帯域 |
-1 はそのフェーズをブラウザが記録しなかったことを意味し、これは正常です。
既存の接続を再利用したリクエストには dns・connect・tls が存在しません。
このツールはそれらをゼロとして描くのではなく、区間自体を省略します。
覚えておく価値のあるパターンが 2 つあります。blocked が大半を占める行が
同一ホストに多数並んでいれば、それは接続の競合です。直し方はサーバーの高速化
ではなくリクエストを減らすか HTTP/2 です。ドキュメントのリクエストで ttfb が
大半を占めていれば、キャプチャ内の他のすべてのバーが遅れて始まります。その数値より
速くなれるものは下流に 1 つもありません。
ウォーターフォールの形の読み方
各バーの横位置は、幅と同じくらい重要です。リクエストは共有のタイムライン上に 置かれるので、階段状になっていれば直列化です。先のリクエストが終わるまで次が 始められなかったという意味で、原因は通常、描画をブロックするスタイルシート、 パーサをブロックする同期スクリプト、あるいは次のリクエスト群の URL を含む JSON レスポンスです。
DCL と LOAD の線はキャプチャ自身のページタイミングから来ています。LOAD
より右のリクエストは load イベントに影響していません（遅延読み込みの画像、
計測ビーコン、プリフェッチ）。DCL より左のリクエストは、意図したかどうかに
関わらずクリティカルパス上にあります。
画面上で伏せられるもの
このビューアはデバッグに使えるようヘッダとパラメータの値を表示しますが、
1 つだけ例外があります。資格情報に見える名前の値（Cookie・Authorization・
token・api_key・signature・code・state）は伏せて表示します。これは
覗き見への備えであって、セキュリティ境界ではありません。ディスク上のファイルは
変わっておらず、秘密はすべて入ったままです。
issue に添付したりベンダーに送ったりする版が必要なら、 HAR サニタイザ を使ってください。Cookie 配列・リクエストと レスポンスの本文・リダイレクト先・WebSocket フレームを消去して JSON を書き換え、 共有して問題ないファイルを返します。
使用例
- 初回描画が遅い: ドキュメントのリクエストで TTFB の区間が広ければ、ネットワークではなくサーバーがコストです。
- ページが重い: 転送量の帯を見れば、画像か単一の JS バンドルが大半を占めていることがすぐ分かります。
- デプロイ事故:
jsで絞り込み、古い参照が残って 404 になっていないか探します。 - 忘れていた第三者: 転送量の内訳をホスト別に見ます。タグマネージャは、入れた本人の想定より多くを引き込んでいることがよくあります。
- 「自分では速いのに利用者では遅い」: 相手のキャプチャと自分のものを比べます。
dnsとconnectの差は地理的な距離、同じエンドポイントでのttfbの差は通常キャッシュの状態です。
注意事項
サイズはキャプチャの転送サイズを優先し、無ければ本文＋ヘッダ、さらに無ければ デコード後のコンテンツサイズの順で採用します。出力ツールによって埋まる フィールドが違うためです。
リソース種別は URL の拡張子を先に、MIME タイプを後に見ています。スクリプトへの
リクエストでも、エラーページは text/html を返すためです。
異なるブラウザのキャプチャは直接比較できません。Firefox と Safari は埋める
任意フィールドが異なり、Chrome は規格外の _initiator と _webSocketMessages
を追加します。このビューアは標準のフィールドを読んで残りは無視するので、
Firefox のキャプチャは失敗するのではなく情報量が少なく描画されます。
手元にキャプチャが無い場合は load sample capture で小さな合成 HAR を 開けます。パネルの読み方を確かめるためのデモデータで、ヘッダーにもその旨を 表示しています。実測値ではありません。