How to integrate lighthouse ci with GitHub actions

We can integrate Lighthouse CI with GitHub actions to automate the process of testing web performance. The purpose of this blog post is to walk you through the steps to integrate it into GitHub actions and leverage its capabilities for automated performance testing.

Getting to know Lighthouse CI

This tool is open-source, developed by Google, and based on Lighthouse, which automates the auditing of web pages. It offers a programmatic interface to conduct Lighthouse audits, track performance indicators, and produce in-depth reports. It enables us to evaluate several online performance factors, which include speed, SEO, usability, and best practices.

Configure Lighthouse CI

Install Lighthouse CI using NPM as a development dependency to incorporate into GitHub actions. The performance metrics we want to assess should then be specified in a Lighthouse configuration file. This is to ensure that our web application complies with the desired performance criteria. Furthermore, we can configure Lighthouse CI to launch as part of our build procedure when a commit is made.

Note: Before installing Lighthouse CI in our system, we must have Node installed in it. 
For installing Node: – https://docs.npmjs.com/downloading-and-installing-node-js-and-npm

Steps to Integrate GitHub Actions

Step 1
Create-.GitHub/workflows directory in our repository.

Step 2
Add the following YAML file in the above directory. And modified it according to our execution.

Step 3
Commit & push the changes in our remote repo.

name: Lighthouse CI

on: push

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v3
      
      - name: Audit URLs using Lighthouse
        uses: treosh/lighthouse-ci-action@v10
        with:
          urls: | 
            https://www.saucedemo.com/
          budgetPath: ./budget.json # test performance budgets
          uploadArtifacts: true # save results as an artifact
          temporaryPublicStorage: true # upload performance report to the storage

Step 4
As long as we commit and push the changes in GitHub, monitor the tests to trigger the pipeline, and execute the Lighthouse test.

Execute performance tests on GitHub actions

We can automate performance testing in our CI/CD process by integrating it. This integration will allow the performance tests to be carried out on the deployed web application every time when a new commit request is submitted. It produces thorough reports showing key performance indicators, pinpointing opportunities for development, and noting any instances of regression. We can solve performance concerns early in the development cycle by analyzing these reports, preventing them from making it to production.

Utilize generated reports

We can learn a lot about our web application’s performance from the information produced by it. For improving various performance facets, it offers concrete advice and recommendations. We can improve user experience, fine-tune our online apps, and prioritize and handle significant performance issues by utilizing this information. As a further step towards fostering collaboration and setting clear expectations, the data can also be distributed to other parties involved, including developers, testers, and project managers.

In conclusion

We can continuously track and enhance the performance of our web applications thanks to Lighthouse CI’s integration into our CI/CD workflow for automated performance testing. We can save time and effort by automating the testing process, and we can ensure consistent performance across deployments. The practical knowledge from the CI-generated report enables us to improve the performance of our application and provide a better user experience with each release.

For more information please visit:- https://www.npmjs.com/package/lighthouse