Lighthouse now supports performance budgets. This feature, LightWallet, can be set up in under five minutes and provides feedback on performance metrics and the size and quantity of page resources.
LightWallet is available in the command line version of Lighthouse v5+.
To get started, install Lighthouse:
npm install -g lighthouse
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:
For a complete list of supported performance metrics and resource types, refer to the Performance Budgets section of the Lighthouse docs.
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
.
If LightWallet has been configured correctly, the Lighthouse report will contain a Budgets section within the Performance category.
In the JSON version of the Lighthouse report, Lightwallet results can be found within the audit findings for the performance-budget
audit.