Chcek Website Performance with Lighthouse CI

@ Web Performance

Introduction

Recently, I added Lighthouse CI to this blog for web performance testing. Previously, I relied on manual tools like PageSpeed Insights🔗 for testing, but this approach has several drawbacks:

  • Unstable results from single tests
  • Time-consuming manual testing
  • Not good to team development

I hope to automate performance checks so that I don’t have to wait a long time to know if a page has performance or accessibility issues, allowing for timely fixes when problems arise.

Lighthouse CI

Step 1: Create a Configuration File

You can create a Lighthouse CI configuration file🔗 at the root of your project, supporting various file formats. For my blog, I use .lighthouserc.yml for configuration:

ci:
  collect:
    numberOfRuns: 3


  assert:
    preset: 'lighthouse:no-pwa'
    assertions:
      csp-xss: 'warn'
      total-byte-weight: 'off' # TODO: enable this when this bug is fixed: https://github.com/GoogleChrome/lighthouse-ci/issues/1001
      identical-links-same-purpose: 'off'


  upload:
    target: 'temporary-public-storage'
    # upload options here


  server:
    # server options here


  wizard:
    # wizard options here

You can refer to the Lighthouse CI configuration file🔗 for how to set up performance testing, such as how many times to test, the depth of the test folder, and where to store the results, etc. Currently, my configuration disables some unnecessary checks, PWA validation, and sets the number of tests per page to 3. By default, it will detect all pages in the dist folder of my project.

Step 2: Generate Test Reports

After creating the configuration file, you can run Lighthouse CI to generate test reports. My approach is to download the package @lhci/cli and add a command in package.json to run it locally:

"scripts": {
  "lighthouse": "lhci autorun"
}

Once the existing issues are fixed locally, you can move the entire process to CI. Here, I use GitHub Action to run Lighthouse CI🔗:

- name: Build
  run: pnpm build
- name: Lighthouse
  run: pnpm lhci autorun

Summary

In just under 3 steps, I easily added Lighthouse CI to my website to check web performance. There’s no need to manually test each page; performance issues can be automatically detected with every code submission. This approach is a great performance testing tool for team development and allows developers to fix issues more quickly. You can refer to this PR🔗 to understand how I added Lighthouse CI to my blog.