Skip to content
About Blog Learn Explore Patterns Case studies
On this page
  • Install Lighthouse
  • Create a Budget
  • Run Lighthouse
  • View the Results
  • Home
  • All articles

Use Lighthouse for performance budgets

Jun 14, 2019 — Updated Apr 3, 2020
Available in: English, Español, Português, Русский, 中文, 日本語, and 한국어
Appears in: Fast load times
Katie Hempenius
Katie Hempenius
TwitterGitHubGlitchHomepage
On this page
  • Install Lighthouse
  • Create a Budget
  • Run Lighthouse
  • View the Results

Lighthouse now supports performance budgets. This feature, known as LightWallet, can be set up in under five minutes and provides feedback on performance metrics and the size and quantity of page resources.

Important

While Lighthouse is an excellent tool for identifying performance improvement opportunities, it can't be stressed enough that Lighthouse is a tool that relies on lab data. While lab data is an integral part of any performance improvement effort, comparing and contrasting that data with field data collected from your website's actual users is key. Doing so will help you understand how the changes you make to your website affect real users.

Install Lighthouse #

LightWallet is available in the command line version of Lighthouse v5+.

To get started, install Lighthouse:

npm install -g lighthouse

Create a Budget #

Create a file named budget.json. In this file add the following JSON:

[
{
"path": "/*",
"timings": [
{
"metric": "interactive",
"budget": 3000
},
{
"metric": "first-meaningful-paint",
"budget": 1000
}
],
"resourceSizes": [
{
"resourceType": "script",
"budget": 125
},
{
"resourceType": "total",
"budget": 300
}
],
"resourceCounts": [
{
"resourceType": "third-party",
"budget": 10
}
]
}
]

This example budget.json file sets five separate budgets:

  • A budget of 3000ms for Time to Interactive.
  • A budget of 1000ms for First Meaningful Paint
  • A budget of 125 KB for the total amount of JavaScript on the page.
  • A budget of 300 KB for the overall size of the page.
  • A budget of 10 requests for the number of requests made to third-party origins.

For a complete list of supported performance metrics and resource types, refer to the Performance Budgets section of the Lighthouse docs.

Run Lighthouse #

Run Lighthouse using the --budget-path flag. This flag tells Lighthouse the location of your budget file.

lighthouse https://example.com --budget-path=./budget.json
Note: A budget file does not have to be named budget.json.

View the Results #

If LightWallet has been configured correctly, the Lighthouse report will contain a Budgets section within the Performance category.

'Budgets' section of the Lighthouse report

In the JSON version of the Lighthouse report, Lightwallet results can be found within the audit findings for the performance-budget audit.

Performance
Last updated: Apr 3, 2020 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.