ワンショット

Lighthouse JSON Compare Prototype

Before / After の Lighthouse JSON を比較し、監査スコア、表示速度、通信量、未使用リソースの変化を見ます。

サンプルJSONで動作確認

サンプルをダウンロードして貼り付けると、Lighthouse の比較結果の見え方を確認できます。手早く見るだけならサンプル比較ボタンを使えます。

BeforeサンプルDL AfterサンプルDL

Lighthouse JSONについて

形式と作り方

ファイル形式

  • 中身は JSON 形式の Lighthouse レポート
  • categories にスコアが入ります
  • audits に各指標の数値が入ります

取得方法

  1. Chrome DevTools の Lighthouse を実行
  2. レポートメニューから JSON を保存
  3. Before / After の2回分を用意

この画面で見る項目

  • Performance / Accessibility / SEO
  • FCP / LCP / TTI / TBT / CLS
  • 総バイト数、リクエスト数、未使用 JS / CSS