Create .github/workflows/main.yml with the list of URLs to audit and identify a lighthouserc file with configPath.

main.yml

name: Lighthouse
on: push
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Run Lighthouse on urls and validate with lighthouserc
        uses: treosh/lighthouse-ci-action@v11
        with:
          urls: 'https://exterkamp.codes/'
          configPath: './lighthouserc.json'

Make a lighthouserc.json file with LHCI assertion syntax.

lighthouserc.json

{
  "ci": {
    "assert": {
      "assertions": {
        "first-contentful-paint": ["error", { "minScore": 0.6 }]
      }
    }
  }
}

⚙️ See this workflow in use

Create .github/workflows/main.yml with the list of URLs to audit using lighthouse, and identify a serverBaseUrl to upload to and an token to use.

Note: use GitHub secrets to keep your server address hidden!

main.yml

name: Lighthouse
on: push
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Run Lighthouse on urls and upload data to private lhci server
        uses: treosh/lighthouse-ci-action@v11
        with:
          urls: 'https://example.com/'
          serverBaseUrl: ${{ secrets.LHCI_SERVER_URL }}
          serverToken: ${{ secrets.LHCI_SERVER_TOKEN }}

⚙️ See this workflow in use

Create .github/workflows/main.yml with the list of URLs to audit and identify a lighthouserc file with configPath.

main.yml

name: Lighthouse
on: push
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Run Lighthouse on urls with lighthouserc
        uses: treosh/lighthouse-ci-action@v11
        with:
          urls: 'https://example.com/'
          configPath: './lighthouserc.json'

Chrome flags can be set directly in the lighthouserc's collect section.

lighthouserc.json

{
  "ci": {
    "collect": {
      "numberOfRuns": 1,
      "settings": {
        "chromeFlags": "--disable-gpu --no-sandbox --no-zygote"
      }
    }
  }
}

Custom Lighthouse config can be defined in a seperate Lighthouse config using the custom Lighthouse config syntax. This is then referenced by the lighthouserc file in the configPath.

lighthouserc.json

{
  "ci": {
    "collect": {
      "numberOfRuns": 1,
      "settings": {
        "configPath": "./lighthouse-config.js"
      }
    }
  }
}

Then put all the custom Lighthouse config in the file referenced in the lighthouserc.

lighthouse-config.js

module.exports = {
  extends: 'lighthouse:default',
  settings: {
    emulatedFormFactor: 'desktop',
    audits: [{ path: 'metrics/first-contentful-paint', options: { scorePODR: 800, scoreMedian: 1600 } }],
  },
}

⚙️ See this workflow in use

Create .github/workflows/main.yml and identify a lighthouserc file with a staticDistDir config.

main.yml

name: Lighthouse
on: push
jobs:
  static-dist-dir:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Run Lighthouse against a static dist dir
        uses: treosh/lighthouse-ci-action@v11
        with:
          # no urls needed, since it uses local folder to scan .html files
          configPath: './lighthouserc.json'

lighthouserc.json

{
  "ci": {
    "collect": {
      "staticDistDir": "./dist"
    }
  }
}

Inside your staticDistDir there should be html files that make up your site. LHCI will run a simple static webserver to host the files, then run an audit against each of them. More details on this process are in the Lighthouse CI docs.

⚙️ See this workflow in use

It waits for Netlify to finish building a preview and then uses a built version to check performance. Hence, recipe is a composition of 2 actions: Wait for Netlify Action and Lighthouse CI Action.

name: Lighthouse CI for Netlify sites
on: pull_request
jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - name: Wait for the Netlify Preview
        uses: jakepartusch/[email protected]
        id: netlify
        with:
          site_name: 'gallant-panini-bc8593'
      - name: Audit URLs using Lighthouse
        uses: treosh/lighthouse-ci-action@v11
        with:
          urls: |
            ${{ steps.netlify.outputs.url }}
            ${{ steps.netlify.outputs.url }}/products/
          budgetPath: ./budget.json
          uploadArtifacts: true

⚙️ See this workflow in use

URLs support interpolation of process env variables so that you can write URLs like:

name: Lighthouse CI
on: push
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Run Lighthouse and test budgets
        uses: treosh/lighthouse-ci-action@v11
        with:
          urls: |
            https://pr-$PR_NUMBER.staging-example.com/
            https://pr-$PR_NUMBER.staging-example.com/blog
          budgetPath: ./budgets.json
          temporaryPublicStorage: true
        env:
          PR_NUMBER: ${{ github.event.pull_request.number }}

⚙️ See this workflow in use

Combine the field performance plugin with Github Actions.

main.yml

name: Lighthouse CI with a plugin
on: push
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm install # install dependencies, that includes Lighthouse plugins
      - name: Audit URLs with Field Performance Plugin
        uses: treosh/lighthouse-ci-action@v11
        with:
          urls: |
            https://www.example.com/
          configPath: '.lighthouserc.json'
          temporaryPublicStorage: true

lighthouserc.json

{
  "ci": {
    "collect": {
      "settings": {
        "plugins": ["lighthouse-plugin-field-performance"]
      }
    }
  }
}

Add a plugin as a dependency, so it's installed locally:

package.json

{
  "devDependencies": {
    "lighthouse-plugin-field-performance": "^2.0.1"
  }
}

⚙️ See this workflow in use

main.yml

# Example of output usage
name: LHCI-output-webhook
on: push
jobs:
  output-webhook:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Use output for sending data to API.
        id: LHCIAction
        uses: ./
        with:
          urls: |
            https://treo.sh/
      - name: Webhook
          uses: denar90/[email protected]
          with:
            webhookUrl: ${{secrets.ACTION_WEBHOOK_URL}}
            data: '{ "links": ${{steps.LHCIAction.outputs.links}}, "manifest": ${{steps.LHCIAction.outputs.manifest}} }'

⚙️ See this workflow in use

main.yml

name: Lighthouse CI
on: push
jobs:
  lighthouse:
    runs-on: [self-hosted, your-custom-label]
    steps:
      - uses: actions/checkout@v4
      - name: install Node.js

      - uses: browser-actions/setup-chrome@latest

      - run: chrome --version
        uses: actions/setup-node@v3
        with:
          node-version: ${{YOUR_REQUIRED_NODE_JS_VERSION}}

      - name: Audit URLs using Lighthouse
        uses: treosh/lighthouse-ci-action@v11
        with:
          urls: |
            https://example.com/
            https://example.com/blog
        [...]

Learn more about hosted runners

Use github-script or any other means to dynamically generate a list of URLs to test

main.yml

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Generate URLs
        id: urls
        uses: actions/github-script@v6
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          script: |
            const globber = await glob.create('elements/*/demo/*.html');
            const files = await globber.glob();
            const urls = files
              .map(x => x.match(/([\w-]+)/)[1])
              .map(x => `${${{ env.DOMAIN }}}/components/${x}/demo/`)
              .join('\n');
            core.setOutput('urls', urls);

      - name: Lighthouse CI Action
        id: lighthouse
        uses: treosh/lighthouse-ci-action@v8
        with:
          urls: |
            ${{ steps.urls.outputs.urls }}