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.

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/cli@0.13.x
          lhci autorun

      - name: Run Lighthouse Report Tracker
        uses: moonkorea00/lighthouse-report-tracker-action@v1.0.1
        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.

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