您的第一筆成效預算

Milica Mihajlija
Milica Mihajlija

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

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

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

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

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

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

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

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

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

競爭分析

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

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

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

Google 使用相關的關鍵字搜尋的螢幕截圖

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

重要時程預算

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

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

網站/首頁 FCP 文字轉語音
goggles.com 880 毫秒 3,150 毫秒
Doggos.com 1,800 毫秒 6,500 毫秒
quackquackgo.com 2,680 毫秒 4,740 毫秒
ding.xyz 2,420 毫秒 7,040 毫秒
Doggos.com 在 3G 網路中的競爭分析
電腦上的小狗
Doggos.com 的 FCP 指標表現良好,但在 TTI 中嚴重落後

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

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

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

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

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

合併不同的指標

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

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

以數量為依據指標的預算

無論您預計的網頁總量為何,請試試傳送小於 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 使用者體驗報告資訊主頁,瞭解目標對像在競爭對手網站上的行為。

Chrome 使用者體驗報告的裝置分佈資料
Chrome 使用者體驗報告的裝置分佈資料

後續步驟

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