Lighthouse CI Action

Run Lighthouse in CI using Github Actions.

Audit many URLs using Lighthouse, and test performance budget as a part of your CI pipeline. This Github Action makes running Lighthouse in CI easy, free, and without dependencies.

Features:

✅ Audit URLs using Lighthouse
🎯 Test performance budget as a part of the build
⚙️ Full control over Lighthouse config
🔍 Detailed output for quick debug
🚀 Fast (less than 3 seconds) action initialization

Usage

Create .github/workflows/main.yml with the list of URLs to audit using lighthouse. The results will be stored as a build artifact.

name: Lighthouse Audit
on: push
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Audit URLs using Lighthouse and ensure performance budget
        uses: treosh/lighthouse-ci-action@v1
        with:
          urls: |
            https://example.com/
            https://example.com/blog
            https://example.com/pricing
          budgetPath: ./budget.json
      - name: Save results
        uses: actions/upload-artifact@master
        with:
          name: lighthouse-results
          path: './results'

Set budgetPath if you need to ensure performance budget as a part of CI process.

budget.json

[
  {
    "path": "/*",
    "resourceSizes": [
      {
        "resourceType": "document",
        "budget": 18
      },
      {
        "resourceType": "total",
        "budget": 200
      }
    ]
  }
]

In a more realistic case, first, you would need to run tests and deploy the project on staging. Than run Lighthouse audits on the live URLs to ensure the budget and collect artifacts. The .github/workflows/main.yml config may look like this:

name: CI
on: push
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - name: Use node 10
        uses: actions/setup-node@v1
        with:
          node-version: '10.x'
      - name: Install and test
        run: |
          npm install
          npm test
      - name: Deploy
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: npm run deploy
  lighthouse:
    runs-on: ubuntu-latest
    needs: build
    steps:
      - uses: actions/checkout@master
      - name: Run Lighthouse and test budgets
        uses: treosh/lighthouse-ci-action@v1
        with:
          urls: |
            https://example.com/
            https://example.com/features
            https://example.com/blog
          budgetPath: ./budget.json
      - name: Upload artifacts
        uses: actions/upload-artifact@master
        with:
          name: lighthouse-results
          path: './results'

Inputs

`urls` (required)

Provide the list of URLs separated by a new line. Each URL is audited using the latest version of Lighthouse and Chrome preinstalled on user machine.

urls: |
  https://example.com/
  https://example.com/blog
  https://example.com/pricing

If you need to audit just one URL, use the url option:

url: https://example.com/

`budgetPath`

Use a performance budget to keep your page size in check. Lighthouse CI Action will fail the build if one of the URLs exceed the budget.

Learn more about the budget.json spec and practical use of performance budgets.

budgetPath: .github/lighthouse/budget.json

`configPath`

Set a path to a custom Lighthouse config for a full control of Lighthouse enviroment.

configPath: ./desktop-config.js

desktop-config.js:

module.exports = {
  extends: 'lighthouse:default',
  settings: {
    emulatedFormFactor: 'desktop',
    throttling: { rttMs: 40, throughputKbps: 10240, cpuSlowdownMultiplier: 1 },
    audits: [
      { path: 'metrics/first-contentful-paint', options: { scorePODR: 800, scoreMedian: 1600 } },
      { path: 'metrics/first-meaningful-paint', options: { scorePODR: 800, scoreMedian: 1600 } },
      { path: 'metrics/speed-index', options: { scorePODR: 1100, scoreMedian: 2300 } },
      { path: 'metrics/interactive', options: { scorePODR: 2000, scoreMedian: 4500 } },
      { path: 'metrics/first-cpu-idle', options: { scorePODR: 2000, scoreMedian: 4500 } }
    ]
  }
}

`throttlingMethod`

Set devtools, simulate, or provided to configure throttling.

throttlingMethod: devtools

`onlyCategories`

Specify Lighthouse categories to limit the results output and run audits faster.

onlyCategories: [performance]

`chromeFlags`

Use chromeFlags to pass any argument to Chrome. Lighthouse CI Action uses a built-in Chrome instance that comes with an image specified with runs-on option.

Learn more about useful Chrome flags.

chromeFlags: '--window-size=1200,800 --single-process'

`extraHeaders`

Pass any HTTP header to the Chrome so you can audit authenticate pages or disable/enable a certain behavior.

extraHeaders '{"Cookie":"monster=blue","x-men":"wolverine"}'

Credits

Sponsored by Treo.sh - Page speed monitoring made easy.

orta / lighthouse-ci-action Goto Github PK