How to catch Front-end performance regressions?
Tags: webperf, beginners
Published: 2020-12-29 15:14:01

If you try to take care of your visitors by making your website fast and light, you probably measure its speed using some tool. Chances are you use one of these free tools:

- [Lighthouse](https://web.dev/measure/)
- [WebpageTest](https://webpagetest.org/)
- [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)

Today I will show you how to:

- Run Lighthouse easily from your browser on your current page
- Save report to JSON file
- Compare past report with current report to see if your page is going in the right direction

### What you will need

Only two things are needed to compare past report with current one.

Lighthouse extension for your browser:

- [Firefox](https://addons.mozilla.org/en-US/firefox/addon/google-lighthouse/)
- [Chrome](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk)

And a website that will compare two reports: 

- [Lighthouse CI Diff](https://googlechrome.github.io/lighthouse-ci/viewer/)

### Generate report

After you have installed Lighthouse extension go to your website. Open extension by clicking on its icon, change settings to include all reports and use Desktop strategy, and click generate report.

![Lighthouse Extension](https://dev-to-uploads.s3.amazonaws.com/i/dqf1vyu85xssed6gk9ix.png)

> Note: You can use mobile strategy, or skip PWA - we do. The important thing is to stick to the settings because if Lighthouse report is generated using different settings, compare tool might have issues with detecting changes.

It should look something like this:

![Example report](https://dev-to-uploads.s3.amazonaws.com/i/wmwfnfoq4hbekpjhsbmf.png)



Now you can export this report to JSON file for future reference. In top-right corner there is a "three dot" menu, click it and generate JSON report. Save it in a safe place - you will need it.

![Saving report](https://dev-to-uploads.s3.amazonaws.com/i/4h6r7uyd3r7zv0hluqip.png)

When you have two reports, ideally generated between some changes, you can go to [https://googlechrome.github.io/lighthouse-ci/viewer/](https://googlechrome.github.io/lighthouse-ci/viewer/) and upload both of them to compare. Upload the older one on the left (Base), and newer one on the right (Compare) - this way it will tell you if you made progress or not.

![Lighthouse CI Diff tool](https://dev-to-uploads.s3.amazonaws.com/i/mni386txfvm96e94fcxn.png)

This is how generated comparison looks for our last two builds on our [platformOS documentation site](https://documentation.platformos.com).

![Example comparison](https://dev-to-uploads.s3.amazonaws.com/i/jxq1pr0cj4aab96bazyb.png)

### Future improvements

In the next post I will write how you can use Github Actions to do the reports automatically. It will give you link to comparison report on every pull request, so you can skip the boring parts and get to the good stuff. :)

## Read more

If you like web performance, take a look at my other articles, you might find some inspiration there how to make progress without much effort. And if you really like web performance, consider following me :)

{% link https://dev.to/platformos/3-tips-on-preserving-website-speed-5g0c %}

{% link https://dev.to/platformos/3-performance-tips-for-your-next-project-2bdm %}