How to Automate Performance Audits with Lighthouse CI in GitHub Actions

name: 'Usage of lighthouse-ci-action GitHub Action'
on:
    push:
        branches:
            - main
jobs:
    deploy:
        runs-on: ubuntu-latest
        steps:
        - uses: actions/checkout@v4
        - name: Audit URLs using Lighthouse
          uses: treosh/lighthouse-ci-action@v11
          with:
            urls: |
              https://cicube.io/
              https://cicube.io//workflow-hub/
            budgetPath: ./budget.json # test performance budgets
            uploadArtifacts: true # save results as an action artifacts
            temporaryPublicStorage: true # upload lighthouse report to the temporary storage

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

Lighthouse CI Action

Audit URLs using Lighthouse and test performance with Lighthouse CI.

What is Lighthouse CI Action?​

Optimizing web performance can significantly enhance user experience and improve SEO. The Lighthouse CI Action for GitHub Actions allows seamless integration of performance testing into your development workflows. This action lets you audit URLs using Lighthouse, implement performance budgets, and view results directly within GitHub. Here’s an overview of how to integrate Lighthouse CI into your GitHub Actions and the benefits it offers.

How to Upload Lighthouse CI Results to a Private Server​

Ensuring that our web performance results are secure and privately accessible is crucial for maintaining control over our data. By integrating Lighthouse CI with a private LHCI server in our GitHub Actions workflow, we can automatically upload performance audit results to our own server. This guide will walk you through setting up a workflow to run Lighthouse audits and securely upload the results to a private LHCI server using GitHub secrets.

- 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 }}

How to Conduct Custom Lighthouse Audits with Chrome Options and Configurations​

Using custom configurations and Chrome options in Lighthouse audits can help tailor web performance audits to specific needs, such as replicating user environments or testing under various conditions. This guide walks you through setting up a GitHub Actions workflow that uses a custom Lighthouse configuration to audit specified URLs.

- name: Run Lighthouse on urls with lighthouserc
  uses: treosh/lighthouse-ci-action@v11
  with:
    urls: 'https://example.com/'
    configPath: './lighthouserc.json'

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

How to Test a Static Site Locally with Lighthouse CI​

Testing a static site locally before deployment ensures that our site meets performance and accessibility standards without needing live deployment. This process streamlines our development workflow by catching issues early. Here’s how to set up GitHub Actions to run Lighthouse CI against a locally built static site.

- 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'

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

How to Integrate Lighthouse CI with Netlify for Performance Audits on Pull Requests​

Integrating Lighthouse CI with our Netlify deployment allows us to automatically perform performance audits on our preview deployments. This ensures that performance checks are completed before merging changes, enhancing the reliability and speed of our web application. This guide will walk you through setting up a GitHub Actions workflow that waits for Netlify to build a preview of a site on a pull request and then runs Lighthouse audits on the resulting deployment.

- name: Wait for the Netlify Preview
  uses: jakepartusch/wait-for-netlify-[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

How to Integrate URL Interpolation with Environment Variables in Lighthouse CI​

Using dynamic URLs based on environment variables in Lighthouse CI is highly useful for testing dynamic environments like PR previews or staging sites that change URLs based on deployment parameters. This approach allows for targeted performance tests on environments specific to a pull request or build iteration. Here’s a guide on setting up a GitHub Actions workflow that utilizes URL interpolation with environment variables for Lighthouse CI tests.

- 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 }}

Integrating Lighthouse CI with Field Performance Plugin​

We can further level up our web performance audits by using Lighthouse CI along with plugins that provide additional insights or capabilities. One effective enhancement is using the Field Performance Plugin, which adds more comprehensive tests to the standard Lighthouse audits. This guide will walk you through configuring GitHub Actions to run Lighthouse audits with this plugin on every push to your repository.

npm i lighthouse-plugin-field-performance --save-dev

- name: Audit URLs with Field Performance Plugin
  uses: treosh/lighthouse-ci-action@v11
  with:
    urls: |
      https://www.example.com/
    configPath: '.lighthouserc.json'
    temporaryPublicStorage: true

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