成效是使用者體驗中重要的一環，而且會影響業務指標。您可能會誤以為，成為優秀的開發人員，最終會出現效能卓越的網站，但事實上，出色的效能通常不會有副作用。就像做其他事情一樣，為了達到目標，您必須清楚定義。設定效能預算即可開始使用。
定義
效能預算是針對影響網站效能的指標所設下的一組限制。可能的值包括網頁總大小、在行動網路中載入所需的時間，甚至是送出的 HTTP 要求數量。設定預算有助於展開網站成效對話。可做為設計、技術和新增功能的決策依據。
事先設定預算，設計人員即可思考高解析度圖片的效果，以及挑選的網路字型數量。也能協助開發人員比較不同問題的做法，並根據規模和比較成本評估架構和程式庫。
選擇指標
以數量為基礎的指標 ⚖️
這些指標在開發初期階段很有用，可突顯出加入大量圖片和指令碼的影響。也能輕鬆與設計人員和開發人員溝通。
我們剛才已提過，您可以在效能預算中加入幾個項目 (例如網頁權重和 HTTP 要求數量)，不過您可以拆分成更精細的限制，例如：
- 圖片大小上限
- 網路字型數量上限
- 指令碼大小上限 (含架構)
- 外部資源 (例如第三方指令碼) 總數
然而，這些數據並未讓您深入瞭解使用者體驗。視要求資源的順序而定，如果兩個網頁的要求數量或權重相同，兩者的呈現順序可能有所不同。如果某個網頁上有某個重要資源 (例如主頁橫幅或樣式表) 延遲載入，使用者將等待更久的時間，看到實用且覺得網頁較慢的網頁。如果其他網頁上最重要的部分載入速度很快，網頁可能就不一定會注意到網頁的其他部分。
因此，請務必追蹤其他類型的指標。
里程碑時機 ⇒️
里程碑時間代表網頁載入期間發生的事件，例如 DOMContentLoaded 或 load 事件。最實用的時機是以使用者為中心的成效指標，可以讓你瞭解網頁載入體驗。這些指標可透過瀏覽器 API 和 Lighthouse 報表查看。
「First Contentful Paint (FCP)」會衡量瀏覽器顯示 DOM 開頭的內容 (例如文字或圖片) 的時機。
互動準備時間 (TTI) 會評估網頁轉為完整互動且可靠回應使用者所需花費的時間。如果您預期網頁上發生任何類型的使用者互動 (例如按下連結、按鈕、輸入或使用表單元素)，就很適合追蹤一項非常重要的指標。
規則式指標 ÷
Lighthouse 和 WebPageTest 根據一般最佳做法規則計算效能分數，可做為指引。Lighthouse 還提供一些簡單的最佳化提示。
如果您同時追蹤以數量和以使用者為中心的成效指標，就能獲得最佳成效。著重於專案初期的資產大小，立即開始追蹤 FCP 和 TTI。
建立基準
真正知道哪種方式對網站最有助益，唯一的辦法就是親自研究，並測試結果。分析競爭情形，瞭解您與競爭對手的差距。🕵️
如果您目前沒有時間，建議參考下列預設數字，幫助您快速上手：
- 互動準備時間不到 5 秒
- 小於 170 KB 的重要路徑資源 (壓縮/壓縮)
這些「數字」的計算依據為實際基準裝置和 3G 網路速度。目前超過一半的網際網路流量是透過行動網路進行，因此一開始建議您以 3G 網路速度為基準。
預算範例
你應該針對網站上不同類型的網頁設定預算，因為內容因內容而異。例如：
- 我們的產品頁面在行動裝置上傳送的 JavaScript 必須小於 170 KB
- 電腦版搜尋頁面的圖片必須少於 2 MB
- 使用 Moto G4 手機時，我們的首頁必須以 5 秒以下的速度載入及互動
- 我們網誌上的 Lighthouse 效能稽核分數必須超過 80
在建構程序中加入效能預算
請根據您的專案規模，以及可投入工作的資源來選擇合適的工具。以下幾個開放原始碼工具可協助您在建構過程中增加預算：
如果項目超過指定門檻，您可以採取下列其中一種做法：
- 最佳化現有功能或資產 🛠?️
- 移除現有功能或資產 🗑?️
- 不新增功能或素材資源 ✋⛔
追蹤成效
確保網站速度夠快意味著在初次啟用後，您必須持續進行評估。監控這些指標的變化，並從實際使用者取得資料，瞭解成效變化對重要業務指標的影響。
總結
效能預算的用意是確保您在整個專案執行期間全力提高成效並提早設定，避免日後無法追溯。方便您瞭解網站上要包含哪些內容。這主意是設定目標，讓您在不影響功能或使用者體驗的情況下，取得更好的平衡。🎯?
下一份指南會透過幾個簡單步驟，引導您設定第一筆成效預算。