Skip to main content
← Back to workflows

How to Automate Performance Audits with Lighthouse CI in GitHub Actions

treosh-lighthouse-ci-action -
GitHub Action
v11 – Lighthouse v11
1,169
Contributors
Contributor - alekseykulikovContributor - denar90Contributor - exterkamp
CICUBE ANALYTICS INSIGHTS
Engineering Velocity: 25% Team Time Lost to CI Issues
View Platform →
3.5h
Time Saved/Dev/Week
40%
Faster Releases
Click for next insight
Usage
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
budget.json
[
{
"path": "/*",
"resourceSizes": [
{
"resourceType": "document",
"budget": 18
},
{
"resourceType": "total",
"budget": 200
}
]
}
]

lighthouse-ci-action logo

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'
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'
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
.lighthouserc.json
{
"ci": {
"collect": {
"settings": {
"plugins": ["lighthouse-plugin-field-performance"]
}
}
}
}