效能預算

效能預算是一個限制，用於防止迴歸。它可以應用於檔案、檔案型別、頁面載入的所有檔案、特定指標（例如，時間互動）、自定義指標（例如，時間到英雄元素）或一段時間內的閾值。

為什麼我需要效能預算？

預算存在是為了反映您的可達目標。它是在使用者體驗與其他效能指標（例如轉化率）之間的權衡。

這些目標可以是

  • 基於時間的（例如，時間互動、首次內容繪製）。
  • 基於數量的（例如，JS 檔案數量/總影像大小）。
  • 基於規則的（例如，PageSpeed 指數、Lighthouse 得分）。

它們的主要目標是防止迴歸，但它們可以提供洞察力來預測趨勢（即，在 9 月，50% 的預算在一週內就花掉了）。

此外，它還可以發現開發需求（即，經常選擇帶有較小替代方案的大型庫來解決常見問題）。

如何定義效能預算？

預算應包含 2 個級別

  • 警告。
  • 錯誤。

警告級別允許您主動採取措施並計劃任何技術債務，同時不會阻止開發或部署。

錯誤級別是上限，超出此級別，更改將產生負面且明顯的影響。

為了開始，您需要首先衡量使用者來自的裝置和連線速度（例如，在 3G 連線下使用約 200 美元的 Android 裝置），使用多個 工具。這些基於時間的指標將轉換為檔案大小預算。

降低跳出率的預設基線是在 3G/4G 網路下實現 時間互動低於 5 秒，後續載入低於 2 秒。但是，根據您網站的特定目標和內容，您可能選擇專注於其他指標。

對於像部落格或新聞網站這樣的文字密集型網站，首次內容繪製 指標可能更能反映使用者行為。（即，使用者多快開始閱讀），這將告知特定檔案的預算（例如，字型大小）及其最佳化。（例如，使用 font-display 提高 感知效能）。

效能預算的最終價值是將效能對業務或產品目標的影響相關聯。定義指標時，您應該關注 使用者體驗，這不僅會決定跳出率或轉化率，還會決定使用者返回的可能性。

如何實現效能預算？

在開發過程中，有一些工具可以執行檢查以針對新資產或已修改資產進行檢查

  • 模組捆綁器（例如，webpack）具有 效能功能，當資產超過指定限制時，它會通知您。
  • Bundlesize 允許您在持續整合 (CI) 管道中定義和執行檔案大小檢查。

檔案大小檢查是防止迴歸的第一道防線，但將大小轉換回時間指標可能很困難，因為開發環境可能缺少第三方指令碼，以及 CDN 通常提供的最佳化。

第一步是為每個分支定義一個開發基線以進行比較，開發和生產之間的差異精度可以用作更好地匹配即時環境的目標。

Lighthouse Bot 與 Travis CI 整合，可用於從開發 URL 收集 Lighthouse 和 Webpage Test 指標。該機器人將根據提供的最低得分透過或失敗。

如何執行效能預算？

您越早識別出可能導致預算超支的潛在新增，您就越能分析您網站的當前狀態，並確定最佳化或不必要的程式碼。

但是，您應該擁有多個預算並保持動態。它們旨在反映您正在進行的目標，但允許風險和實驗。例如，您可以引入一個功能，該功能會增加總的載入時間，但試圖提高使用者參與度。（即，使用者在頁面或網站上停留多長時間）。

效能預算可以幫助您保護當前使用者的最佳行為，同時使您能夠進入新市場並提供定製體驗。

另請參閱