我為什麼需要效能預算？
預算的存在是為了反映您可達到的目標。這是使用者體驗與其他效能指標（例如轉化率）之間的權衡。
這些目標可以是
它們的主要目標是防止效能退化，但它們可以提供洞察力來預測趨勢（即，在 9 月份，一週內花費了預算的 50%）。
此外，它可以揭示開發需求（例如，一個包含較小替代方案的大型庫經常被選中來解決一個常見問題）。
我如何定義效能預算？
一個預算應包含 2 個級別
- 警告。
- 錯誤。
警告級別允許您主動規劃任何技術債務，同時又不阻止開發或部署。
錯誤級別是一個上限，在此之下，更改將產生負面且明顯的影響。
第一步是測量您的使用者來自的裝置和連線速度（例如，在 3G 連線下使用約 200 美元的 Android 裝置），並使用多個工具。這些基於時間的指標將轉化為檔案大小預算。
減少跳出率的一個預設基準是在 3G/4G 下實現互動時間在 5 秒以內，後續載入在 2 秒以內。但是，根據您網站的具體目標和內容，您可能選擇關注其他指標。
對於像部落格或新聞網站這樣的以文字為主的網站，首次內容繪製指標更能密切反映使用者行為。（即，使用者能多快開始閱讀），這將告知檔案特定的預算（例如，字型大小），以及它們的最佳化。（例如，使用font-display來提高感知效能）。
效能預算的最終價值在於將效能對業務或產品目標的影響關聯起來。在定義指標時，您應該關注使用者體驗，這不僅決定了跳出率或轉化率，還決定了使用者返回的可能性。
我如何實現效能預算？
在開發過程中，有幾種工具可以對新資產或修改過的資產進行檢查
- 模組打包器（例如，webpack）具有效能功能，當資產超過指定限制時會通知您。
- Bundlesize允許您在持續整合（CI）管道中定義和執行檔案大小檢查。
檔案大小檢查是防止效能退化的第一道防線，但將大小轉換回時間指標可能很困難，因為開發環境可能缺少第三方指令碼，以及CDN通常提供的最佳化。
第一步是為每個分支定義一個開發基準進行比較，開發與生產環境之間的差異精度可以作為實現更好匹配即時環境的目標。
Lighthouse Bot與Travis CI整合，可用於從開發 URL 收集Lighthouse和Webpage Test指標。該機器人將根據提供的最低分數透過或失敗。
我如何強制執行效能預算？
您越早發現可能超出預算的新增內容，就越能更好地分析您網站的當前狀態，並找出最佳化或不必要的程式碼。
但是，您應該有多個預算並保持動態。它們旨在反映您當前的目標，但允許承擔風險和進行實驗。例如，您可能會引入一個功能，該功能會增加整體載入時間，但會嘗試提高使用者參與度。（例如，使用者在頁面或網站上停留的時間）。
效能預算可以幫助您保護當前使用者的最佳行為，同時使您能夠進入新市場並提供定製體驗。