_{Photo by Dietmar Becker on Unsplash}

I already use SiteSpeed to monitor performance on a website. It's great! I'm using a Grafana dashboard to see the performance evolution on some pages.

But, i have discovered thanks to this post, that lighthouse can be used to compare performance for specific pages between git branches. It's great as providing information on the performance impact on their modification to developer, seems promising.

Basics

Lighthouse-ci is composed of

• one client that will gather data, and upload them to the server. It can be installed through

npm i @lhci/cli

• one server that will display through dashboard the evolution of the report. It can be installed through npm. I used the Docker image provided by patrickhulce, that will create a self sufficient server available at http://localhost:9001.

docker volume create lhci-data
docker container run --publish 9001:9001 --mount='source=lhci-data,target=/data' --detach patrickhulce/lhci-server

Please note that you will have to setup the server through the client by running locally. It will generate two token. You will have to note the build data one.

lhci wizard

Configuration file

I have reused the configuration file, replaced the url / token with mine and removed the server part.

Authentication

The main issue is the authentication part.
We can use a js file that will use puppeteer to setup the authentication.
As i don't know puppeteer, i have used this script to setup the script through

node your_script.js

My script ends like this

module.exports = async (browser, context) => {
  const page = await browser.newPage();
  await page.goto("https://localhost:4200");
  await page.waitForSelector("#Username", { visible: true });
  await page.type("#Username", "your_login");
  await page.type("#Password", "your_password");
  await page.$eval(".btn-primary", (elem) => elem.click());
  await page.waitForNavigation();
  await page.waitForSelector("#launchDesignerButton", { visible: true });
  await page.waitFor(2000);
  await Promise.all([page.click('[type="submit"]'), page.waitForNavigation()]);

  await page.close();
};

Finally

Once i have the configuration file for the client, the login script, and the server setup, we can simply collect the data through

lhci collect
lhci upload

I understand that this tool can open a nice addition to our CI pipeline through assertion for PR validation.

Hope this helps !