Web Vitals

Google 推出了 Web Vitals 計畫,目的在於提供有關網頁品質信號的統合指南,這些信號對於提供優質網路使用者體驗至關重要。目的是簡化各種可用的效能測量工具,並協助網站擁有者專注於最重要的指標:Core Web Vitals

Core Web Vitals

「網站體驗核心指標」是網站體驗核心指標的一部分,適用於所有網頁,應由所有網站擁有者進行評估,並顯示在所有 Google 工具中。 Core Web Vitals 中的每項指標都代表使用者體驗的不同面向,而且可以實際進行評估,反映一項以使用者為中心的重要結果。

網站體驗核心指標的組成指標會隨著時間演變。目前組合著重於使用者體驗的三個方面:載入互動視覺穩定性。其中包括下列指標:

最大內容繪製門檻建議 「與下一個顯示項目門檻」建議的互動 累計版面配置位移門檻建議

針對這些指標,為了確保您能達到大部分使用者的建議目標,測量的門檻是網頁載入速度的第 75 個百分位數,在行動裝置和電腦裝置上劃分。

用來評估網站體驗核心指標法規遵循的工具,如果網頁在這三項指標的第 75 個百分位數的建議目標符合建議目標,則應將網頁視為符合標準。

生命週期

網站體驗核心指標測試群組中的指標會經過三個階段的生命週期:實驗、待處理和穩定版。

網站體驗核心指標的三個生命週期階段,以一系列三種 V 形圖示呈現。由左至右分為實驗階段、待處理和穩定版。
網站體驗核心指標生命週期的階段。

每個階段都設計為向開發人員說明各項指標的思考方式:

  • 實驗功能指標是網站體驗核心指標的未來發展趨勢,根據測試結果和社群的意見回饋,這些指標仍可能經過大幅調整。
  • 待處理指標是未來 Core Web Vitals 指標,已經過測試和意見回饋階段,且已製定明確的時間表,成為穩定版。
  • 穩定的指標是 Chrome 目前認定為良好使用者體驗所需的一組網站體驗核心指標。

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

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

實驗功能版

當指標最初開發到進入生態系統時,就會視為一個「實驗指標」

實驗階段的目的是評估指標的健身情況,首先是探索待解決的問題,然後反覆思考先前指標可能無法解決的哪些問題。舉例來說,INP 最初是在 2022 年推出的實驗功能指標,比首次輸入延遲時間 (FID) 更全面,能夠解決網站執行階段的效能問題。

網站體驗核心指標生命週期的實驗階段,也是為了在指標開發方面提供彈性,例如找出錯誤,甚至是探索變更初始定義。同時也是社群意見回饋的最重要階段

待處理

如果 Chrome 團隊判定實驗性指標收到足夠的意見回饋,並證明其效用,就會成為「待處理指標」。舉例來說,2023 年,INP 從實驗性質提升為待處理狀態,並最終會淘汰 FID。

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

穩定

「Core Web Vitals」候選指標確定完成後,就會成為穩定指標。正因為如此,這項指標才能成為 Core Web Vitals 指標。

系統主動支援穩定版指標,並可能受到錯誤修正和定義變更影響。穩定的網站體驗核心指標指標每年不會變更超過一次。Core Web Vitals 的任何變更,都會在指標的正式說明文件和指標的變更記錄中明確傳達。Core Web Vitals 也納入所有評估作業中。

穩定的指標不一定是永久性的。穩定的指標可以淘汰,並替換為其他可更有效解決問題的指標。而 INP 在 2024 年成為穩定的 Core Web Vitals 指標,這正是 FID 所發生的情況。

評估及回報網站體驗核心指標

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

用於評估網站體驗核心指標的現場工具

Chrome 使用者體驗報告會收集各個 Core Web Vitals 的去識別化實際使用者評估資料。這項資料可讓網站擁有者快速評估成效,而無須手動設定網頁分析。此外,還能支援 PageSpeed Insights 和 Search Console 的網站體驗核心指標報告等工具。

  LCP INP CLS
Chrome 使用者體驗報告
PageSpeed Insights
Search Console (網站體驗核心指標報告)

