效能是使用者體驗中很重要的環節，也會影響業務指標。您都想認為，優秀的開發人員應能獲得成效良好的網站，但事實上，良好效能其實很少產生副作用。和其他多數設定一樣，要達到目標，您必須清楚定義目標。先設定效能預算，踏出第一步。
定義
效能預算是針對影響網站效能的指標所設的一組限制。這可以是網頁的總大小、在行動網路中載入的時間，甚至是已傳送的 HTTP 要求數。定義預算有助於促進網站成效的對話。在設計、技術和新增功能時，這些資料可做為參考依據。
編列預算可讓設計人員思考高解析度圖片的影響以及挑選的網頁字型數量。也可以協助開發人員比較不同問題做法，並根據規模和成本分析來評估架構和程式庫。
選擇指標
以數量為依據的指標 ⚖️
在早期開發階段，這些指標可突顯出加入大量圖片和指令碼的影響，因此十分實用。也能輕鬆與設計人員和開發人員溝通。
我們先前已經提到過，您可以在效能預算中加入一些內容，例如網頁權重和 HTTP 請求數量，但您也可以拆分這些更精細的限制，例如：
- 圖片大小上限
- 網路字型數量上限
- 指令碼大小上限 (含架構)
- 外部資源 (例如第三方指令碼) 總數
然而，這些數據未能充分反映使用者體驗。如果兩個網頁的要求數量或權重都相同，則視資源要求的順序而定，網頁的顯示方式也會有所不同。如果某個網頁的主頁橫幅或樣式表等重要資源 (例如主頁橫幅或樣式表) 於過程中的後期載入，使用者會等待較長的時間，才會看到有用的內容，而速度會減慢。如果其他網頁上的重要部分都能快速載入，那麼即使網頁的其他部分沒有出現，他們可能也不會察覺。
因此，請務必追蹤其他類型的指標。
里程碑時間點 🎄?️
里程碑時間會指出網頁載入期間發生的事件，例如 DOMContentLoaded 或 load 事件。最實用的時機是以使用者為主的成效指標，可讓你瞭解網頁載入體驗的相關資訊。您可以透過瀏覽器 API 和 Lighthouse 報表取得這些指標。
「首次顯示內容所需時間 (FCP)」是指瀏覽器顯示 DOM 初始內容 (例如文字或圖片) 的時間。
互動時間 (TTI)：可評估網頁經過多久時間，才能完全互動並穩定回應使用者輸入內容。這項指標可用來追蹤網頁，瞭解是否有任何途徑 (例如按下連結、按鈕、輸入或使用表單元素) 能夠與網頁互動。
規則型指標 И
Lighthouse 和 WebPageTest 會根據一般最佳做法規則計算效能分數，您可以做為準則使用。Lighthouse 還會提供簡易最佳化提示。
追蹤數量及以使用者為中心的成效指標，可以獲得最佳成效。專注於專案初期階段的資產大小，並盡快開始追蹤 FCP 和 TTI。
建立基準
要實際瞭解哪種做法最適合您的網站，唯一的方法就是試用它，請仔細研究並測試您的發現。請分析競爭情況，瞭解您與競爭對手的表現。🕵️
如果您沒有時間，可以參考以下這些預設數字：
- 5 秒內互動準備時間
- 小於 170 KB 的重要路徑資源 (壓縮/壓縮)
這些數據是根據實際基準裝置和 3G 網路速度計算而得。現今超過一半的網際網路流量是在行動網路上發生，因此您應以 3G 網路速度做為起點。
預算範例
建議你為自家網站上不同類型的網頁編列預算，因為內容各有不同。例如：
- 我們的產品頁面在行動裝置上傳輸的 JavaScript 必須小於 170 KB
- 我們的搜尋網頁在電腦版上的圖片必須小於 2 MB
- Moto G4 手機在使用緩慢 3G 網路時，必須在 5 秒內載入首頁並進行互動
- 我們的網誌必須在 Lighthouse 效能稽核中獲得 80 分以上
為建構程序新增效能預算
要選擇合適的工具，將主要取決於專案的規模，以及您可以投入工作的資源。有幾個開放原始碼工具可協助您為建構程序分配預算：
如果資料超過定義的門檻，您可以採取下列其中一種做法：
- 將現有功能或資產最佳化 🛠?️
- 移除現有功能或資產 🗑?️
- 不新增新功能或資產 ✋⛔
追蹤成效
確認網站速度夠快，就意味著在初次推出後，您必須持續評估網站成效。您可以持續監控這些指標，並從實際使用者取得資料，顯示成效變化對主要業務指標有何影響。
總結
效能預算的用意，是確保將重心放在整個專案的整體成效上，並盡早設定，以免之後無法回頭追蹤。這些只是有助您找出需要在網站上加入哪些內容的參考依據。主要目的是設定目標，在不影響功能或使用者體驗的情況下兼顧效能。🎯?
下一份指南將引導您透過幾個簡單步驟，定義第一筆成效預算。