HAR Compare Prototype

BeforeとAfterのHARファイルを読み込み、通信量、リクエスト数、処理工程、外部ドメインの増減を比較する試作ツールです。対象はWeb改修前後でネットワークリクエストが増減した理由を確認したい開発者と運用担当者です。最初にChrome DevToolsから機密情報を除いたsanitized HARを同じ条件で2件出力してください。画面が返す数値や一覧は事前確認に使い、公開・アップロード・登録の成否を保証する結果として扱いません。公開画面と一次資料の確認日は2026年8月6日です。

30秒要約

• HAR 2件をBefore/Afterとして比較します。
• 総通信量、リクエスト数、工程、外部ドメインの増減を確認します。
• HARにはCookie、Authorization、URLパラメータ、レスポンス本文が含まれ得ます。
• Chromeのsanitized HARを優先します。
• 差分は原因の候補であり、性能改善の保証ではありません。

対象作業

Webページの更新前後で、どの通信が増えた・減ったかをHARから整理する作業です。HARの取得や対象サイトへのアクセスはこのツール自身では行いません。

入力と出力

基本の使い方

1. Chrome DevToolsのNetworkで記録を開始し、ページを同じ手順で読み込みます。
2. Export HAR (sanitized)でBeforeを保存します。
3. 改修後も同じ条件でAfterを保存します。
4. 2ファイルを読み込み、総量、件数、第三者ドメイン、サイズの大きいリクエストを比較します。
5. 差が大きいURLを元HARとNetworkパネルで再確認します。

このページ固有の3つの論点

1. HARは機密情報を含み得る

Chromeはsanitizedとsensitive data入りの出力を分けています。Cookie、Set-Cookie、Authorization、クエリ、POST内容が含まれる可能性を前提にします。

2. 同じ操作を比較する

片方だけログイン、キャッシュあり、スクロール、クリック、Service Worker更新があると、コード変更以外のリクエスト差が混ざります。

3. 通信量と体感速度は一致しない

総量が減ってもLCPやmain threadが悪化する場合があります。Lighthouse JSONやPerformance traceと組み合わせます。

具体例1：第三者タグ追加前後を比較する

広告・解析タグを追加する前後でsanitized HARを取得します。

期待結果と確認方法

外部ドメイン、リクエスト件数、転送量が増えた箇所を確認し、必要なタグか、同意前に発火していないかを元HARで確認します。

具体例2：画像最適化の効果を確認する

画像圧縮・WebP化前後のHARを比較します。

期待結果と確認方法

画像リクエストの転送量とロード工程が減り、同じURL・同じ表示内容を取得していることを確認します。

想定外の入力・処理できない範囲

HARでないJSON、途中で切れたファイル、異なるブラウザー拡張、レスポンス本文を省略したHARでは、一部項目が空になります。WebSocket、Service Worker、HTTP/3、キャッシュ、redirectはツールの集計方法によって見え方が異なる可能性があります。

制約・プライバシー

HARは最も注意が必要な入力です。Chrome公式のsanitized exportを使い、それでもURL、ドメイン、ファイル名、タイミングが社内情報になる場合は公開ツールへ入力しません。検索説明からブラウザー比較ツールであることは確認できますが、全通信の監査は完了していません。

失敗したときの確認順

1. 読み込めない場合はChrome DevToolsから再出力します。
2. 件数が大きく違う場合は、キャッシュ、ログイン、操作、記録開始時点を確認します。
3. サイズが0の場合はHARのcontent.sizeとbodySizeの記録有無を確認します。
4. 機密情報を含むことに気づいた場合は入力を中止し、ファイルを安全に削除してsanitized版を作り直します。

このページを使うか別手段を選ぶか

本番データの前に小さな検証を行う

最初から大量ファイルや本番原稿を読み込まず、具体例と同じような小さいテストデータで処理を確認します。入力件数、設定値、期待結果をメモし、結果が一致した場合だけ対象を広げます。ブラウザー、OS、ページ更新によって挙動が変わる可能性があるため、重要作業では実行日時も残します。

tool: HAR Compare Prototype
browser:
input_copy:
settings:
expected:
actual:
checked_at: 2026-08-06

出力ファイルを作るツールでは、ダウンロード直後に開いて件数、ファイル名、文字コード、画像形式、数値、先頭ゼロを確認します。出力されたという事実だけで正常処理と判断しません。元データは別名で保持し、上書き・アップロード・公開は検証後に行います。

結果を再現できる形で残す

作業を他の担当者が再現できるよう、入力のコピー、設定、出力、確認結果を一組で保存します。機密情報を含む入力は保存範囲とアクセス権を限定し、共有用記録ではダミー値へ置き換えます。

• 入力ファイルの名前、取得元、作成日時
• 選択した項目、列、単位、並び順、変換形式
• 出力ファイルと対応表
• エラーや警告の全文
• 最終確認を行った管理画面・プレビュー
• 元へ戻すためのバックアップ

よくある確認

結果が表示されたら、そのまま使ってよいですか？

いいえ。Webページの更新前後で、どの通信が増えた・減ったかをHARから整理する作業です。HARの取得や対象サイトへのアクセスはこのツール自身では行いません。 ツールが確認する範囲と、実際の登録先・公開先が検証する範囲は異なります。小さい既知データで計算や変換を検算し、最終システムのプレビューやテスト登録を行います。

ページを閉じた後も入力や結果は残りますか？

保存の有無はページごとの実装、ブラウザーストレージ、ダウンロード操作に依存します。公開説明に明記がない場合は残らない前提で作業記録を別に保存し、保存されないとも断定しません。

大量データでも同じように処理できますか？

ファイルサイズ、件数、画像寸法、ブラウザーのメモリ上限により失敗する可能性があります。少量から増やし、処理時間と出力欠落を確認してください。

関連ページ

監査スコアとLCP・TBTはLighthouse JSON Compareで比較します。競合ページの構造記録を蓄積する場合はPage Benchmark Vaultへ進みます。

確認範囲

現行検索説明でBefore/After HAR、通信量、リクエスト数、工程、外部ドメインの比較とサンプルHAR導線を確認しました。JavaScriptの全集計式と最大ファイルサイズは未監査です。

更新履歴

• 2026-08-06: 公開ページ、検索結果に表示される現行説明、関連する公式仕様を再確認し、入力・出力・制約・プライバシー・失敗時の案内を更新しました。

参考リンク

• HAR Compare - 現行ツール
• Chrome Network reference - sanitized HARの公式出力方法
• DevTools Network overview - HARの保存・再読込