Performance budgets with Lighthouse - Lighthouse keeper

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.

lighthouse-devtools

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.

Ryanair Rooms Budget

In Ryanair we recently launched Ryanair Rooms, where you can find hotels, B&B, Apartments and Hostels.

The competitors that i will audit here are:

  • booking.com
  • airbnb.com
  • expedia.com
  • trivago.com

I'm now using lighthouse-keeper to compare the reports and calculate the budget that we should aim for.

chart-score

chart-bytes

chart-timings

Setting up a performance budget on a new or existing project its a great way to set a trackable and very impactful metric for you and your team.

Lighthouse-keeper is open-source and available here.

And remember #perfmatters.