Copy & Paste Engineer

【GitHub】GitHub Actions で Lighthouse を使用して自動的にサイトのSEOなどをチェックする

【GitHub】GitHub Actions で Lighthouse を使用して自動的にサイトのSEOなどをチェックする

GitHub Actions で Lighthouse を使用して自動的にサイトのSEOなどをチェックする方法。

Lighthouseを導入する

サンプルの通りにまずは導入してみます。 GitHub Lighthouse#Basic

urls には検査対象のURLをカンマ区切りで設定してください。

name: Lighthouse
on: [pull_request]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@master
    - name: Lighthouse
      uses: foo-software/lighthouse-check-action@master
      with:
        urls: 'https://www.foo.software,https://www.google.com'

Lighthouse 特定スコア以下を失敗扱いにする

特定スコア以下を失敗扱いにします。 GitHub Lighthouse#Failing Workflows by Enforcing Minimum Scores

これを行うことでスコアが落ちた時に通知などさせることが出来ます。 urls には検査対象のURLをカンマ区切りで設定してください。

name: Lighthouse
on: [pull_request]

jobs:
  lighthouse-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - name: Lighthouse
        uses: foo-software/lighthouse-check-action@master
        id: lighthouseCheck
        with:
          urls: 'https://www.foo.software,https://www.foo.software/contact'
      # 各スコア数値
      - name: Verify Lighthouse Check results
        uses: foo-software/lighthouse-check-status-action@master
        with:
          lighthouseCheckResults: ${{ steps.lighthouseCheck.outputs.lighthouseCheckResults }}
          minAccessibilityScore: "90"
          minBestPracticesScore: "50"
          minPerformanceScore: "50"
          minProgressiveWebAppScore: "50"
          minSeoScore: "50"

      # 失敗時の処理
      - if: failure()
        run: echo failure

参考