網站使用體驗指標

沃爾頓 (Philip Walton)
Philip Walton

改善使用者體驗的品質是網站所有網站常保良好成效的關鍵。無論您是業主、行銷人員或開發人員,Web Vitals 都可協助您量化網站體驗,並找出改進空間。

總覽

網站體驗指標是 Google 推出的一項計畫,旨在針對網站提供優質使用者體驗的重要信號提供統整指南。

Google 多年來提供多項效能評估和報告工具。有些開發人員是使用這些工具的專家,有些則認為,要跟上他們一樣,必須面對大量工具和指標並不容易。

網站擁有者不應該是效能專家,來瞭解為使用者提供的體驗品質。網站體驗指標計畫旨在簡化整體流程,協助網站著重於網站體驗核心指標最重要的指標。

Core Web Vitals

網站體驗核心指標是適用於所有網頁的網站體驗核心指標,應由所有網站擁有者評估,且會顯示在所有 Google 工具中。 每個網站體驗核心指標都代表使用者體驗的獨特面向,而且可在實際領域進行評估,反映「以使用者為中心」的重要結果。

構成網站體驗核心指標的指標會隨著時間改進。2020 年目前的設定重點放在使用者體驗的三個面向:載入互動視覺穩定性,其中包括下列指標 (及其各自的門檻):

最大內容繪製門檻建議 首次輸入延遲時間門檻建議 累計版面配置位移門檻建議
  • 最大內容繪製 (LCP):評估「載入」效能。為了提供優質的使用者體驗,LCP 應在頁面首次開始載入後的 2.5 秒內發生。
  • 首次輸入延遲時間 (FID):測量互動值。為了提供良好的使用者體驗,網頁的 FID 值應為 100 毫秒以下。
  • 累計版面配置位移 (CLS):評估視覺化內容的穩定性。為了提供良好的使用者體驗,頁面應將 CLS 值維持在 0.1. 或更低。

針對上述每個指標,確保您為大多數使用者達到建議的目標,評估良好的門檻是網頁載入時間的第 75 個百分位數,並按行動裝置和電腦裝置區分。

評估網站體驗核心指標報告內容的工具,如果網頁符合以上三項指標的建議目標,即符合第 75 個百分位數的建議目標。

生命週期

網站體驗核心指標測試群組指標的生命週期包含三個階段:實驗、待處理和穩定版。

網站體驗核心指標的三個生命週期階段,以一系列三個 V 形標記的方式呈現。從左到右依序是實驗階段、待處理和穩定版。

下表列出所有網站體驗核心指標目前在生命週期中的位置:

實驗功能 待處理 穩定版
  INP LCP
CLS
FID

設計每個階段的目的,都是讓開發人員知道如何看待各項指標:

  • 實驗指標是網站體驗核心指標的潛在指標,可能仍會根據測試結果和社群意見回饋進行重大變更。
  • 待處理指標是指日後通過測試和意見回饋階段,且有明確定義時程的穩定指標,屬於未來的網站體驗核心指標。
  • 穩定版指標是 Chrome 認為網站體驗核心指標的一組重要指標,能夠提供優質使用者體驗。

實驗功能

當最初開發指標並開始進入生態系統後,該指標就會被視為實驗指標

實驗階段的目的是評估指標的健身狀況,首先研究待解決的問題,然後可能與之前的指標無法解決重複的問題。舉例來說,「與下期互動 (INP) 的互動」一開始是實驗指標,相較於首次輸入延遲時間 (FID),要更全面地解決網路上存在的執行階段效能問題。

網站體驗核心指標生命週期的實驗階段,也意味著找出錯誤,甚至探索初始定義的異動,讓指標開發過程更有彈性。這個階段也最重視社群意見回饋。

待處理

如果 Chrome 團隊判定實驗指標已收到足夠的意見回饋,且效果也確實有效,該指標就會變成待處理指標。待處理指標會在這個階段保留至少六個月,以便生態系統適應。等待期後指標的進展的唯一解決辦法是等待轉換期。隨著越來越多開發人員開始使用這項指標,社群意見回饋在這個階段仍會相當重要。

穩定

經過「Core Web Vitals」候選指標後,該指標會變成穩定指標,針對 Web Vitals 測試群組中的指標,這項指標會變成網站體驗核心指標。

系統主動支援穩定指標,且可能修正錯誤及變更定義。每年不會有一次穩定的網站體驗核心指標指標變化。任何關於 Core Web Vitals 的變更,都會在相關指標的官方說明文件和指標的 CHANGELOG 中清楚說明。網站體驗核心指標也會納入任何評估。

評估及回報網站體驗核心指標的工具

Google 相信網站體驗核心指標對所有網站體驗來說至關重要。因此,我們的目標是在所有熱門工具中顯示這些指標。以下各節將詳細說明哪些工具支援網站體驗核心指標。

評估網站體驗核心指標的欄位工具

Chrome 使用者體驗報告會針對各個 Core Web Vitals 收集去識別化的實際使用者評估資料。有了這些資料,網站擁有者不必在自家網頁上手動檢測數據分析,也能快速評估網站效能,並提供 PageSpeed Insights 等工具,以及 Search Console 的網站體驗核心指標報告

