GitHub Action
Lighthouse Report Tracker
Lighthouse Report Tracker is a simple but effective tool that stores and analyzes lighthouse reports generated by Lighthouse CI.
-
Automated Report Comparison : Generate a comparison table between pull requests to spot and prevent performance regressions in
Performance,Best Practices,Accessibility,SEOandPWAmetrics. -
No External Server/Storage Required : Preserve and manage Lighthouse CI reports within your repository via GitHub Issues. Lighthouse report data will always be available for future purposes.
To run Lighthouse and generate performance tables on pull requests, create a lighthouse.yml file under the .github/workflows directory.
If you have not yet set up Lighthouse CI, check out the details below.
See minimum configuration
Below is a minimum required configuration to set up Lighthouse CI in your project. See the Lighthouse CI docs for detailed configuration.
- Create a lighthouserc.js file in the root directory
// lighthouserc.js
module.exports = {
ci: {
collect: {
url: [
'https://your-project-url-to-audit.com',
// ex) 'http://localhost:3000'
// add additional urls to audit
],
numberOfRuns: 1,
},
upload: {
target: 'filesystem',
outputDir: './lhci',
reportFilenamePattern: '%%DATETIME%%.%%EXTENSION%%',
},
},
};# lighthouse.yml
name: Lighthouse CI
on:
pull_request:
branches-ignore:
- 'dependabot/**' # pull requests by dependabots are good to ignore
jobs:
lighthouse:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '20.x'
- name: npm install, build # update the step depending on your package manager
run: |
npm install
npm run build
- name: run Lighthouse CI # runs Lighthouse CI
run: |
npm install -g @lhci/[email protected]
lhci autorun
- name: Run Lighthouse Report Tracker
uses: moonkorea00/[email protected]
with:
secret: ${{ secrets.GITHUB_TOKEN }} # by default GitHub will create your token
outputDir: 'path/to/lighthouse/reports' # directory configured in your lighthouserc.js. defaults to './lhci'- In your repository's
Settings - Actions - General, update the Workflow permissions to Read and write permissions in order to generate report tables in your pull request.
| Input | Description | Required | Defaults to |
|---|---|---|---|
| secret | The GitHub token required for API requests to create comments in pull requests. Use ${{ secrets.GITHUB_TOKEN }} as the value. |
Yes | |
| outputDir | The directory configured in your lighthouserc.js. Depending on how you run lhci autorun, reports will be stored in this directory. |
No | './lhci' |