4つのスコアで丸わかり、Lighthouseによるサイト健康診断

はじめに

「本番リリース後になってページの表示が遅いと言われた」「SEO対策をしたつもりが検索順位が上がらない」――こうした悩みの多くは、リリース前に数値で確認していれば防げたものです。感覚や見た目だけでサイトの品質を判断していると、こうした問題は本番環境で初めて表面化しがちです。

そこで役立つのがGoogleが開発するLighthouseです。ページのパフォーマンスやアクセシビリティ、SEOなどを自動で採点してくれるため、リリース前のチェックはもちろん、CIに組み込んで継続的な品質管理にも活用できます。この記事では、Lighthouseの基本から実践的な使い方までを紹介します。

Lighthouseとは

LighthouseはGoogle Chromeチームが開発しているオープンソースの自動監査ツールです。指定したURLに対してChromeを裏側で起動し、パフォーマンス・アクセシビリティ・ベストプラクティス・SEOの4つの観点からページを解析して、0〜100点のスコアとして可視化してくれます。

Chrome DevTools上で直接実行できるほか、CLIやNode.jsのAPIとしても利用できるため、手動確認からCI/CDへの組み込みまで幅広い用途に対応しています。

主な特徴

多角的なスコアリング - パフォーマンス・アクセシビリティ・ベストプラクティス・SEOの4カテゴリを自動採点し、改善点を具体的な監査項目として提示してくれます
豊富な実行方法 - Chrome DevTools、CLI、Node APIのいずれからも実行でき、開発フローに合わせて組み込み方を選べます
CI連携のしやすさ - JSON形式でレポートを出力できるため、GitHub ActionsなどのCIパイプラインに組み込んでスコアの継続的な監視が可能です

インストール

Lighthouseの実行にはNode 22（LTS）以降が必要です。CLIとしてグローバルにインストールする場合は次のコマンドを実行します。

npm install -g lighthouse

プロジェクトの依存関係としてプログラムから呼び出したい場合は、devDependenciesに追加します。

npm install --save-dev lighthouse chrome-launcher

基本的な使い方

CLIから最もシンプルにLighthouseを実行するには、対象のURLを指定するだけです。

lighthouse https://example.com/

実行するとHTML形式のレポートがカレントディレクトリに生成されます。出力形式や保存先、実行後にブラウザで開くかどうかはオプションで指定できます。

# JSON形式で出力し、結果をブラウザで自動的に開く
lighthouse https://example.com/ --output=json --output-path=./report.json --view

# パフォーマンスのカテゴリだけを対象にする
lighthouse https://example.com/ --only-categories=performance

# モバイルではなくデスクトップ環境として計測する
lighthouse https://example.com/ --preset=desktop

Node.jsのプログラムから呼び出す場合は、chrome-launcherでChromeを起動し、そのポートをLighthouseに渡します。

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

const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
const options = {
  logLevel: 'info',
  output: 'html',
  onlyCategories: ['performance', 'accessibility', 'seo'],
  port: chrome.port,
};

const runnerResult = await lighthouse('https://example.com', options);

// HTMLレポートは.report、詳細な結果オブジェクトは.lhrに格納される
console.log('パフォーマンススコア:', runnerResult.lhr.categories.performance.score * 100);

await chrome.kill();

実践的なユースケース

CIパイプラインでスコアを継続監視する

デプロイのたびに手動でLighthouseを実行するのは現実的ではありません。GitHub ActionsなどのCI上でLighthouseを実行し、JSON形式の結果を保存しておけば、スコアの推移を継続的に追跡できます。

# .github/workflows/lighthouse.yml
name: Lighthouse Audit

on:
  pull_request:
    branches: [main]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '22'
      - run: npm ci
      - run: npm install -g lighthouse
      - name: Run Lighthouse
        run: |
          lighthouse https://staging.example.com \
            --output=json \
            --output-path=./lighthouse-report.json \
            --chrome-flags="--headless --no-sandbox"
      - uses: actions/upload-artifact@v4
        with:
          name: lighthouse-report
          path: lighthouse-report.json

特定の監査項目だけをチェックする

サイト全体のスコアではなく、特定の監査項目（例えば画像の遅延読み込みや不要なJavaScriptの削減など）だけを重点的に確認したい場合は、onlyAuditsをconfigで指定します。

const options = {
  port: chrome.port,
  onlyAudits: ['speed-index', 'interactive', 'uses-responsive-images'],
};

const runnerResult = await lighthouse('https://example.com', options);