In this article we're going to create GitHub Action witch is generating Lighthouse report on every push. The goal is to measure, analyze and improve your page performance (initial load, accessibility, usage of best practices, SEO and PWA). Lighthouse is taking measures 3 times in a row for better accuracy.
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.
Lighthouse been here for a while and now it is even built-in Google Chrome Dev Tools under "Audits" tab:
you can do performance audits using Google Chrome Dev Tools on
https://localhost:<port> but that's not what we are interested in.
We want to measure performance development after each push and commit to a remote repository.
Lighthouse CI Action
GitHub Actions is a powerful way to automate different sorts of tasks and they live close to your source if you're using GitHub which is super handy.
We're going to create the most basic example: run Lighthouse on each push to the repo and save results as action artifacts.
.github/workflows/lighthouse.yml with the list of URLs to audit using Lighthouse. The results will be stored as a build artifact:
name: Lighthouse on: push jobs: lighthouse: runs-on: ubuntu-latest steps: - uses: actions/checkout@v1 - name: Audit URLs using Lighthouse uses: treosh/lighthouse-ci-action@v2 with: urls: | https://<your_web_site>/ https://<your_web_site>/page2 - name: Save results uses: actions/upload-artifact@v1 with: name: lighthouse-results path: '.lighthouseci' # This will save the Lighthouse results as .json files
Create PR with your changes.
Lighthouse CI Action overview
You will see a new check on your PR created from action click on the "Details" link.
That will open the "Actions" tab with your action details. Here you can see the steps name that you specified in the
.yml config and some log/debug data.
In the right corner, you'll find "Artifacts". This is the output from your GitHub Action which is generated Lighthouse report in
report_name.json format. Download it.
Lighthouse Report Viewer
All we left to do is upload downloaded
report_name.json file to the Lighthouse Report Viewer.
Github Action output is a
report_name.json file as a build artifact, we can download produced artifact and analyze it with Lighthouse Report Viewer.
Navigate to the Lighthouse Report Viewer and upload it to view it (similar to WEBPACK VISUALIZER).
Here's how the report will look like:
You can advance even further and analyze on every now deployment and not only against static
URL definitions. I'm describing How to configure automated deployments for every branch/commit with Zeit now.