根據(jù)用戶經(jīng)驗和業(yè)務(wù)目標(biāo)，定義關(guān)鍵指標(biāo)，例如頁面重量，LCP，F(xiàn)ID/TBT，CLS和第三方影響。 2。使用當(dāng)前的績效，競爭對手的基準(zhǔn)和現(xiàn)實情況來設(shè)置現(xiàn)實的預(yù)算，使用燈塔CI等工具來編纂限制。 3。通過集成到CI/CD，運行拉的請求檢查，生成自動報告（包括代碼評論的性能）以及使用SpeedCurve或Caliber等RUM工具來執(zhí)行預(yù)算。 4.教育整個團(tuán)隊（設(shè)計師，產(chǎn)品經(jīng)理和營銷人員）在績效取捨，並以旋轉(zhuǎn)的績效冠軍進(jìn)行定期回顧，以維持問責(zé)制。為了使您的網(wǎng)站保持迅速的長期，請衡量重要的事情，設(shè)定硬限制，自動執(zhí)法並使績效在整個團(tuán)隊中成為共同的責(zé)任。

網(wǎng)絡(luò)性能預(yù)算是您設(shè)定的限制，以使您的網(wǎng)站在開發(fā)過程中保持快速和以用戶為中心。它們的行為就像財務(wù)預(yù)算一樣 - 您“花費”太多（例如，捆綁尺寸，負(fù)載時間），您會得到警報，需要重新考慮決策。設(shè)置和執(zhí)行它們可以確保隨著時間的推移的性能不會降低，尤其是在功能堆積時。

這是有效設(shè)定和執(zhí)行績效預(yù)算的方法。

1。定義要測量的內(nèi)容（選擇正確的指標(biāo)）

並非所有指標(biāo)都同樣重要。專注於反映真正的用戶體驗和業(yè)務(wù)目標(biāo)的人。

預(yù)算中包括的關(guān)鍵指標(biāo)：

• 頁面重量：HTML，CSS，JS，圖像，字體的總大小。
• JavaScript執(zhí)行時間：長任務(wù)阻止交互性。
• 最大的內(nèi)容油漆（LCP） ：應(yīng)低於2.5秒。
• 第一輸入延遲（FID）或總阻塞時間（TBT） ：衡量響應(yīng)能力。
• 累積佈局偏移（CLS） ：將視覺穩(wěn)定性保持在0.1下。
• 第三方腳本影響：經(jīng)常被忽視，但可以主導(dǎo)加載時間。

示例：您可能會設(shè)置“不超過150kb的JavaScript（GZPICPERCT）”或“ LCP必須在3G上保持2.8”的預(yù)算。

在設(shè)置限制之前，請使用燈塔，WebPagetest或Chrome DevTools等工具收集基線數(shù)據(jù)。

2。設(shè)置現(xiàn)實，可行的預(yù)算

避免任意數(shù)字?；赌念A(yù)算：

• 您當(dāng)前的表現(xiàn)。
• 競爭對手基準(zhǔn)。
• 用戶設(shè)備和網(wǎng)絡(luò)條件（例如，3G上的中層移動設(shè)備）。

預(yù)算類型：

• 基於資源的：“最大1MB總頁面重量”。
• 基於性能指標(biāo)：“模擬4G上的LCP≤2.5s”。
• 關(guān)鍵文件計數(shù)：“關(guān)鍵路徑中的JavaScript文件不超過6個?！?/li>

開始嚴(yán)格但可以實現(xiàn)。您稍後可以收緊預(yù)算。

專家提示：使用Lighthouse CI在代碼中定義預(yù)算（例如，在lighthouserc.json中）：

 {
“ CI”：{
“ performanceBudget”：{
“定時”：[
{“ metric”：“ first-contentful-paint”，“預(yù)算”：1800}，，
{“ metric”：“互動”，“預(yù)算”：3000}
]，，
“資產(chǎn)”：[
{“ ResourceType”：“腳本”，“預(yù)算”：300}，，
{“ ResourceType”：“ Image”，“預(yù)算”：1000}
這是給出的
}
}
}

3。在開發(fā)工作流程中執(zhí)行預(yù)算

沒有執(zhí)行的預(yù)算只是一個建議。

執(zhí)行方式：

• 集成到CI/CD ：如果超過預(yù)算，則會失敗構(gòu)建。
  • 工具：Lighthouse CI，WebPack Bundle Analyzer，捆綁。
• 拉請求檢查：顯示束差異和性能影響。
  • 示例：如果PR將> 10KB添加bundlesize main.js。
• 自動報告：向團(tuán)隊發(fā)送每週的性能摘要。
• 代碼評論：將績效組成一部分清單。

現(xiàn)實世界中的示例：Google和Airbnb在CI中運行績效預(yù)算。將JS大小增加10％的PR被標(biāo)記為標(biāo)記，即使它通過測試。

此外，使用以下工具設(shè)置房地產(chǎn)使用者監(jiān)視（朗姆酒） ：

• Speedcurve
• 口徑
• 新的遺物瀏覽器

這些軌道在生產(chǎn)中的軌道表現(xiàn)和警報，當(dāng)預(yù)算受到違反時。

4。教育和對齊團(tuán)隊

性能不僅是一個開發(fā)問題，而且是產(chǎn)品，設(shè)計和營銷問題。

• 設(shè)計師：了解大英雄圖像或動畫的成本。
• 產(chǎn)品經(jīng)理：權(quán)衡功能價值與性能成本。
• 市場營銷：第三方標(biāo)籤（分析，廣告，聊天機(jī)器人）加起來很快。

保留定期的“績效回顧”，以審查預(yù)算依從性並根據(jù)需要進(jìn)行調(diào)整。

一種有用的做法：為團(tuán)隊分配旋轉(zhuǎn)的“績效冠軍”以擁有預(yù)算評論。

設(shè)定績效預(yù)算很簡單。始終如一地執(zhí)行它是真正的挑戰(zhàn)。關(guān)鍵是將其烘烤到您的工具，工作流和文化中，而不是將其視為事後的想法。

基本上：衡量重要的事情，設(shè)定硬限制，自動執(zhí)法，並使每個人負(fù)責(zé)。這就是您長期保持網(wǎng)站的方式。

以上是網(wǎng)絡(luò)績效預(yù)算：設(shè)定和執(zhí)行它們的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！