Our great sponsors
-
For this tutorial I will be using Nuxt.js, Lighthouse CI, and Github Actions but you can adjust it to your code repository workflows. In this tutorial I won't be covering the topic of assertions and budgets, but I will create separate articles soon (Oops, spoilers). If you are interested into Lighthouse configuration you can visit this page -> https://github.com/GoogleChrome/lighthouse/blob/master/docs/configuration.md
-
You will need to install and authorise the Lighthouse CI application for Github. Make sure to copy the generated LHCI_GITHUB_APP_TOKEN as we will need it later. https://github.com/apps/lighthouse-ci
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
lighthouse-ci
Automate running Lighthouse for every commit, viewing the changes, and preventing regressions
This approach would suit most of the cases however to achieve more accurate performance audits you should be conducting Lighthouse tests on a dedicated server to avoid results being affected by the machine capabilities. In other words, if you are running Lighthouse audits on a repository where there are several pull requests/workflows/pushes going on, the result of this audit may not be accurate and this is what we want to avoid. For that you would need a separate machine with Lighthouse Server installed on it. So on a pull request you would trigger this machine to conduct a performance audit and return response to your repository.
-
Below you can see a demo repository with the code from this article: https://github.com/Baroshem/nuxt-lighthouse-ci
-
Instead of using npm package you could use a Github Action that would esentially do the same thing. The downside to that approach is that you won't be able to test your project locally with lighthouse (unless you are using local github actions package like https://github.com/nektos/act)
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
Related posts
- help needed with lighthouse ci for angular, github actions, PROTOCOL_TIMEOUT: (Method: Debugger.disable)
- Is Lighthouse a misleading performance tool?
- When connecting to the PSI api via SF what is the level of simulated network throttling used?
- How To Optimize Your React App’s Performance
- I'm a frontend devloper and looking for mentorship/guidance in architecting an application with was