Web Vitals

Philip Walton

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

總覽

「網站體驗指標」是 Google 推出的一項計畫，旨在針對提供良好網路使用者體驗的關鍵品質信號提供統一的指引。

多年來，Google 提供了多項工具來評估成效及製作相關報表，有些開發人員是運用這些工具的專家，有些則認為，要跟上一樣的工具和指標卻相當難以跟上腳步。

網站擁有者不必是成效專家，也能瞭解為使用者提供的體驗品質。Web Vitals 計畫的目標是簡化整體環境，並協助網站聚焦於Core Web Vitals 最重要的指標。

Core Web Vitals

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

構成 Core Web Vitals 的指標會隨著時間逐漸演進。目前的組合著重於使用者體驗的三個層面：載入、互動性和視覺穩定性，包括下列指標 (以及各自的門檻)：

• Largest Contentful Paint (LCP)：評估載入效能。為提供良好的使用者體驗，LCP 應在網頁首次開始載入後的 2.5 秒內完成。
• 與下一個顯示的內容互動 (INP)：評估互動指標。為提供良好的使用者體驗，網頁的 INP 值不得超過 200 毫秒。
• 累計版面配置位移 (CLS)：測量視覺穩定性。為了提供良好的使用者體驗，網頁的 CLS 應維持在 0.1. 以下。

為確保您能在大多數使用者的這些指標中達到建議目標，理想的評估門檻是網頁載入的第 75 個百分位數，並在行動裝置和電腦上區隔資料。

凡是網站體驗核心指標，評估 Core Web Vitals 表現的工具，只要網頁在第 75 個百分位數的 Core Web Vitals 指標數據達到建議目標，就應視為通過網頁傳遞。

注意：如要進一步瞭解這些建議的研究和方法，請參閱「定義 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 團隊判定某項實驗指標已收到充分的意見回饋，且效果證明無誤後，就會成為待處理指標。舉例來說，INP 於 2023 年從實驗狀態升級為待處理狀態，最終會淘汰 FID。

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

穩定

Core Web Vitals 候選指標完成後，就會成為穩定版指標。從這個指標可以成為 Core Web Vitals 的指標。

系統主動支援穩定指標，且可能會修正錯誤和定義定義。穩定版的 Core Web Vitals 指標每年不會變更一次。如對 Core Web Vitals 進行任何變更，都會在指標的官方說明文件和指標的變更記錄中清楚告知。所有評估作業都會納入 Core Web Vitals。

重點：穩定指標不一定有永久性。您可以淘汰穩定指標，並用其他能更有效解決問題的指標來取代指標。正因為 INP 在 2024 年成為 Core Web Vitals 指標，因此 FID 剛好遇到 FID 的情況。

評估和回報 Core Web Vitals 的工具

Google 認為 Core Web Vitals 對所有網頁體驗至關重要。因此，我們會努力在所有熱門工具中呈現這些指標。以下各節將詳細說明支援 Core Web Vitals 的工具。

用於評估 Core Web Vitals 的實務工具

Chrome 使用者體驗報告會收集各個 Core Web Vitals 的匿名使用者評估資料。這項資料可協助網站擁有者快速評估成效，而不必要求他們手動檢測網頁分析，並為 PageSpeed Insights 和 Search Console Core Web Vitals 報告等工具提供技術支援。

	LCP	INP	CLS
Chrome 使用者體驗報告
PageSpeed Insights
Search Console (Core Web Vitals 報告)

注意：如需瞭解這些工具的使用方式，以及哪種工具適合您的用途，請參閱「開始評估網站體驗指標」。

「Chrome 使用者體驗報告」提供的資料可讓您快速評估網站效能，但無法提供詳細的逐頁檢視遙測資料，這通常無法正確診斷、監控和快速應對迴歸問題。因此，我們強烈建議網站自行設定使用者監控。

使用 JavaScript 評估 Core Web Vitals

每個 Core Web Vitals 指標都可以使用標準網路 API 以 JavaScript 進行評估。

注意：請注意，以 JavaScript 為基礎的 Core Web Vitals 指標，可能與 CrUX 回報的 Core Web Vitals 指標不同。詳情請參閱這些資料來源之間的差異。

