Skip to content

moonkorea00/lighthouse-report-tracker-action

Use this GitHub action with your project
Add this Action to an existing workflow or create a new one
View on Marketplace

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Lighthouse Report Tracker

Lighthouse Report Tracker is a simple but effective tool that stores and analyzes lighthouse reports generated by Lighthouse CI.


Features

  • Automated Report Comparison : Generate a comparison table between pull requests to spot and prevent performance regressions in Performance, Best Practices, Accessibility, SEO and PWA metrics.

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


performance-table Screen Shot 2024-04-23 at 2 45 52 PM tracker-issue

Usage

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: './lhci' # 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.

workflow-permission


Inputs

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'

License

MIT License © 2023 Jeewon Moon