改善使用者體驗的品質,是任何網站長期成功的關鍵。無論您是業主、行銷人員或開發人員,Web Vitals 都可協助您量化網站的使用體驗,並找出改進空間。
總覽
「網站體驗指標」是 Google 推出的一項計畫,旨在提供品質信號的整合式指引,協助您提供優質的網路使用者體驗。
Google 多年來提供了許多工具來測量效能及產生報表。有些開發人員擅長使用這些工具,其他開發人員則認為這些工具和指標的數量相當難以跟上腳步。
網站擁有者不一定要是成效專家,來瞭解為使用者帶來的體驗品質。網站體驗指標計畫的用意是簡化整體流程,協助網站著重在網站體驗核心指標最重視的指標。
Core Web Vitals
網站體驗核心指標是網站體驗核心指標的其中一種,適用於所有網頁,且應由所有網站擁有者評估,且會顯示在所有 Google 工具中。每個網站體驗核心指標都代表使用者體驗的不同面向,可實際進行評估,並反映以使用者為中心的重要結果實際體驗。
網站體驗核心指標的構成指標會隨時間改變。目前 2020 年的內容著重於使用者體驗的三個面向:載入、互動與視覺穩定性,並包含下列指標 (及其各自的門檻):
- 最大內容繪製 (LCP):會測量載入效能。為了提供良好的使用者體驗,LCP 應在頁面初次開始載入後的 2.5 秒內執行。
- 首次輸入延遲時間 (FID):評估互動。為了提供良好的使用者體驗,頁面 FID 應為 100 毫秒以下。
- 累計版面配置位移 (CLS):評估視覺化內容的穩定性。為了提供良好的使用者體驗,頁面應將 CLS 維持為 0.1. 以下。
對上述各項指標而言,為了確保您能在大多數使用者達到建議的目標,評估的門檻是網頁載入的第 75 個百分位數 (在行動裝置和電腦裝置間劃分)。
評估網站體驗核心指標法規遵循的工具應考慮網頁是否符合上述三項指標的第 75 個百分位數建議目標。
生命週期
網站體驗核心指標報告的生命週期包括三個階段:實驗階段、待處理和穩定版。
下表列出所有網站體驗核心指標目前的生命週期:
每個階段的設計目的是向開發人員表明各項指標的看法:
- 實驗性指標是網站體驗核心指標的潛在評分,但根據測試結果和社群意見回饋,我們可能仍會進行重大變更。
- 待處理指標是指通過測試和意見回饋階段的未來網站體驗核心指標,並有明確定義的時間表成為穩定版。
- 穩定版指標是 Chrome 目前將網頁體驗核心指標視為良好使用者體驗的重要指標。
實驗功能
當最初開發的指標進入生態系統時,這項指標會視為實驗指標。
實驗階段的目的在於評估指標的健康狀況,先探索問題解決方式,或者反覆試驗以往可能無法解決哪些指標。舉例來說,「與下一個顯示的內容互動」(INP) 最初開發為實驗功能指標,可以幫助您解決網站上出現的執行階段效能問題,比「首次輸入延遲時間 (FID)」更全面。
網站體驗核心指標生命週期的實驗階段也的目的是找出錯誤,甚至探索其初始定義,藉此保持指標開發的彈性。這也是社群意見回饋最重要的階段。
待處理
如果 Chrome 團隊判定某個實驗指標收到足夠的意見回饋,並證明其效能,就會成為待處理指標。在此階段中,待處理的指標保留時間至少為六個月,這是為了讓生態系統有足夠時間適應。指標超出待處理階段的唯一障礙,就是等待轉換期結束。隨著越來越多開發人員開始使用這項指標,社群意見回饋仍是這個階段的重要一環。
穩定
網站體驗核心指標的候選指標最終完成後,就會成為穩定指標,對於「網站體驗核心指標」追蹤中的指標而言,這項指標會變成「網站體驗核心指標」。
系統積極支援穩定的指標,且可能會進行修正錯誤及定義異動。穩定的網站體驗核心指標指標每年不會變更超過一次。凡是對 Core Web Vitals 做出的變更,都會在指標的官方說明文件和指標的 CHANGELOG 中清楚傳達。網站體驗核心指標也會納入任何評估作業中。
評估及回報網站體驗核心指標的工具
Google 認為網站體驗核心指標對所有網頁體驗至關重要。因此,我們會努力在「所有常用工具」中提供這些指標。以下各節將詳細說明哪些工具支援網站體驗核心指標。
評估網站體驗核心指標的工具
Chrome 使用者體驗報告會收集每個 Core Web Vitals 的匿名使用者評估資料。網站擁有者可以運用這項資料快速評估網站效能,不必要求他們手動檢測網頁上的效能,同時也支援 PageSpeed Insights 等工具,以及 Search Console 的網站體驗核心指標報告。
LCP | FID | CLS | |
Chrome 使用者體驗報告 | ✔ | ✔ | ✔ |
PageSpeed Insights | ✔ | ✔ | ✔ |
Search Console (網站體驗核心指標報告) | ✔ | ✔ | ✔ |
Chrome 使用者體驗報告提供的資料可讓您快速評估網站效能,但並未提供詳細的逐頁檢視遙測資料,以便準確診斷、監控和快速回應迴歸問題。因此,我們強烈建議您為網站設定自己的即時使用者監控功能。
使用 JavaScript 評估網站體驗核心指標
每個網站體驗核心指標都可以使用標準網頁 API 以 JavaScript 進行評估。
要評估所有網站體驗核心指標,最簡單的方法就是使用 Web-Vitals 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 | |
---|---|---|---|
網路體驗 | ✔ | ✔ | ✔ |
網站體驗指標擴充功能 | ✔ | ✔ | ✔ |
或者,如果開發人員想直接透過基礎網路 API 評估這些指標,請參閱這些指標指南,瞭解實作詳情:
評估網站體驗核心指標的研究室工具
雖然網站體驗核心指標全都是網站體驗核心指標的首要指標,但也大部分都能在研究室中評估。
研究室評估是測試功能在開發期間效能的最佳方式,也就是尚未向使用者發布的功能。也是在發生效能迴歸現象前處理的最佳方法。
在研究室環境中,您可以使用下列工具評估網站體驗核心指標:
LCP | FID | CLS | |
---|---|---|---|
Chrome 開發人員工具 | ✔ | ✘ (請改用 TBT) | ✔ |
Lighthouse | ✔ | ✘ (請改用 TBT) | ✔ |
雖然實驗室測量是提供良好體驗的重要環節,但依然無法取代現場測量。
根據使用者的裝置功能、網路狀況、裝置上執行的其他程序,以及使用者與網頁互動的方式,網站效能可能會有所不同。事實上,每個網站體驗核心指標指標的分數都會受到使用者互動的影響。只有實地測量才能準確捕捉完整畫面。
提高分數的建議
評估網站體驗核心指標並找出可改進之處後,下一步就是進行最佳化。下列指南提供具體建議,協助您針對每個網站體驗核心指標最佳化網頁:
其他網站體驗指標
雖然網站體驗核心指標是瞭解及提供優質使用者體驗的重要指標,但還有其他重要指標。
其他網站體驗指標通常會做為網站體驗核心指標的 Proxy 或補充指標,協助擷取整體體驗或協助診斷特定問題。
舉例來說,第一個位元組時間 (TTFB) 和首次顯示內容所需時間 (FCP) 這兩項指標都是載入體驗的重要面向,可用於診斷 LCP 問題 (分別有助於診斷較低的伺服器回應時間或轉譯封鎖資源)。
同樣地,總封鎖時間 (TBT) 和互動準備時間 (TTI) 等指標是非常重要的研究室指標,有助於找出及診斷會影響 FID 的潛在互動問題。不過,這類指標並不屬於「網站體驗核心指標」組合的一部分,因為這類指標無法進行欄位評估,也不會反映以使用者為中心的結果。
改進網站體驗指標
網站體驗核心指標和網站體驗核心指標代表現今評估網站體驗品質時可用的最佳信號,但這些信號仍有不盡完善之處,且應預期日後改善或添加。
網站體驗核心指標與所有網頁相關,而且會在各種相關 Google 工具中顯示。變更這些指標都會達到廣泛的影響,因此,開發人員應預期 Core Web Vitals 的定義和門檻都穩定下來,且更新項目可事先通知,並提供可預測的年度頻率。
其他網站體驗指標通常是具體的結構定義或工具,且可能比網站體驗核心指標更進行實驗。因此其定義和門檻可能會隨著頻率提高而改變。
對於所有網站體驗指標,我們會在這個公開 CHANGELOG 中清楚記錄變更。