Web Vitals

發布日期:2020 年 5 月 4 日

盡量提升使用者體驗品質,是任何網站常保良好成效的關鍵。無論您是業主、行銷人員或開發人員,Web Vitals 都能協助您量化網站體驗,並找出改善之道。

總覽

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

多年來,Google 提供許多工具來評估及回報成效。有些開發人員是這些工具的使用專家,但也有人覺得工具和指標太多,難以掌握。

網站擁有者不必是效能專家,也能瞭解自己為使用者提供的體驗品質。網站體驗核心指標計畫旨在簡化這個領域,協助網站專注於最重要的指標,也就是網站體驗核心指標

Core Web Vitals

網站體驗核心指標是網頁指標的子集,適用於所有網頁,所有網站擁有者都應進行測量,並且會顯示在所有 Google 工具中。每個 Core Web Vitals 都代表一個獨特的使用者體驗環節,可在實際環境中量測,並反映出使用者實際在瀏覽網站時的感受,是重要的以使用者為中心的指標。

構成 Core Web Vitals 的各項指標會隨著時間不斷演變。目前資料集著重於載入速度、互動性和視覺穩定性這三個使用者體驗面向,並包括以下指標 (及其各自的閾值):

Largest Contentful Paint 門檻建議 Interaction to Next Paint 門檻建議 Cumulative Layout Shift 門檻建議

為確保你能為多數使用者提供這些指標的建議值,建議以頁面載入的第 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:穩定版

實驗功能

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

實驗階段的目的是評估指標的適用性,首先要探索待解決的問題,並可能疊代先前指標無法解決的問題。舉例來說,Interaction to Next Paint (INP) 最初是做為實驗性指標開發,目的是比First Input Delay (FID) 更全面地解決網路上出現的執行階段效能問題。

Core Web Vitals 生命週期的實驗階段,也旨在透過找出錯誤,甚至是探索對初始定義的變更,為指標的開發提供彈性。這個階段的社群意見回饋也最為重要。

待處理

Chrome 團隊判斷實驗指標已收到足夠意見回饋,且證明有效後,就會將其設為待處理指標。舉例來說,INP 在 2023 年從實驗階段升級為待處理狀態,最終目標是淘汰 FID。

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

穩定

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

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

評估及回報 Core Web Vitals 的工具

Google 認為 Core Web Vitals 對所有網路體驗至關重要。因此,Google 致力於在所有熱門工具中顯示這些指標。以下各節將詳細說明哪些工具支援網站使用體驗核心指標。

評估 Core Web Vitals 的欄位工具

Chrome 使用者體驗報告會收集每個 Core Web Vitals 的去識別化實際使用者評估資料。網站擁有者不必在網頁上手動設定分析工具,就能透過這項資料快速評估網站效能,並使用 Chrome 開發人員工具PageSpeed Insights 和 Search Console 的Core Web Vitals 報告

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

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

使用 JavaScript 評估網站體驗核心指標

您可以使用標準網頁 API,在 JavaScript 中評估各項網站體驗核心指標。

如要輕鬆評估所有 Core Web Vitals,最簡單的方法是使用 web-vitals JavaScript 程式庫。這個程式庫是基礎網頁 API 的小型包裝函式,可供正式環境使用,評估各項指標時,會準確比對先前列出的所有 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 程式庫,評估 Core Web Vitals 並將資料傳送至 Analytics 端點後,下一步就是匯總及回報資料,瞭解網頁是否在至少 75% 的網頁造訪次數中達到建議門檻。

雖然部分 Analytics 供應商內建網站使用體驗核心指標支援功能,但即使沒有,也應包含基本自訂指標功能,讓您在工具中評估網站使用體驗核心指標。

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

如需更多指引,瞭解如何使用熱門的數據分析服務或自家分析工具評估這些指標,請參閱評估實際工作環境中的 Web Vitals 最佳做法

評估 Core Web Vitals 的研究室工具

所有 Core Web Vitals 首先都是現場指標,但其中許多指標也能在實驗室中評估。

在開發期間,也就是功能發布給使用者前,實驗室測量是測試功能效能的最佳方式。這也是預先發現效能迴歸的最佳方法。

您可以使用下列工具,在實驗室環境中評估網站使用體驗核心指標:

  LCP INP CLS
Chrome 開發人員工具
燈塔 (請改用 TBT)

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

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

提高分數的建議

下列指南提供具體建議,說明如何針對各項 Core Web Vitals 最佳化網頁:

改善 Core Web Vitals 的方法有很多種,每種方法在不同情況下,影響程度、相關性和易用性都不盡相同。如需 Chrome 團隊的建議清單,請參閱「提升 Core Web Vitals 指標的最佳做法」。

其他 Web Vitals

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

這些其他指標可做為 Core Web Vitals 的替代指標或補充指標,有助於掌握更全面的體驗,或診斷特定問題。

舉例來說,「首次待命時間 (TTFB)」和「首次顯示內容所需時間 (FCP)」都是「載入」體驗的重要層面,有助於診斷 LCP 問題 (分別是「伺服器回應時間緩慢」或「阻礙轉譯的資源」)。

同樣地,總阻塞時間 (TBT) 等實驗室指標對於找出及診斷可能影響 INP 的互動性問題至關重要。不過,這些指標無法在實際環境中測量,也不會反映以使用者為中心的結果,因此不屬於 Core Web Vitals。

網站體驗指標異動

Web Vitals 和 Core Web Vitals 是目前開發人員可用的最佳信號,有助於評估網路上的體驗品質,但這些信號並不完美,未來可望進一步改善或新增。

Core Web Vitals適用於所有網頁,並會顯示在相關的 Google 工具中。這些指標的變更影響範圍廣泛,因此開發人員應預期網站使用體驗核心指標的定義和門檻會保持穩定,且更新會事先通知,並以可預測的年度週期進行。

其他 Web Vitals 通常與特定情境或工具相關,且可能比 Core Web Vitals 更具實驗性質。因此,這些指標的定義和門檻可能會更頻繁地變動。

所有 Web Vitals 的變更都會清楚記錄在公開的CHANGELOG中。