使用 Lighthouse 制定性能预算

Katie Hempenius
Katie Hempenius
X

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 报告将在效果类别中包含预算部分。

“预算”Lighthouse 报告的

在 JSON 版本的 Lighthouse 报告中，Lightwallet 结果可以在 performance-budget 审核的审核结果中找到。