Lighthouse CIをローカルで回してみたメモ

サイトの速度やアクセシビリティを確認するときに便利な Google Lighthouse。
いつもは Chrome DevTools や PageSpeed Insights から使っていたんですが、今回はちょっと進んで Lighthouse CI（LHCI） をローカルで動かしてみました。

「CIって言ってもまずは手元で試すところから」という軽いノリで触ったときのメモです。

セットアップ

まずは npm で CLI を導入します。

npm init -y
npm i -D @lhci/cli

設定ファイル lighthouserc.json を用意。
今回はテスト対象を2ページにして、スコアの基準も設定してみました。

{
  "ci": {
    "collect": {
      "url": [
        "https://hogehoge.com/",
        "https://hogehoge.com/company/"
      ],
      "numberOfRuns": 3,
      "settings": {
        "preset": "desktop"
      }
    },
    "assert": {
      "assertions": {
        "categories:performance": ["warn", { "minScore": 0.8 }],
        "categories:accessibility": ["warn", { "minScore": 0.9 }],
        "categories:seo": ["warn", { "minScore": 0.9 }]
      }
    },
    "upload": {
      "target": "filesystem",
      "outputDir": "./lhci_reports"
    }
  }
}

ポイントは JSONにコメントが書けない こと。
最初ここでエラーを出してハマりました（笑）

実行

npmスクリプトを追加して

"scripts": {
  "lhci:run": "lhci autorun"
}

実行します。

npm run lhci:run

結果

コマンドラインにはこんな感じで出ます。

⚠️ categories.performance warning for minScore assertion
expected: >=0.8
found: 0.76

• expected → 設定した基準値
• found → 実際の平均スコア
• all values → 複数回走らせたときの各値

つまり「基準を下回ったよ」という警告のようです。
詳細は lhci_reports/ に HTML として保存され、ブラウザで開くと見慣れた Lighthouse のレポートが出てきます。すごく便利ですね！

まとめ

• Lighthouse CIはローカルでも簡単に試せる
• 設定ファイルで基準値を決めて「warn/エラー扱い」を制御できる
• 詳細はHTMLレポートで確認
• CIに組み込めば、改修のたびに「パフォーマンス落ちてない？」を自動でチェックできそう

次はこの仕組みを GitHub Actionsに載せてPRごとに回す ところに挑戦したいと思います。

今回は以上です！