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 報告的 JSON 報表中,可在 performance-budget
稽核的稽核發現項目中找到 Lightwallet 結果。