Web Vitals

盡可能提升使用者體驗,是任何網站都能獲得長期成功的關鍵。無論您是業主、行銷人員或開發人員,網站體驗指標都能協助您量化網站體驗,並找出改善之道。

總覽

「網站體驗指標」是 Google 推出的一項計畫,旨在針對提供優質網路使用者體驗的重要品質信號提供整合式指引。

多年來,Google 提供了多種工具來評估成效和製作相關報表。有些開發人員是這些工具的專家,有些開發人員則發現,要採用的工具和指標非常困難。

網站擁有者不一定要是成效專家,才能瞭解自己為使用者提供的體驗品質。Web Vitals 計畫的用意是簡化網站體驗,協助網站專注於最重要的指標,也就是網站體驗核心指標

Core Web Vitals

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

我們會逐步調整,納入網站體驗核心指標的組成指標。目前 2020 年的重點是著重於使用者體驗的三個方面:載入互動視覺穩定性,並包含下列指標 (及個別門檻):

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

為確保大部分使用者都能達到這些指標的建議目標,評估的門檻是網頁載入速度的 75 個百分位數 (以行動裝置和電腦區分)。

用來評估網站體驗核心指標法規遵循的工具,如果網頁在 Core Web Vitals 指標的第 75 個百分位數的建議目標,應視為通過網頁通過檢查。

生命週期

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

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

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

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

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

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

實驗功能

當指標最初開發完畢並進入生態系統時,就會視為一個實驗指標

實驗階段的目的在於評估指標的健身狀況,首先要找出問題解決方式,然後反覆測試先前指標可能無法解決的問題。舉例來說,「與下一個繪製畫面互動」(INP) 是我們最初開發的實驗性指標,可以比首次輸入延遲時間 (FID) 更全面地解決網路上的執行階段效能問題。

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

待處理

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

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

穩定

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

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

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

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

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

Chrome 使用者體驗報告會針對各個 Core Web Vitals 收集去識別化的實際使用者評估資料。有了這項資料,網站擁有者不必手動檢測網頁數據分析工具,即可迅速評估成效。此外,還能支援 PageSpeed Insights 等工具,以及 Search Console 的網站體驗核心指標報告

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

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

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

每個網站體驗核心指標都可以透過標準網頁 API 使用 JavaScript 進行評估。

評估所有網站體驗核心指標最簡單的方法,就是使用 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 程式庫評估網站體驗核心指標資料並傳送至數據分析端點後,下一步就是匯總並記錄該資料,看看網頁是否達到 75% 網頁造訪次數的建議門檻。

雖然部分數據分析供應商內建網站體驗核心指標指標的支援,但即使是不包含基本自訂指標功能,也能透過工具評估網站體驗核心指標的功能。

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

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

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

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

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

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

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

雖然所有網站體驗核心指標都是第一要務,但其中許多指標都可以在研究室中評估。

在功能開發期間,研究室評估是最有效的方式,在應用程式向使用者發布前進行測試。如要事先找出效能迴歸問題,這是最好的方法。

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

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

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

網站的效能可能因為使用者的裝置功能、網路狀況、裝置上可能執行的其他程序,以及使用者與網頁的互動方式,而出現大幅度的差異。事實上,網站體驗核心指標的每項指標都會受使用者互動影響。只有欄位測量才能準確捕捉整個畫面。

提高分數的建議

以下指南針對各個網站體驗核心指標,提供改善網頁成效的具體建議:

其他網站體驗指標

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

其他指標可做為替代指標,或做為三個網站體驗核心指標的補充指標,有助於擷取更大部分體驗,或協助診斷特定問題。

舉例來說,第一個位元組時間 (TTFB)首次顯示內容所需時間 (FCP) 指標都是載入體驗的重要部分,在診斷 LCP 問題時 (兩者分別具有伺服器回應時間緩慢轉譯阻斷資源) 這兩項指標。

同樣地,總封鎖時間 (TBT) 這類指標也是研究室指標,能有效找出並診斷可能影響 INP 的互動問題。但不屬於 Core Web Vitals 組合,因為這類項目不可欄位評估,也不是以使用者為中心的結果。

網站體驗指標變更

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

網站體驗核心指標適用於所有網頁,以及相關的 Google 工具。變更這些指標將會影響廣泛的影響,例如,開發人員應能預期網站體驗核心指標的定義和門檻保持穩定,並更新提前告知且每年可預測的更新頻率。

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

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