您的第一筆成效預算

Milica Mihajlija

當您設定個人、企業或家庭預算時，須設定花費上限，並確保未超出預算。效能預算的運作方式相同，但適用於會影響網站成效的指標。

確立並強制執行效能預算可確保網站盡快顯示。如此不但能提供訪客更佳體驗，還能為業務指標帶來正面影響。

以下是透過幾個簡單步驟定義第一筆成效預算的方式：

初步分析

如果想要改善現有網站的效能，請先找出最重要的網頁。(例如使用者流量最多的網頁或產品到達網頁)。

找出主要網頁後，接著就可以進行分析。首先，我們會將重點放在最能評估使用者體驗階段的時間里程碑。

您可以在 Chrome 開發人員工具的「稽核」面板下方找到「Lighthouse」。對訪客視窗中的每個頁面執行稽核，記錄以下兩次：

• 首次顯示內容所需時間 (FCP)
• 互動準備時間 (TTI)

以 Doggos.com 這個高度專業的搜尋引擎為例。Doggos.com 的目標是為網際網路上所有與狗狗相關的內容建立索引，其中最重要的網頁就是首頁和結果頁面。以下是網站在電腦和行動裝置上評估的 FCP 和 TTI 號碼。

競爭分析

分析完自己的網站後，就可以開始分析競爭對手的網站。比較類似網站的結果，是評估效能預算的好方法。無論您正在處理已經建立的專案，還是從頭開始建立專案，這個步驟都很重要。您的競爭力勝過競爭對手，您就會獲得競爭優勢。

如果您不確定要查看哪些網站，可以試試下列工具：

1. Google 搜尋的「相關:」關鍵字
2. Alexa 的類似網站功能
3. SimilarWeb

為現實情況，建議您試著找出 10 個左右的競爭對手。

重要時程預算

在本例中，我們的小眾搜尋引擎與少數競爭對手相輔相成，因此致力最佳化行動裝置的首頁。現今超過一半的網際網路流量是透過行動網路，預設使用手機號碼，不僅對行動裝置使用者有益，也能吸引電腦使用者。

建立包含所有類似網站的 FCP 和 TTI 時間圖表，並主打速度最快。您可以運用這類圖表，更加瞭解自家網站與競爭對手的表現。

有改善空間，20% 法則有良好規範。研究顯示，如果使用者回應次數超過 20%，表示回應時間出現差異。也就是說，當您想要比最佳網站更顯眼，至少要有 20%，

如果您正在嘗試改善現有網站，而目標可能難以達成。但這並不代表你得放棄。一開始先從小步著手，並將預算設為比目前速度快 20%。並持續進行最佳化。

Doggos.com 修改後的預算看起來可能像這樣。

合併不同的指標

穩固的成效預算結合了不同類型的指標。我們已針對里程碑時間編列預算，現在在組合中增加兩個

• 以數量為依據的指標
• 規則型指標

以數量為依據指標的預算

無論您預計的網頁總量為何，請試試傳送小於 170 KB 的重要路徑資源 (壓縮/壓縮)。如此一來，即使價格低廉的裝置和 3G 速度緩慢，網站速度仍能更快。

你可以針對電腦版 YouTube 服務支付較高的預算，但可別用心。根據去年的 HTTP 封存檔資料，電腦版和行動版的網頁重量中位數超過 1MB。要獲得出色的網站成效，您必須把目標設定在低於這些中位數的目標之間。

以下列舉幾個採用 TTI 預算的例子：

根據數量指標定義預算並不容易。電子商務網站提供大量產品相片，與新聞入口網站主要 (大多為文字) 截然不同。如果你的網站上有廣告或數據分析，可增加 JavaScript 的數量。

請先參閱上表，並根據要使用的內容類型進行調整。定義網頁要包含的內容、檢視您的研究，並根據個別素材資源大小做出明智的猜測。舉例來說，如果您要建置的網站含有大量圖片，建議您對 JS 設有更嚴格的限制。

擁有運作正常的網站後，請查看以使用者為中心的成效指標，並調整預算。

規則型指標的預算

有效的規則式指標是 Lighthouse 分數。Lighthouse 應用程式分為 5 個類別，其中一個是效能。成效分數是根據 5 種不同的指標計算而得，包括首次顯示內容所需時間和互動時間。

嘗試建立優質的網站時，請將 Lighthouse 效能分數預算設為至少 85 (滿分 100)。使用 Lighthouse CI 對提取要求強制執行。

安排優先次序

想想你預期網站的互動程度。如果是新聞網站，使用者的主要目標是閱讀內容，因此應專注於加快轉譯速度，同時維持低 FCP 的水準。Doggos.com 訪客希望盡快按下相關連結，因此第一順位是較低的 TTI。

因此，請找出透過行動裝置和行動裝置的使用者，確實找出哪些訪客瀏覽網站，並據此決定優先順序。找出方法就是透過 Chrome 使用者體驗報告資訊主頁，瞭解目標對像在競爭對手網站上的行為。

後續步驟

確認整個專案都會強制執行效能預算，並將該預算納入建構程序。