Web Vitals

發布日期:2020 年 5 月 4 日,上次更新日期:2024 年 10 月 31 日

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

總覽

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

多年來,Google 提供許多工具來評估及回報效能。部分開發人員是這些工具的使用專家,但也有人發現工具和指標數量龐大,難以掌握。

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

Core Web Vitals

Core Web Vitals 是 Web Vitals 的子集,適用於所有網頁,所有網站擁有者都應進行測量,並且會顯示在所有 Google 工具中。每個 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 認為對優質使用者體驗至關重要的一組網站使用體驗核心指標。

網站體驗核心指標目前處於下列生命週期階段:

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

實驗功能

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

實驗階段的目的是評估指標的適用性,首先要探索待解決的問題,並可能疊代先前指標無法解決的問題。舉例來說,與下一個顯示的內容互動 (INP) 最初是做為實驗性指標開發,目的是比首次輸入延遲 (FID) 更全面地解決網路上出現的執行階段效能問題。

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

待處理

當 Chrome 團隊判定實驗指標已收到足夠意見回饋,且證明有效,就會成為待定指標。舉例來說,INP 在 2023 年從實驗指標升級為待定指標,最終目標是淘汰 FID。

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

穩定

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

系統會積極支援穩定指標,並可能修正錯誤及變更定義。穩定 Core Web Vitals 指標每年最多只會變更一次。Core Web Vitals 如有任何變更,系統會在指標的官方文件和變更記錄中清楚說明。評估作業也會納入 Core Web Vitals。

評估及回報 Core Web Vitals 的工具

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

評估 Core Web Vitals 的欄位工具

Chrome 使用者體驗報告會收集每項網站使用體驗核心指標的匿名實際使用者評估資料。網站擁有者不必在網頁上進行手動分析,就能透過這項資料快速評估成效,並使用 Chrome 開發人員工具PageSpeed Insights 和 Search Console 的網站使用體驗核心指標報告

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

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

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

您可以使用標準 Web 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 程式庫,評估網站使用體驗核心指標並將資料傳送至 Analytics 端點後,下一步就是匯總及產生資料報表,瞭解網頁是否在至少 75% 的網頁造訪次數中,達到建議的門檻。

雖然部分 Analytics 服務供應商內建支援 Core Web Vitals 指標,但即使沒有,也應包含基本自訂指標功能,讓您在工具中評估 Core Web Vitals。

如果開發人員偏好使用基礎網頁 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

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

這些其他指標可做為三項網站使用體驗核心指標的替代指標或補充指標,有助於掌握更全面的體驗,或診斷特定問題。

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

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

網站體驗指標異動

Web Vitals 和 Core Web Vitals 是目前最適合開發人員用來評估網路體驗品質的信號,但這些信號並非完美,未來可能會有所改善或新增。

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

其他網站指標通常與特定情境或工具相關,且可能比網站體驗核心指標更具實驗性質,因此定義和門檻可能會更頻繁地變動。

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