Use Lighthouse CI to track performance 
Tags: lighthouse, performance
Published: 2020-07-05 14:22:00

<sub><span>Photo by <a href="https://unsplash.com/@dietmarbecker?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Dietmar Becker</a> on <a href="https://unsplash.com/s/photos/comparison?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span></sub>

I already use [SiteSpeed](https://www.sitespeed.io/) 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](https://www.javascriptjanuary.com/blog/getting-started-with-lighthouse-ci), 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](https://github.com/GoogleChrome/lighthouse-ci) is composed of 
- one client that will gather data, and upload them to the server. It can be installed through
```javascript
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](https://hub.docker.com/r/patrickhulce/lhci-server) provided by patrickhulce, that will create a self sufficient server available at http://localhost:9001.

```bash
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.

```javascript
lhci wizard
```
#Configuration file

I have reused the [configuration file](https://raw.githubusercontent.com/GuruCharan94/lighthouse-ci-demo/master/lighthouserc.json), 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](https://github.com/GoogleChrome/lighthouse/blob/master/docs/puppeteer.md) to setup the script through 

```javascript
node your_script.js
```

My script ends like this

```javascript
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

```javascript
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 !