Continuous Performance Analysis with Lighthouse CI and GitHub Actions

Lighthouse, a free and open-source tool, comprehensively assesses website performance, accessibility, progressive web app metrics, SEO, and more. Accessed most easily via the Chrome DevTools "Lighthouse" tab, it generates reports after running tests, simplifying web page analysis regardless of public or authentication status. Non-Chrome/Chromium users can utilize Lighthouse's web interface (for public pages only) or the Node CLI for command-line audits.

Manual testing, however, is inefficient. Lighthouse CI integrates seamlessly into continuous integration, providing inline pull request feedback and build failure alerts based on performance thresholds. It analyzes code changes' impact on performance, SEO, accessibility, offline capabilities, and best practices, enforcing performance budgets and tracking metric changes over time.

This guide details local Lighthouse CI setup and GitHub Actions integration (though it also supports Travis CI, GitLab CI, and Circle CI).

Local Lighthouse CI Setup

Before starting, ensure you have Node.js v10 LTS or later and Google Chrome (stable). Install the Lighthouse CI CLI globally:

npm install -g @lhci/cli

Use lhci --help to explore available commands (eight at the time of writing).

Configuration is flexible, using a configuration file (.lighthouserc.js), environment variables, or CLI flags (in order of precedence). This guide uses a configuration file.

Create lighthouserc.js in your project's root (Git tracking is assumed; otherwise, use environment variables for build context).

This basic configuration collects Lighthouse reports for a static website and uploads them to temporary public storage:

// lighthouserc.js
module.exports = {
  ci: {
    collect: {
      staticDistDir: './public',
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

For projects needing custom servers, use startServerCommand and url:

module.exports = {
  ci: {
    collect: {
      startServerCommand: 'npm run server',
      url: ['http://localhost:4000/'],
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

The server command is executed, and the server's readiness is detected (default: 10-second timeout). Customize the pattern and timeout with startServerReadyPattern and startServerReadyTimeout, and the number of runs with numberOfRuns:

// lighthouserc.js
module.exports = {
  ci: {
    collect: {
      startServerCommand: 'npm run server',
      url: ['http://localhost:4000/'],
      startServerReadyPattern: 'Server is running on PORT 4000',
      startServerReadyTimeout: 20000, // milliseconds
      numberOfRuns: 5,
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

temporary-public-storage uploads reports to Google Cloud Storage (temporary, publicly accessible). See the documentation for alternative storage options.

Run Lighthouse CI:

lhci autorun

The output shows the test results and report URLs.

Assertion Configuration

Enhance Lighthouse CI by configuring build failures based on test results using the assert property:

// lighthouserc.js
module.exports = {
  ci: {
    assert: {
      preset: 'lighthouse:no-pwa',
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'categories:accessibility': ['warn', { minScore: 0.9 }],
      },
    },
  },
};

Presets (lighthouse:all, lighthouse:recommended, lighthouse:no-pwa) provide quick assertion configurations. Customize assertions using the assertions object or a budget.json file (manually created or generated via performancebudget.io).

GitHub Actions Integration

Create .github/workflow/lighthouse-ci.yaml to integrate Lighthouse CI with GitHub Actions. This example is for a Hugo website; adapt as needed:

# .github/workflow/lighthouse-ci.yaml
name: Lighthouse
on: [push]
jobs:
  ci:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
        with:
          token: ${{ secrets.PAT }}
          submodules: recursive
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: "0.76.5"
          extended: true
      - name: Build site
        run: hugo
      - name: Use Node.js 15.x
        uses: actions/setup-node@v2
        with:
          node-version: 15.x
      - name: Run the Lighthouse CI
        run: |
          npm install -g @lhci/[email protected]
          lhci autorun

This workflow checks out the repository (handling submodules and private repositories via Personal Access Tokens), sets up Hugo, builds the site, sets up Node.js, and runs lhci autorun.

GitHub Status Checks

Configure GitHub status checks for inline pull request reporting by installing the Lighthouse CI GitHub App, obtaining its token, and adding it as a repository secret (LHCI_GITHUB_APP_TOKEN).

Lighthouse CI Server

For private or long-term report storage and comparison, deploy the Lighthouse CI server (Heroku and Docker deployment instructions are available on GitHub).

Conclusion

Include multiple URLs in your configuration for comprehensive testing (homepage, representative posts, etc.). This guide provides a foundation for utilizing Lighthouse CI's capabilities.

The above is the detailed content of Continuous Performance Analysis with Lighthouse CI and GitHub Actions. For more information, please follow other related articles on the PHP Chinese website!