Web Vitals

發布日期:2020 年 5 月 4 日

提供最佳化的使用者體驗品質,是任何網站長久獲得出色成效的關鍵。無論您是業主、行銷人員或開發人員,網站使用體驗指標都能協助您量化網站體驗,並找出改善之道。

Web Vitals 是 Google 推動的一項計畫,旨在針對不可或缺的品質信號提供統合一致的指南,協助發布商打造出色的網頁使用者體驗。

多年以來,Google 提供多種工具來評估及回報成效。有些開發人員擅長使用這些工具,但其他人則發現,由於工具和指標眾多,因此難以跟上腳步。

網站擁有者不必是成效專家,也能瞭解他們為使用者提供的體驗品質。網站體驗核心指標計畫旨在簡化整體環境,協助網站專注於最重要的指標,也就是網站體驗核心指標

Core Web Vitals

Core Web Vitals 是 Web Vitals 的其中一部分,適用於所有的網頁,所有網站擁有者都應評估這項指標,且會顯示在所有 Google 工具中。每個 Core Web Vitals 都代表使用者體驗的獨特面向,可在實地測試中進行評估,並反映出關鍵以使用者為中心結果的實際體驗。

構成 Core Web Vitals 的指標會隨著時間演進。目前的設定著重於使用者體驗的三個面向:載入互動性視覺穩定性,並包含下列指標 (以及各自的門檻):

最大內容繪製閾值建議 Interaction to Next Paint 門檻建議 累計版面配置位移門檻建議

為確保多數使用者都能達到這些指標的建議目標,建議您以網頁載入的第 75 個百分位數做為評估門檻,並區分行動裝置和電腦裝置。

評估 Core Web Vitals 符合性時,如果網頁在三項 Core Web Vitals 指標的 75 百分位數達到建議目標,則視為通過。

生命週期

Core Web Vitals 追蹤功能的指標會經歷三個階段:實驗、待定和穩定。

Core Web Vitals 指標的三個生命週期階段,以一系列三角形圖示呈現。從左到右依序為「實驗」、「待定」和「穩定版」。
Core Web Vitals 生命週期階段。

每個階段都會向開發人員傳達如何看待各項指標:

  • 實驗指標是未來的 Core Web Vitals,可能會根據測試和社群意見進行重大變更。
  • 待定指標是指未來的 Core Web Vitals,已通過測試和意見回饋階段,且已明確定義穩定版推出時間。
  • 穩定指標是 Chrome 認為提供優質使用者體驗不可或缺的 Core Web Vitals 指標。

Core Web Vitals 的生命週期如下:

實驗功能

指標剛開發完成並進入生態系統時,會被視為實驗指標

實驗階段的目的是評估指標的適合度,首先要探索要解決的問題,並可能重複處理先前指標未能解決的問題。舉例來說,Interaction to Next Paint (INP) 最初是做為實驗指標開發,比First Input Delay (FID) 更能全面解決網站的執行階段效能問題。

Core Web Vitals 生命週期中的實驗階段,也旨在透過找出錯誤,甚至探索初始定義的變更,讓指標開發過程更具彈性。這也是社群回饋最關鍵的階段。

待處理

當 Chrome 團隊判定實驗指標已收到足夠的意見回饋,且已證明其效用時,就會將其設為待定指標。舉例來說,在 2023 年,我們將 INP 從實驗功能升級為待定功能,最終目的是淘汰 FID。

待處理的指標會保留在這個階段至少六個月,讓生態系統有時間進行調整。隨著越來越多開發人員開始使用這項指標,社群意見仍是這個階段的重要環節。

穩定

網站體驗核心指標候選指標定案後,就會成為穩定指標。這時指標就能成為 Core Web Vitals。

我們會積極支援穩定的指標,並視情況修正錯誤和變更定義。穩定的 Core Web Vitals 指標每年最多只能變更一次。我們會在指標的官方說明文件和變更記錄中,清楚說明 Core Web Vitals 的任何變更。所有評估項目都會納入網站體驗核心指標。

評估及回報 Core Web Vitals 的工具

Google 認為,Core Web Vitals 對所有網頁體驗至關重要。因此,我們致力於在所有熱門工具中顯示這些指標。下文將詳細說明哪些工具支援 Core Web Vitals。

用於評估網站體驗核心指標的實地工具

Chrome 使用者體驗報告會針對每項 Core Web Vital 收集去識別化實際使用者評估資料。有了這項資料,網站擁有者就能快速評估成效,而無須手動在網頁上加入分析工具,這項資料也能為 Chrome DevToolsPageSpeed Insights 和 Search Console 的 Core Web Vitals 報告等工具提供支援。

  LCP INP CLS
