Lighthouse

Google が開発するオープンソースの Web ページ品質監査ツール。Performance・Accessibility・Best Practices・SEO・PWA の 5 カテゴリを 0〜100 点で評価し、PageSpeed Insights の計算エンジンとしても使われている。

概要

Lighthouse は Google が MIT ライセンスで公開しているWeb ページ監査ツール。ブラウザで対象ページを実際に読み込み、指標を計測して 5 カテゴリをスコア化する。

PageSpeed Insights がWeb サービスとして Lighthouse を実行しているのに対し、Lighthouse 本体はローカルで実行可能な OSS。Chrome DevTools 統合・CLI・Node.js API・GitHub Actions など複数の実行手段がある。

5 つの監査カテゴリ

カテゴリ	内容
Performance	LCP / INP / CLS / TBT / FCP など Core Web Vitals を中核にした速度評価
Accessibility	alt / ARIA / コントラスト比 / semantics 等、axe-core ルールベース
Best Practices	HTTPS・非推奨 API・console エラー・脆弱性ライブラリ等のベストプラクティス
SEO	meta description・canonical・モバイル対応・クローラビリティ
PWA（任意）	Service Worker / manifest / オフライン対応 / インストール可能性

各カテゴリは 0〜100 点でスコア化。Performance のスコアは Core Web Vitals の重み付き合計で算出される。

実行方法 4 パターン

1. Chrome DevTools

Chrome で対象ページを開く
DevTools（F12）→「Lighthouse」タブ
カテゴリ・デバイスを選択 → Analyze page load

開発中に素早く結果を見るのに最適。

2. CLI

npm install -g lighthouse
lighthouse https://kb.cts-g.ai --view

--view でレポートをブラウザに自動表示。--output=json で JSON 出力もできる。

3. Node.js API（プログラマブル）

import lighthouse from 'lighthouse';
import * as chromeLauncher from 'chrome-launcher';

const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
const result = await lighthouse('https://kb.cts-g.ai', { port: chrome.port });
console.log(result.lhr.categories.performance.score);
await chrome.kill();

Puppeteer / Playwright と組み合わせて E2E パイプラインに統合可能。

4. Lighthouse CI（継続監視）

GitHub Actions・GitLab CI で毎回のデプロイを自動監査できる。

# .gitlab-ci.yml（抜粋）
lighthouse:
  image: node:20
  script:
    - npm install -g @lhci/cli
    - lhci autorun --collect.url=https://kb.cts-g.ai --assert.preset=lighthouse:recommended

スコアが閾値を下回ったら CI を失敗させることで、パフォーマンス回帰を早期検出できる。

PageSpeed Insights との使い分け

観点	Lighthouse	PageSpeed Insights
提供形態	OSS（ローカル実行）	Web サービス（Google ホスト）
実行環境	自マシン・CI・Docker	Google の共通環境
結果の安定性	環境依存でブレる	同一環境で比較的安定
Field Data	取得不可（Lab Data のみ）	Chrome UX Report (CrUX) も表示
CI/CD 統合	◎（Lighthouse CI）	△（API 経由）
非公開ページ対応	◎	×（公開 URL 必須）

開発中は Lighthouse（ローカル）、公開後の定点観測は PageSpeed Insightsという使い分けが基本。

Core Web Vitals との関係

Lighthouse の Performance スコアは Core Web Vitals の 3 指標（LCP / INP / CLS）に加え、FCP・TBT・Speed Index を重み付きで合算する。Core Web Vitals が実ユーザー向け指標（Field Data）なのに対し、Lighthouse はLab Data（模擬環境での計測）。

両者は相関するが一致しない。実ユーザー体験を改善するには Lab Data で改善 → Field Data で検証 のループを回す。

CTS での活用

CTS のコーポレートサイト（www.cts-g.com）では、以下のフローで Lighthouse を活用している。

開発中: Chrome DevTools で画面単位に実行し、LCP / INP / CLS を確認
PR 時: GitLab CI で Lighthouse CI を実行、スコア 90 未満なら MR をブロック
デプロイ後: PageSpeed Insights で Field Data を確認

この 3 段構えで Desktop / Mobile ともに 90+ を継続維持している。

概要