Continuous performance checks in Nuxt.js with Lighthouse CI and Github Actions

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • lighthouse

    Automated auditing, performance metrics, and best practices for the web.

    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.

  • nuxt-lighthouse-ci

    Demo repository of Nuxt.js project with Lighthouse CI Github workflows

    Below you can see a demo repository with the code from this article: https://github.com/Baroshem/nuxt-lighthouse-ci

  • act

    Run your GitHub Actions locally 🚀

    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.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts