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.