如要評估所有 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 資料傳送給分析端點後，下一步就是彙整網站體驗報告並產生報告，查看您的網頁是否符合網頁造訪次數至少 75% 的建議門檻。

雖然部分數據分析供應商內建支援 Core Web Vitals 指標，即使不應該提供基本自訂指標功能，也能讓您透過工具評估 Core Web Vitals。

舉例來說，網站體驗指標報表就是其中一例。這項工具可讓網站擁有者使用 Google Analytics 評估網站體驗核心指標。如需使用其他分析工具評估 Core Web Vitals 的指南，請參閱「實際評估網站體驗指標的最佳做法」。

您也可以使用網頁體驗 Chrome 擴充功能，針對各個 Core Web Vitals 製作報表，無須編寫任何程式碼。這個擴充功能使用 web-vitals 程式庫評估每個指標，並在使用者瀏覽網頁時顯示。

方便您瞭解自家網站、競爭對手網站和整個網路的成效。

	LCP	INP	CLS
web-vitals
網站體驗指標擴充功能

如果開發人員偏好使用基礎 Web API 直接評估這些指標，可改用下列指標指南取得實作詳細資料：

• 在 JavaScript 中評估 LCP
• 在 JavaScript 中評估 INP
• 在 JavaScript 中評估 CLS

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

評估 Core Web Vitals 的研究室工具

雖然所有 Core Web Vitals 指標都是最主要的實際指標，但其中有許多指標也能在本研究室中評估。

研究室評估功能是在開發期間測試各項功能效能的最佳方式，也就是尚未向使用者發布的功能。這也是在效能迴歸發生前及早發現的最佳做法。

下列工具可用於在研究室環境中評估 Core Web Vitals：

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

注意：Lighthouse 等工具會在模擬環境中載入網頁，但使用者無需輸入內容，因此無法評估 INP。不過，「總封鎖時間」(TBT) 指標僅開放研究室評估，是 INP 的替代指標。採行效能最佳化措施，改善研究室中的 INP 品質 (請參閱下方的效能建議)。

雖然實驗室評估是提供優質體驗的重要一環，但並不能取代現場測量。

網站效能可能會因裝置功能、網路狀況、裝置上可能執行的其他程序，以及使用者與網頁互動的方式，有很大的差異。事實上，每個 Core Web Vitals 指標的分數都可能會受到使用者互動的影響。只有測量欄位才能準確捕捉完整情況。

有助於改善分數的建議

以下指南針對 Core Web Vitals 提供具體建議，協助您瞭解如何最佳化網頁：

• 將 LCP 最佳化
• 將 INP 最佳化
• 將 CLS 最佳化

其他網站體驗指標

雖然 Core Web Vitals 是有助於瞭解和提供良好使用者體驗的關鍵指標，但還有更多輔助指標可供參考。

其他指標可以做為替代指標 (或是三個 Core Web Vitals 的補充指標)，協助擷取更大部份的使用體驗，或協助診斷特定問題。

例如，首次位元組時間 (TTFB) 和首次內容繪製時間 (FCP) 都是載入體驗的重要面向，可用於診斷 LCP 問題 (伺服器回應時間過慢或轉譯阻斷資源)。

同樣地，總封鎖時間 (TBT) 等指標是一項研究室指標，可用來找出及診斷可能影響 INP 的潛在互動問題。不過，由於這項指標並非欄位式評估，也不是反映以使用者為中心的結果，因此不屬於 Core Web Vitals 組合的一部分。

網站體驗指標異動

網站體驗核心指標和 Core Web Vitals 是目前開發人員在評估網頁體驗品質時，目前可用的理想信號，但這些信號並非完美無缺，日後仍應持續改進或新增內容。

網站體驗核心指標與所有網頁息息相關，且會在相關 Google 工具中呈現。調整這些指標會造成廣泛的影響；因此，開發人員應預期 Core Web Vitals 的定義和門檻值要保持穩定，開發人員必須事先通知，並預測每年的發布頻率。

其他 Web Vitals 通常是具體的背景資訊或工具，而且可能比 Core Web Vitals 更在實驗階段。因此，這些字詞的定義和門檻可能會隨著頻率提高。

我們會在這個公開的 CHANGELOG 中明確記錄所有網站體驗指標的異動。