Web Vitals

發布日期:2020 年 5 月 4 日

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

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

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

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

Core Web Vitals

Core 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 的生命週期如下:

  • LCP:穩定版
  • CLS:穩定
  • INP:穩定版

實驗功能

當指標最初開發並加入生態系統時,系統就會將其視為實驗指標

實驗階段的目的是評估指標的適合度,首先要探索要解決的問題,並可能重複處理先前指標未能解決的問題。舉例來說,與首次輸入延遲時間 (FID) 相比,「與下一個顯示的內容互動 (INP)」最初是實驗性指標,以便解決網路上呈現的執行階段效能問題。

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 Vitals 的匿名使用者評估資料。有了這項資料,網站擁有者就能快速評估成效,而無須手動在網頁上加入分析工具,這項資料也能為 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,我們會在這個公開的變更記錄中清楚記錄變更。