Chrome 使用者體驗報告提供的資料可讓您快速評估網站的效能,但無法提供詳細的各網頁瀏覽遙測資料,通常用於準確診斷、監控及快速回應迴歸問題。因此,我們極力建議網站自行設定使用者的即時監控功能。

評估 JavaScript 的網站體驗核心指標

每個網站體驗核心指標,都可以使用標準網頁 API 以 JavaScript 進行評估。

如要評估所有網站體驗核心指標,最簡單的方法是使用 Web-Vitals JavaScript 程式庫。這個 JavaScript 程式庫是可用於實際工作環境的小型網頁 API,且能以準確符合上述所有 Google 工具回報指標的方式評估每項指標。

使用 web-vitals 程式庫,評估每項指標就跟呼叫單一函式一樣簡單 (請參閱完整用法API 詳細說明):

import {onCLS, onFID, onLCP} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
    fetch('/analytics', {body, method: 'POST', keepalive: true});
}

onCLS(sendToAnalytics);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);

設定網站並使用 web-Vitals 程式庫後,您就能測量網站體驗核心指標資料,並將資料傳送至分析端點。接著,系統會匯總這些資料並製作相關報表,查看網頁是否達到至少 75% 網頁造訪的建議門檻。

雖然部分分析服務供應商已內建支援網站體驗核心指標指標的功能,即使不應包含基本自訂指標功能,也支援在他們的工具中評估網站體驗核心指標。

舉例來說,網站體驗指標報表就是一個例子,網站擁有者可以使用 Google Analytics (分析) 評估網站體驗核心指標。想瞭解如何使用其他分析工具評估網站體驗核心指標,請參閱「實際評估網站體驗指標的最佳做法」一文。

您也可以使用網站體驗指標 Chrome 擴充功能,針對各個網站體驗核心指標製作報表,而不必編寫任何程式碼。這項擴充功能使用 web-Vitals 程式庫評估每項指標,並在使用者瀏覽網路時向他們顯示。

這項擴充功能有助於瞭解自家網站、競爭對手網站和大型網路的成效。

  LCP FID CLS
網站 SDK
網站體驗指標擴充功能

或者,如果開發人員偏好直接透過基礎網路 API 評估這些指標,請參考下列指標指南,瞭解實作詳細資料:

評估網站體驗核心指標的研究室工具

雖然所有網站體驗核心指標都是主要指標,最重要的是現場指標,但有許多指標都可以在研究室中評估。

在功能向使用者發布前,研究室評估是測試功能在開發期間效能的最佳方法。這是預先處理效能迴歸問題的最佳方法。

下列工具可用於在研究室環境中評估網站體驗核心指標:

  LCP FID CLS
Chrome 開發人員工具 ✘ (請改用 TBT)
Lighthouse ✘ (請改用 TBT)

雖然實驗室評估是提供優質體驗的重要環節,但還是無法取代現場評估。

網站的效能可能會因為使用者的裝置功能、網路狀況、裝置上可能執行的其他程序,以及與網頁互動的方式而異。事實上,每項網站體驗核心指標的分數,都可能會受到使用者互動影響。只有現場評估可以準確掌握全貌。

改善分數的建議

評估網站體驗核心指標並找出有待改進之處後,下一步就是進行最佳化。以下指南提供幾項專屬建議,有助您瞭解如何針對各個網站體驗核心指標最佳化網頁:

其他網站體驗指標

雖然網站體驗核心指標是瞭解及提供優質使用者體驗的重要指標,但還有其他重要指標。

這些網站體驗指標通常可做為網站體驗核心指標的 Proxy 或補充指標,協助擷取更豐富的體驗,或協助診斷特定問題。

舉例來說,第一個位元組時間 (TTFB)首次顯示內容所需時間 (FCP) 指標都是載入體驗的重要面向,而且能用來診斷 LCP 的問題 (伺服器回應時間偏低,或是轉譯封鎖資源)。

同樣地,總封鎖時間 (TBT)互動時間 (TTI) 等指標是擷取及診斷影響 FID 的潛在互動問題的重要研究室指標。但這些結果不屬於網站體驗核心指標組合,因為這些元素無法欄位評估,也不會反映以使用者為中心的結果。

持續改善網站體驗指標

網站體驗指標和網站體驗核心指標代表開發人員目前在評估網路體驗品質時所提供的最佳信號,但這些信號並非完美無缺,未來應該也會有所改善。

網站體驗核心指標與所有網頁相關,並在相關 Google 工具中主打。變更這些指標將影響深遠,因此開發人員應預期 Core Web Vitals 的定義和門檻應保持穩定,且只要事先通知並告知每年的更新頻率即可。

其他網站體驗指標通常特定情境或工具,且可能比網站體驗核心指標更深入的實驗。因此,其定義和門檻可能會隨著頻率增加而變動。

針對所有網站體驗指標,變更會在這個公開的 CHANGELOG 中清楚記錄。