Performance budgets with Lighthouse - Lighthouse keeper

April 17, 2018

Keep your website on a budget, lighthouse-keeper helps you visualize and create your performance budgets using lighthouse audit reports.

Setting up a performance budget is a healthy practice for yourself, your team and your users as well. As a developer it gives you a goal that you should meet to improve the experience for your users. As a team leader gives you a metric to track your whole team work.

A performance budget for a website is the process of analysing competitors websites, especially around the pages total weight, the first meaningful paint and other metrics that impact performance for the users.

There are plenty of articles describing how and why you should set up a performance budget for your website or web application, generally this can serve as a baseline for improving your website performance or set up a goal for your next project.

A good strategy while setting up a performance budget is picking your competitors and set your budget 20% below the best performing competitor.

Just as a reminder of how this is important, not only for your users but also for your revenue, google released recently a mobile speed calculator where you can compare how much your performance score can impact your revenue at https://www.thinkwithgoogle.com/feature/mobile/

Your website needs to be at least 20% faster than your competitors.

That’s because for a user to have any noticeable difference, your website needs to be at least 20% faster.

There are various tools to audit and keep track of the performance of your website, the most known probably are:

webpagetest where you can run a free website test using real browsers and across multiple locations.
sitespeed a collection of open source tools ready to be used to measure performance.
lighthouse an open source tool for audit and improving performance of your webpages.

Lighthouse is the tool that i will focus on for this article. Lighthouse can be used directly from Chrome, just opening the devtools and then click on the audit panel.

Or as cli

npm i -g lighthouse

There are four main audits that lighthouse will perform during an audit:

Performance
Accessibility
PWA
SEO

Since we are interesting in setting up performance budgets the one that we will be focusing on will be the performance audit.

The performance audit collect various metrics on the website, more interesting one while setting a performance budget are:

Total Size
First Meaningful Paint
First Visual Change
First Interactive
Visually Complete
Time to first byte
JS parse & com

Its worth to mention that lighthouse sets some presets for the audit. The default presets are:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10133) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
Device Emulation Nexus 5X: Enabled
Network Throttling 562.5ms RTT, 1.4Mbps down, 0.7Mbps up: Enabled
CPU Throttling 4x slowdown: Enabled

I recommend to keep those presets so that your audits will be more consistent even if your connectivity is not the same.

You can access lighthouse reports either directly in your browser or save them as json files.

In order to save a report from the browser interface select the download icon

or if you are using the cli specify the option --output=json and --output-path to save it locally.

Now that you have the reports in order to get a performance budget you still need to calculate yourself the 20% off all the metrics that we are interested into

That’s why i created lighthouse-keeper, a visual tool that will calculate automatically your performance budget based upon lighthouse reports.

To use it you just need to select/drag all the reports which you are interested into and lighthouse-keeper takes care of the rest, displaying the performance of the website selected in a chart and calculating your budget.

There are three main sections that lighthouse-keeper analyse: score which compares the general score for an audit; timings contains all the metrics relative to performance timings; bytes which compare the total bytes size grouped by the different mime/types.