Keep and eye of your Nuxt performance with Lighthouse CI

If you are familiar with web performance you have probably already used Lighthouse before. It's a tool provided by Google that helps developers to identify quick wins in performance.

Although most companies fall into the mistake of treating the score as the mighty probe for good performance (There is an awesome article written by Filip Rakowski explaining why. Take a look here "You are probably using Lighthouse Wrong") it doesn't mean that we can't take advantage of it to keep an eye on the metrics of our website while adding new features without compromising performance for our users.

In this tutorial, we are going to learn how to set up Lighthouse CI to monitor the performance of our Nuxt Static Website using Github Actions 🤩.

For that, I gonna borrow the Sushi Recipe Site 🍣 I made for my Storyblok + Nuxt Series.

Installing Lighthouse CI CLI locally

First, let's test the CLI locally to see what it has to offer, making sure everything runs smoothly:

To install it run it on your terminal

pnpm add -g @lhci/cli

Run lhci autorun locally and you should get a prompt like this:

✅  .lighthouseci/ directory writable
⚠️   Configuration file not found
✅  Chrome installation found
Healthcheck passed!

Automatically determined ./dist as `staticDistDir`.
Set it explicitly in lighthouserc.json if incorrect.

Started a web server on port 54712...

Cancel the process for now, since we will need to configure it to work with our Nuxt setup.

Configuring Lighthouse CI for Nuxt

Create a lighthouserc.js file on the root of your project.

module.exports = {
  ci: {
    assert: {
      preset: 'lighthouse:recommended',
    },
    collect: {
      staticDistDir: '.output/public',
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
}