Measure performance of the app on every push with Lighthouse CI GitHub Action

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

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.

Create .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.

References