How to Run Lighthouse Check Action in GitHub Workflows

name: 'Usage of lighthouse-check-action GitHub Action'
on:
    push:
        branches:
            - main
jobs:
    deploy:
        runs-on: ubuntu-latest
        steps:
        - uses: actions/checkout@v4

lighthouse-check-action

GitHub Action for running @GoogleChromeLabs Lighthouse audits with all the bells and whistles 🔔 Multiple audits, Slack notifications, and more!

How to Use Lighthouse Check Action​

Lighthouse Check is a GitHub Action that will automatically run some Lighthouse audits in your CI workflows. It has a simple configuration to cover base use cases and a couple of advanced functionalities, like notifications via Slack or uploading an HTML report to AWS S3. Configure and utilize this action in the following ways.

How to Save HTML Report Artifacts​

To save HTML reports as GitHub Action artifacts, use the following configuration:

name: Lighthouse
on: [pull_request]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - run: mkdir -p ${{ github.workspace }}/tmp/artifacts
      - name: Lighthouse
        uses: foo-software/lighthouse-check-action@master
        with:
          outputDirectory: ${{ github.workspace }}/tmp/artifacts
          urls: 'https://www.foo.software,https://www.google.com'
      - name: Upload artifacts
        uses: actions/upload-artifact@master
        with:
          name: Lighthouse reports
          path: ${{ github.workspace }}/tmp/artifacts

This configuration enables seamless integration of Lighthouse audits within the CI/CD pipeline, ensuring consistent performance and quality metrics for web applications. Saving HTML reports as artifacts makes it convenient to review audit results directly from the GitHub interface, aiding in quick debugging and analysis.

How to Save HTML Reports to AWS S3, Slack Notifications, and PR Comments​

Run Lighthouse on 2 URLs, upload reports to AWS S3, notify via Slack, and add PR comments:

name: Test Lighthouse Check
on: [pull_request]

jobs:
  lighthouse-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - run: mkdir -p ${{ github.workspace }}/tmp/artifacts
      - name: Run Lighthouse
        uses: foo-software/lighthouse-check-action@master
        with:
          awsAccessKeyId: ${{ secrets.LIGHTHOUSE_CHECK_AWS_ACCESS_KEY_ID }}
          awsBucket: ${{ secrets.LIGHTHOUSE_CHECK_AWS_BUCKET }}
          awsRegion: ${{ secrets.LIGHTHOUSE_CHECK_AWS_REGION }}
          awsSecretAccessKey: ${{ secrets.LIGHTHOUSE_CHECK_AWS_SECRET_ACCESS_KEY }}
          gitAuthor: ${{ github.actor }}
          gitBranch: ${{ github.ref }}
          gitHubAccessToken: ${{ secrets.GITHUB_TOKEN }}
          outputDirectory: ${{ github.workspace }}/tmp/artifacts
          urls: 'https://www.foo.software,https://www.foo.software/contact'
          sha: ${{ github.sha }}
          slackWebhookUrl: ${{ secrets.LIGHTHOUSE_CHECK_WEBHOOK_URL }}

Uploading reports to AWS S3 facilitates easy access and storage management, particularly useful for large projects. Integrating Slack notifications ensures immediate awareness of audit results, enhancing communication and prompt actions on identified issues.

Running on Foo and Saving Results​

To trigger audits on all pages in your Foo account:

name: Lighthouse Check
on: [pull_request]

jobs:
  lighthouse-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - run: npm install
      - name: Run Lighthouse
        uses: foo-software/lighthouse-check-action@master
        with:
          fooApiToken: 'myaccountapitoken'

This setup allows you to automate Lighthouse testing and maintain a historical record of audits over time, which is crucial for tracking the progression and degradation of website quality.

Failing Workflows by Enforcing Minimum Scores​

Use the following configuration to verify minimum scores and fail the workflow if not met:

name: Lighthouse
on: [pull_request]

jobs:
  lighthouse-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - name: Lighthouse
        uses: foo-software/lighthouse-check-action@master
        id: lighthouseCheck
        with:
          urls: 'https://www.foo.software,https://www.foo.software/contact'
      - name: Verify Lighthouse Check results
        uses: foo-software/lighthouse-check-status-action@master
        with:
          lighthouseCheckResults: ${{ steps.lighthouseCheck.outputs.lighthouseCheckResults }}
          minAccessibilityScore: "90"
          minBestPracticesScore: "50"
          minPerformanceScore: "50"
          minProgressiveWebAppScore: "50"
          minSeoScore: "50"

By setting minimum score thresholds, the action helps enforce quality gates, ensuring that only high-quality code changes are merged into the main branch. This proactive measure maintains high standards and avoids regression in performance metrics.

With the provided YAML configurations, one can easily integrate Lighthouse audits into CI/CD pipelines, getting consistent performance and quality metrics for web applications. Posting reports to AWS S3 can be actually crucial if you have great projects that call for minimal storage limitation; it makes it easier to retrieve and then manage storage.

This also integrates with Slack notifications, hence making sure that all of the results are known right on time, promoting communication and prompt actions on identified issues. Saving reports in HTML format as artifacts is a great way to seamlessly review the results of an audit from within the GitHub interface for faster debugging and analysis.

Thresholds set at minimum scores help strictly enforce quality gates so that only the cream code changes flow into the main branch. The flexibility in the action, being able to customize different parameters, and use different package managers or reports configurations, makes it highly adaptable to diverse project needs. Now let's go to the following steps, which would allow you to set up and use Lighthouse Check Action properly in your projects to run wide-scale performance and quality checks of your web applications.