Lighthouse 现在支持性能预算。此功能称为 LightWallet,可在 5 分钟内设置完成,可提供有关性能指标以及页面资源大小和数量的反馈。
安装 Lighthouse
LightWallet 适用于 Lighthouse v5 及更高版本的命令行版本。
首先,请安装 Lighthouse:
npm install -g lighthouse
创建预算
创建一个名为 budget.json
的文件。在此文件中,添加以下 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
}
]
}
]
此示例 budget.json
文件设置了五项单独的预算:
- 可交互时间的预算为 3000 毫秒。
- 为首次有效渲染设置 1000 毫秒的预算
- 为网页上的 JavaScript 总量设置 125 KB 的预算。
- 网页总大小为 300 KB 的预算。
- 预算为 10 次请求,依据的是向第三方源发出的请求数。
如需查看受支持性能指标和资源类型的完整列表,请参阅 Lighthouse 文档的性能预算部分。
运行 Lighthouse
使用 --budget-path
标志运行 Lighthouse。此标志会告知 Lighthouse 您的预算文件的位置。
lighthouse https://example.com --budget-path=./budget.json
查看结果
如果 LightWallet 已正确配置,Lighthouse 报告将在效果类别中包含预算部分。
在 JSON 版本的 Lighthouse 报告中,Lightwallet 结果可以在 performance-budget
审核的审核结果中找到。