本頁面由 Cloud Translation API 翻譯而成。

您的第一筆成效預算

Milica Mihajlija

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

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

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

初步分析

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

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

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

Chrome 開發人員工具中的 Lighthouse 面板

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

Doggos.com 的電腦分析
電腦	FCP	文字轉語音
首頁	1,680 毫秒	5,550 毫秒
搜尋結果網頁	2,060 毫秒	6,690 毫秒

Doggos.com 的行動分析
行動裝置	FCP	文字轉語音
首頁	1,800 毫秒	6,150 毫秒
搜尋結果網頁	1,100 毫秒	7,870 毫秒

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

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

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

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

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

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

讓 Doggos.com 領先業界的效能預算
測量	目前時間	預算 (比競爭程度快 20%)
FCP	1,800 毫秒	704 毫秒
文字轉語音	6,500 毫秒	2,520 毫秒

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

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

修訂 Doggos.com 效能預算
測量	目前時間	初始預算 (比目前時間快 20%)	長期目標 (比競爭速度快 20%)
FCP	1,800 毫秒	1,440 毫秒	704 毫秒
文字轉語音	6,500 毫秒	5,200 毫秒	2,520 毫秒

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

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

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

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

網路	裝置	JS	圖片	CSS	HTML	字型	總計	互動預算所需時間
慢速 3G	Moto G4	100	30	10	10	20	約 170 KB	慢
慢速 4G	Moto G4	200	50	35	30	30	約 345 KB	3 秒
WiFi	電腦	300	250	50	50	100	約 750 KB	2 秒

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

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

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

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

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

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

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

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