2026年9月28日

WordPressのLighthouseをGitHub Actionsで自動実行する方法

SEO・パフォーマンス

はじめに

LighthouseはGoogleが提供するウェブページのパフォーマンスとユーザーエクスペリエンスを評価するツールです。WordPressサイトで定期的にLighthouseのテストを行い、その結果をGitHub Actionsを使って自動保存することで、常に最適な状態を保つことができます。

症状・背景

パフォーマンス問題が発生した場合
SEO評価を向上させたい場合
定期的なモニタリングが必要な場合
開発プロセスの自動化を検討している場合

手順・設定方法

ステップ1: GitHubリポジトリの準備

# リポジトリを作成または選択します。
git clone https://github.com/yourusername/repository.git

# ブランチを切り替えます。
cd repository
git checkout -b lighthouse-ci

ステップ2: GitHub Actionsワークフローの設定

# .github/workflows/lighthouse.ymlを作成または編集します。
cat <<EOF >.github/workflows/lighthouse.yml
name: Run Lighthouse on WordPress

on:
  push:
    branches:
      - main
  schedule:
    - cron: "0 2 * * *"

jobs:
  lighthouse:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14.x'
    - run: npm install -g @lhci/cli
    - name: Run Lighthouse CI
      env:
        GITHUB_TOKEN: \${{ secrets.GITHUB_TOKEN }}
      run: lhci autorun --config=your-config.json
EOF

# GitHubのシークレットを設定します。
cat <<EOF >>secrets.txt
GITHUB_TOKEN=<GitHub Personal Access Token>
EOF

ステップ3: Lighthouse CIの設定ファイル作成

# lighthouserc.jsonを作成または編集します。
cat <<EOF >lighthouserc.json
{
  "builds": [
    {
      "url": "https://your-wordpress-site.example.com",
      "channelName": "production"
    }
  ],
  "ci": true,
  "chrome:flags": ["--headless"]
}
EOF

# サイトのURLを設定します。
sed -i 's/https:\/\/your-wordpress-site\.example\.com/https:\/\/your-actual-site-url/g' lighthouserc.json

ステップ4: GitHub Actionsワークフローのテストとコミット

# ワークフローをテストします。
cat <<EOF >.github/workflows/test-lighthouse.yml
name: Test Lighthouse on WordPress

on:
  push:
    branches:
      - lighthouse-ci

jobs:
  test-lighthouse:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14.x'
    - run: npm install -g @lhci/cli
    - name: Run Lighthouse CI (test mode)
      env:
        GITHUB_TOKEN: \${{ secrets.GITHUB_TOKEN }}
      run: lhci autorun --config=your-config.json --mode=test
EOF

# ワークフローをコミットします。
git add .github/workflows/lighthouse.yml lighthouserc.json .github/workflows/test-lighthouse.yml
git commit -m "Add Lighthouse CI workflow"
git push origin lighthouse-ci

注意事項

GitHub Actionsの使用料: リポジトリが公開されている場合、無料で利用できます。プライベートリポジトリでは一定の制限があります。
Lighthouseのバージョン管理: Lighthouseのバージョンを常に最新に保つことが重要です。
セキュリティ上の注意: GitHub ActionsはGitHubのシークレットを使用しますので、適切なアクセス権限を持つトークンを設定してください。
パフォーマンス/運用上の注意: テストが頻繁に行われる場合は、サーバーへの負荷を考える必要があります。

まとめ

1. ワークフローの作成: GitHub Actions用のワークフローファイルを作成し、Lighthouseを実行する設定を行います。

2. テストとコミット: ワークフローが正常に動作することを確認した後、コミットしてプッシュします。

3. 定期的なチェック: GitHub Actionsで定時実行スケジュールを設定することで、サイトのパフォーマンスを常に監視できます。

4. セキュリティとアクセシビリティ: アクセス権限やシークレット管理を適切に行い、システム全体の安全性を確保します。

5. デバッグと改善: テスト結果に基づきサイトのパフォーマンスを改善し続けます。

Post Views: 4