Skip to content
You're viewing an older version of this GitHub Action. Do you want to see the latest version instead?
bar-chart-2

GitHub Action

Lighthouse CI Action

v1

Lighthouse CI Action

bar-chart-2

Lighthouse CI Action

Audit URLs using Lighthouse and test performance with Lighthouse CI

Installation

Copy and paste the following snippet into your .yml file.

 
              
- name: Lighthouse CI Action

              
  uses: treosh/lighthouse-ci-action@v1
Learn more about this action in treosh/lighthouse-ci-action

Choose a version

Lighthouse CI Action

Run Lighthouse in CI using Github Actions.

Lighthouse CI Action

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'

Successful Build

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/

URLs support interpolation of process env vars, so you can write URLs like:

- name: Run Lighthouse and test budgets
    uses: treosh/lighthouse-ci-action@v1
    with:
      urls: |
        https://pr-$PR_NUMBER.staging-example.com/
        https://pr-$PR_NUMBER.staging-example.com/blog
      env:
        PR_NUMBER: ${{ github.event.pull_request.number }}

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 environment.

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.