使用 Lighthouse 設定效能預算

Katie Hempenius
Katie Hempenius
X

Lighthouse 現已支援效能預算。這項功能 (稱為 LightWallet) 可在五分鐘內設定完成，並提供成效指標、網頁資源大小和數量等方面的意見回饋。

安裝 Lighthouse

Lighthouse 可在 Lighthouse 第 5 版以上的指令列中使用。

如要開始使用，請安裝 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 毫秒的預算
  • 125 KB 為網頁上 JavaScript 總量的預算。
  • 將網頁整體大小的預算設為 300 KB。
  • 針對向第三方來源發出的要求數量設定 10 個請求的預算。

如需支援的成效指標和資源類型完整清單，請參閱 Lighthouse 文件的「效能預算」一節。

執行 Lighthouse

使用 --budget-path 旗標執行 Lighthouse。這個標記會向 Lighthouse 指出預算檔案的位置。

lighthouse https://example.com --budget-path=./budget.json

查看結果

如果 LightWallet 已正確設定，Lighthouse 報表就會在「Performance」(成效) 類別中提供「Budgets」(預算) 部分。

Lighthouse 報表的「預算」部分

在 Lighthouse 報告的 JSON 報表中，可在 performance-budget 稽核的稽核發現項目中找到 Lightwallet 結果。