You website loads fast… right? If it’s a blog website like this, it better load pretty fast, it just some text!

But how do you know your website is fast, and that adding a cool new feature didn’t just make it totally worse? Or what if it was fast last month, but then you made a bunch of changes across multiple days, when did it become slow?

These are the problems Lighthouse-CI is trying to solve.

Lighthouse CI loads your site in a Chrome browser and runs the built-in Chrome site diagnostic tool. These metrics are then saved to a database where you can view how your site historically performed, vs how it’s performing now. And the coolest part, is this is just another step in the CI/CD pipeline (that you may already be running).

LXC

Setup a LXC container by following these two guides:

1, 2.

They will walk you through both how to setup your git project (the website) and the Lighthouse server (thing that stores the test results).

Custom Docker Image

Since I’m running my own git instance (git.oliveratkinson.net), I needed to create my own docker image for the lighthouse CI pipeline.

FROM lscr.io/linuxserver/chrome:latest

USER root

RUN apt-get update && apt-get install -y nodejs
RUN npm install -g @lhci/cli
RUN rm -rf /var/lib/apt/lists/*

RUN chown -R abc:abc /config
ENV HOME=/config
USER abc

Then build the image with

docker build -t nodechrome:latest .

CI/CD VM

Now that the docker image is built, we let the forgejo runner know that it’s avaliable:

labels:
    # ... other labels...
    - lighthouse-ci:docker://nodechrome:latest

CI/CD Workflow

Just a simple workflow like this in { .gitea | .forgejo }/workflows/<workflow-name>.yml:

name: CI
on: [push]
jobs:
  lhci:
    name: Lighthouse
    runs-on: lighthouse-ci
    steps:
      - uses: actions/checkout@v4
      - name: Build the project
        run: |
          npm i
          npm run build
      - name: run Lighthouse CI
        run: |
          lhci autorun --config=lighthouserc.cjs