Chrome 使用者體驗報告
Chrome 開發人員工具
PageSpeed Insights
Search Console (Core Web Vitals 報表)

Chrome 使用者體驗報告提供的資料可快速評估網站效能,但不會提供詳細的每個網頁檢視量測資料,而這類資料通常是準確診斷、監控及快速回應回歸問題的必要條件。因此,我們強烈建議網站自行設定實際使用者監控功能。

使用 JavaScript 評估 Core Web Vitals

每項 Core Web Vitals 都可以使用標準網路 API 在 JavaScript 中評估。

評估所有網站使用體驗核心指標最簡單的方法,就是使用 web-vitals JavaScript 程式庫,這是一個可直接用於實際環境的簡易包裝函式,可在評估每項指標時,準確對應先前列出的所有 Google 工具的回報方式。

使用 web-vitals 程式庫,您可以透過呼叫單一函式來評估每個指標。如需完整的用法API 詳細資料,請參閱說明文件。

import {onCLS, onINP, 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);
onINP
(sendToAnalytics);
onLCP
(sendToAnalytics);

設定網站使用 web-vitals 程式庫,以便評估網站使用體驗核心指標資料並傳送至 Analytics 端點後,下一步就是匯總資料並製作報表,瞭解至少 75% 的網頁瀏覽量是否符合建議門檻。

雖然部分數據分析供應商已內建網站使用體驗核心指標的支援功能,但即使是未內建基本自訂指標功能的供應商,也應該能在工具中評估網站使用體驗核心指標。

如果開發人員偏好直接使用基礎網頁 API 來評估這些指標,可以參考下列指標指南,瞭解實作詳細資訊:

如需有關使用熱門分析服務或自家數據分析工具評估這些指標的其他指引,請參閱「在實務中評估網站使用體驗指標的最佳做法」。

用於評估網站體驗核心指標的實驗室工具

雖然所有 Core Web Vitals 指標都是以實地指標為優先,但許多指標也可以在實驗室中評估。

實驗室測量是測試功能效能的最佳方式,可在功能發布給使用者前進行測試。這也是在效能迴歸發生前,捕捉迴歸的最佳方法。

您可以使用下列工具,在實驗室環境中評估 Core Web Vitals:

  LCP INP CLS
Chrome 開發人員工具
Lighthouse (改用 TBT)

雖然實驗室測試對於提供優質體驗至關重要,但無法取代實地測試。

網站的效能會因使用者的裝置功能、網路狀況、裝置上執行的其他程序,以及使用者與網頁互動的方式而有顯著差異。事實上,每個 Core Web Vitals 指標的分數都可能受到使用者互動影響。只有實地測試才能準確掌握全貌。

改善分數的建議

以下指南提供針對每項 Core Web Vitals 的最佳化建議,協助您改善網頁:

改善 Core Web Vitals 的方法有很多種,每種方法在每種情況下對影響、相關性和易用性所造成的影響程度也不同。請參閱「改善 Core Web Vitals 最有效的方法」,瞭解 Chrome 團隊提供的最佳建議。

其他網站體驗指標

雖然 Core Web Vitals 是瞭解及提供優質使用者體驗的重要指標,但還有其他輔助指標。

這些其他指標可做為代理指標,或做為三項 Core Web Vitals 的輔助指標,協助擷取更完整的使用體驗,或協助診斷特定問題。

舉例來說,首次位元組回應時間 (TTFB)首次顯示內容所需時間 (FCP) 都是載入體驗的重要面向,可用於診斷 LCP 問題 (分別為 伺服器回應時間轉譯阻斷資源)。

同樣地,總阻斷時間 (TBT) 這類實驗室指標,對於找出並診斷可能影響 INP 的潛在互動性問題,也非常重要。不過,這項指標不屬於 Core Web Vitals 一組,因為它們無法在實地測量,也不反映以使用者為中心的結果。

網站體驗指標異動

網站使用體驗核心指標和網站使用體驗指標,是目前開發人員用來評估網站使用者體驗品質的最佳信號,但這些信號並非完美無缺,未來可能會進行改善或新增。

網站使用體驗核心指標與所有網頁相關,並在相關的 Google 工具中顯示。這些指標的變更會帶來廣泛影響,因此開發人員應預期網站使用體驗核心指標的定義和門檻會保持穩定,且更新會事先發布通知,並遵循可預測的年度週期。

其他 Web Vitals 通常是特定情境或工具專屬,且可能比 Core Web Vitals 更偏向實驗性質。因此,相關定義和門檻可能會更頻繁地變更。

對於所有 Web Vitals,我們會在這個公開的變更記錄中清楚記錄變更。