LHCIグリーン維持のコツ

この記事はこういう人におすすめ: （for） この記事で得られること: （benefits）

「Lighthouse CI でグリーンを安定させたい…」「Best Practices や a11y のスコアが不安定！」そんな悩みはありませんか？ この記事では、LHCI グリーン達成のコツとよくある落とし穴・対策を短時間で解説します。 まずは関連ツール「LHCI チェッカー」で自分のサイトを確認してみましょう。

1. 基本のルール（定義と構文）

LHCI グリーンは「Best Practices >= 0.70」「a11y >= 90」を安定して維持することです。 script は 1 本だけ、重複防止キーを付与し、本番のみ広告を挿入しましょう。

2. 実例（運用ルールと手順）

1. script は 1 本だけ、重複防止キーを付与します
2. 収集は本番 200 待ち、失敗時は 1 リトライします
3. a11y>=90 を継続運用します

3. 落とし穴（❌ 失敗 →✅ 対策）

• ❌ Preview で広告を出してしまう
• ✅ 本番のみ広告を挿入しましょう
• ❌ script の重複読み込み
• ✅ script は 1 本だけ、重複防止キーを付与しましょう
• ❌ Best Practices のスコアが不安定
• ✅ 本番環境でのみ計測し、a11y も 90 以上を維持しましょう

4. クイズ

1. LHCI グリーンの基準は？
2. script の重複を防ぐ方法は？
3. a11y スコアを維持するコツは？

答え

1. Best Practices >= 0.70、a11y >= 90
2. script は 1 本だけ、重複防止キーを付与する
3. 本番環境でのみ計測し、継続運用する

5. まとめ

• LHCI グリーンは品質スコアの安定維持が重要です
• script 管理や広告挿入タイミングに注意しましょう
• a11y スコアも継続的にチェックしましょう
• 関連ツール「LHCI チェッカー」も活用してください

まずは「LHCI チェッカー」で自分のサイトを確認してみましょう。

• デスクトップ/モバイルの設定は .lighthouserc.*.json を利用。
• サーバ起動後に npx @lhci/cli collect --config .lighthouserc.desktop.json などで短時間チェックできます。

運用のポイント

• 「一度に 100 点」を狙うより、しきい値を少しずつ上げるのが安定（例: 0.70 → 0.75）。
• スコアが落ちたら直近の差分だけを疑う（画像追加・外部スクリプト増など）。
• 変更は小さく、CI がグリーンのうちに早めにタグを切る。