Skip to content
关于 博客 学习 探索 模式 Case studies
本页内容
  • 安装 Lighthouse
  • 创建预算
  • 运行 Lighthouse
  • 查看结果
  • Home
  • All articles

使用 Lighthouse 进行性能预算

Jun 14, 2019 — 更新日期 Apr 3, 2020
Available in: English、Español、Português、Русский、日本語和한국어
Appears in: 快速加载
Katie Hempenius
Katie Hempenius
TwitterGitHubGlitchHomepage
本页内容
  • 安装 Lighthouse
  • 创建预算
  • 运行 Lighthouse
  • 查看结果

Lighthouse 现在支持性能预算。LightWallet 功能可在不到五分钟的时间内设置好,其可提供关于页面资源的大小和数量的反馈。

安装 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
注意:预算文件不必命名为 budget.json 。

查看结果 #

如果已正确配置 LightWallet,Lighthouse 报告将包含性能类别内的预算部分。

Lighthouse 报告的'预算'部分

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

性能
Last updated: Apr 3, 2020 — Improve article
Return to all articles
分享
订阅

Contribute

  • 提交错误
  • 查看源代码

相关内容

  • developer.chrome.com
  • Chrome 动态
  • 案例研究
  • 播客
  • 节目

连接

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • 所有产品
  • 条款和隐私权
  • 社区准则

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.