Lighthouse JSON Compare Prototype

BeforeとAfterのLighthouse JSONを読み込み、監査スコア、LCP、TBT、通信量、未使用JavaScript・CSSなどの変化を同じ画面で比較する試作ツールです。対象は改修前後のLighthouse結果から改善・悪化した項目を短時間で見つけたいWeb担当者と開発者です。最初に同じURL・端末条件・Lighthouse版で取得した2つのJSONを用意してください。画面が返す数値や一覧は事前確認に使い、公開・アップロード・登録の成否を保証する結果として扱いません。公開画面と一次資料の確認日は2026年8月6日です。

30秒要約

• 入力はLighthouseのJSONレポート2件です。
• Performanceなどのスコアと主要監査値をBefore/Afterで比較します。
• JSONの版が違うと監査IDや項目が変わる場合があります。
• 単一計測の差だけで改善を断定しません。
• 公開ページの完全な通信監査が未完了のため、機密URLや認証情報を含むJSONは入力しません。

対象作業

Webページ改修の前後でLighthouse JSONを比較し、どの指標・監査・通信量が変化したかを確認する作業です。Lighthouseの実行自体やサイトへのアクセスは行いません。

入力と出力

基本の使い方

1. Chrome DevToolsまたはLighthouse CLIで、改修前のレポートをJSON保存します。
2. 同じ条件で改修後のJSONを取得します。
3. BeforeとAfterへそれぞれ読み込み、URL・取得時刻・Lighthouse版を確認します。
4. スコアだけでなく、LCP、TBT、転送量、未使用リソースの増減を見ます。
5. 大きな悪化があれば、元レポートの監査詳細とPerformance/Networkパネルで原因を確認します。

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

1. 比較条件をそろえる

端末エミュレーション、CPU・ネットワークスロットリング、キャッシュ、ログイン状態、Chrome/Lighthouse版が違うと、コード変更以外の差が混ざります。

2. JSONの監査項目は固定ではない

Lighthouse 13では古い監査がJSONから削除され、新しいInsightsへ移行しています。ツールが期待する監査IDがない場合、ゼロではなく未取得として扱う必要があります。

3. ラボ値と実ユーザー値を分ける

Lighthouseは制御された一回のラボ計測です。実ユーザーのLCPやINPはCrUXやRUMで別に確認します。

具体例1：画像最適化前後を比較する

同じページで画像圧縮前と後のJSONを取得し、転送量、LCP、Performanceスコアを比較します。

期待結果と確認方法

転送量が減りLCPが改善しているかを確認します。スコアだけ改善し、LCPが変わらない場合は他監査の影響を確認します。

具体例2：JavaScript追加による悪化を見つける

新しいウィジェット追加前後のJSONを読み込み、TBT、unused-javascript、main-thread-work-breakdownを確認します。

期待結果と確認方法

TBTや未使用JSが増えていれば、元JSONの監査詳細とDevTools Performanceで実行時間・第三者スクリプトを調べます。

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

HTMLレポート、PageSpeed Insightsの画面コピー、JSONとして壊れたファイル、Lighthouse以外のJSONは処理対象外です。異なるLighthouse major版では監査IDが変更・削除され、比較欄が空になる場合があります。認証ページのJSONにはURL、リクエスト情報、スクリーンショット等が含まれる可能性があります。

制約・プライバシー

公開ページの検索説明からローカル比較ツールであることは確認できますが、全JavaScriptと通信ログの監査は完了していません。社内URL、トークン、Cookie、顧客画面、スクリーンショットを含むレポートは入力せず、公開ページまたは匿名化したテストJSONを使ってください。

失敗したときの確認順

1. 読み込めない場合は、Lighthouseから「Save as JSON」で出力したファイルか確認します。
2. 指標が空の場合は、JSONのlighthouseVersionと監査IDの変更を確認します。
3. 数値が大きくぶれる場合は、3回以上計測し中央値を比較します。
4. URLが異なる場合は比較を止め、同じページ・同じ条件で取り直します。

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

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

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

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

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

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

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

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

よくある確認

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

いいえ。Webページ改修の前後でLighthouse JSONを比較し、どの指標・監査・通信量が変化したかを確認する作業です。Lighthouseの実行自体やサイトへのアクセスは行いません。 ツールが確認する範囲と、実際の登録先・公開先が検証する範囲は異なります。小さい既知データで計算や変換を検算し、最終システムのプレビューやテスト登録を行います。

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

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

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

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

関連ページ

通信内容の増減を詳しく見る場合はHAR Compare Prototypeへ進みます。複数ページの構造比較を保存する場合はPage Benchmark Vaultを確認します。

確認範囲

公開ページの現行タイトルと検索説明から、Before/After JSON、監査スコア、表示速度、通信量、未使用リソースの比較機能を確認しました。ページJavaScriptの全分岐・最大ファイルサイズ・保存方式は未監査です。

更新履歴

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

参考リンク

• Lighthouse JSON Compare - 現行ツール
• Lighthouse概要 - JSONレポートの公式出力方法
• Lighthouse 13の変更 - JSON監査項目の削除・変更