雖然 Chrome 使用者體驗報告提供的資料可讓您快速評估網站效能,但無法提供詳盡的每頁瀏覽遙測資料,精確地診斷、監控及快速回應迴歸問題。因此,我們強烈建議網站自行設定使用者監控功能。

在 JavaScript 中評估網站體驗核心指標

每個網站體驗核心指標都可以在 JavaScript 中使用標準 Web API 進行評估。

如要評估所有網站體驗核心指標,最簡單的方法是使用 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);

設定網站使用網站體驗程式庫,評估網站體驗核心指標資料並傳送至數據分析端點後,下一步就是匯總這些資料並製作報表,看看網頁是否達到至少 75% 網頁造訪的建議門檻。

雖然部分數據分析供應商內建網站體驗核心指標指標的支援功能,即使是不需要提供基本自訂指標功能,也能在自家工具中評估 Core Web Vitals 的指標也一樣。

網站體驗指標報表就是其中一個例子,可讓網站擁有者使用 Google Analytics (分析) 評估網站體驗核心指標。如要瞭解如何使用其他分析工具評估網站體驗核心指標,請參閱在實際運作環境評估網站體驗指標的最佳做法

您也可以使用網站體驗指標 Chrome 擴充功能,為每個網站體驗核心指標製作報表,無須編寫任何程式碼。這項擴充功能會使用 web-vitals 程式庫評估每個指標,並在使用者瀏覽網頁時向他們顯示。

這項擴充功能有助於瞭解自家網站、競爭對手網站以及整個網路的成效。

  LCP INP CLS
網路功能
網站體驗指標擴充功能

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

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

評估網站體驗核心指標的研究室工具

雖然所有網站體驗核心指標都是基本指標,但其中很多指標也可以在研究室中可評估。

研究室評估是在開發期間測試功能效能的最佳方式。如要事先找出效能迴歸問題,這是最好的方法。

下列工具可用於在研究室環境中評估網站體驗核心指標:

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

像 Lighthouse 這類工具在模擬環境中在使用者沒有輸入內容的情況下載入頁面,就無法評估 INP。然而,總封鎖時間 (TBT) 指標是可評估的,對於可能因為在啟動期間主執行緒上爭用的 INP 問題,這種替代方式是可以接受的。改善研究室中 TBT 的效能,應能改善實際環境中的 INP。如需詳細指引,請參閱「改善分數的建議」。

雖然測量實驗室是提供優質體驗的重要環節,但還是無法取代現場測量。網站效能可能因使用者的裝置功能、網路狀況、裝置上執行的其他程序,以及使用者與網頁的互動方式,而出現大幅差異。事實上,網站體驗核心指標每項指標的分數都會受使用者互動影響。只有欄位測量能準確捕捉全貌。

提高分數的建議

以下指南針對各個網站體驗核心指標,提供將網頁最佳化的具體建議:

其他網站體驗指標

雖然網站體驗核心指標是瞭解及改善使用者體驗的關鍵指標,但還有其他重要指標。

這些其他網站體驗指標通常會做為 Core Web Vitals 的 Proxy 或補充指標,有助於擷取更多體驗部分,或是協助診斷特定問題。

舉例來說,第一個位元組時間 (TTFB)首次顯示內容繪製 (FCP) 都是載入體驗的重要部分,兩者都有助於診斷 LCP 的問題 (伺服器回應時間較短會封鎖資源)。

同樣地,總封鎖時間 (TBT) 這類指標是重要的研究室指標,可用於找出及診斷可能影響 INP 的潛在互動問題。不過,這不是 Core Web Vitals 組合的一部分,因為無法進行欄位評估,也無法反映以使用者為中心的成果。

網站體驗指標變更

網站體驗指標和網站體驗核心指標,代表開發人員在評估網站體驗品質時,目前可用的最合適信號,但這些信號並非完美,未來仍應有改善或新增項目。

網站體驗核心指標不僅與所有網頁相關,也會在相關的 Google 工具中顯示。由於這些指標的變更會造成廣泛的影響,開發人員應預期 Core Web Vitals 的定義和門檻保持穩定,以及事先通知和可預測的更新時間表。

其他網站體驗指標通常是針對情境或工具,可能比網站體驗核心指標更加實驗。因此,這些值的定義和門檻可能會隨頻率變更而改變。

所有網站體驗指標變更都會記錄在這份公開變更記錄中。