[轉帖]基礎一：健康網站的關鍵指標有哪些？

https://heapdump.cn/monographic/detail/21/4093881

Web 指標是 Google 開創的一項新計劃，旨在為網路質量訊號提供統一指導，這些訊號對於提供出色的網路使用者體驗至關重要。

多年來，Google 提供了許多效能測量和效能報告工具。一些開發者對這些工具的使用十分在行，而另一些開發者則發現大量的工具和指標令人應接不暇。

網站所有者要想了解他們提供給使用者的體驗質量，並非需要成為效能專家。 Web 指標計劃旨在簡化場景，幫助網站專注於最重要的指標，即核心 Web 指標 。

核心 Web 指標 #

核心 Web 指標是適用於所有網頁的 Web 指標子集，每位網站所有者都應該測量這些指標，並且這些指標還將顯示在所有 Google 工具中。每項核心 Web 指標代表使用者體驗的一個不同方面，能夠進行實際測量，並且反映出以使用者為中心的關鍵結果的真實體驗。

核心 Web 指標的構成指標會隨著時間的推移而發展 。當前針對 2020 年的指標構成側重於使用者體驗的三個方面——載入效能、互動性和視覺穩定性——幷包括以下指標（及各指標相應的閾值）：

• Largest Contentful Paint (LCP) ：最大內容繪製，測量載入效能。為了提供良好的使用者體驗，LCP 應在頁面首次開始載入後的2.5 秒內發生。
• First Input Delay (FID) ：首次輸入延遲，測量互動性。為了提供良好的使用者體驗，頁面的 FID 應為100 毫秒或更短。
• Cumulative Layout Shift (CLS) ：累積佈局偏移，測量視覺穩定性。為了提供良好的使用者體驗，頁面的 CLS 應保持在 0.1. 或更少。

為了確保您能夠在大部分使用者的訪問期間達成建議目標值，對於上述每項指標，一個良好的測量閾值為頁面載入的第 75 個百分位數，且該閾值同時適用於移動和桌面裝置。

如果一個頁面滿足上述全部三項指標建議目標值的第 75 個百分位數，那麼評估核心 Web 指標合規性的工具應評判該頁面為透過。

要想詳細瞭解這些建議值背後的研究和方**，請參閱：定義核心 Web 指標的指標閾值

測量和報告核心 Web 指標的工具 #

核心 Web 指標對一切網路體驗都至關重要，以下部分詳細介紹了支援核心 Web 指標的工具。

核心 Web 指標的實測工具 #

Chrome 使用者體驗報告為每項核心 Web 指標收集匿名的真實使用者測量資料。這些資料既能使網站所有者快速進行效能評估，而無需在頁面上進行手動檢測分析，也能同時為PageSpeed Insights 網頁速度測量工具和搜尋控制檯的核心 Web 指標報告等工具提供支援。

	LCP	FID	CLS
Chrome 使用者體驗報告	✔	✔	✔
PageSpeed Insights 網頁速度測量工具	✔	✔	✔
搜尋控制檯（核心 Web 指標報告）	✔	✔	✔

關於這些工具的使用方法以及適合您用例的工具選擇指南，請參閱：測量 Web 指標入門指南

Chrome 使用者體驗報告提供的資料帶來了一種快速評估網站效能的方法，但這些資料沒有提供詳細的、對應每頁瀏覽量的遙測資料，而這些通常是對迴歸進行準確診斷、監控，以及做出迅速反應的必要資料。因此，我們強烈建議網站搭建自己的真實使用者監控。

在 JavaScript 中測量核心 Web 指標 #

每項核心 Web 指標都可以透過使用標準網頁 API 在 JavaScript 中進行測量。

測量所有核心 Web 指標，最簡單的方法是使用web-vitals JavaScript 庫，這是一個圍繞底層網頁 API 的小型的、生產就緒的封裝器，透過準確匹配每項指標在上方列出的所有 Google 工具中的報告方式來進行指標測量。

透過使用web-vitals庫，測量每項指標就像呼叫單個函式一樣簡單（有關完整用法和API詳情，請參閱文件）：

import {getCLS, getFID, getLCP} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/****ytics', body)) ||
      fetch('/****ytics', {body, method: 'POST', keepalive: true});
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

當您將網站配置為使用web-vitals庫來測量您的核心 Web 指標資料並將其傳送到分析端後，下一步是對資料進行彙總和報告，從而檢視您的頁面是否在至少 75% 的頁面訪問中都滿足建議閾值。

一些分析工具供應商已經內建了核心 Web 指標支援，但即使是那些沒有內建支援的供應商也應該包含基本的自定義指標功能，讓您能夠使用他們的工具來測量核心 Web 指標。

Web 指標報告就是其中一個例子，它使網站所有者能夠使用 Google 分析來測量他們的核心 Web 指標。瞭解使用其他分析工具測量核心 Web 指標的相關指南，請參閱實測 Web 指標的最佳實踐。

您還可以使用Web 指標 Chrome 擴充套件程式來報告每項核心 Web 指標，且無需編寫任何程式碼。該擴充套件程式使用web-vitals庫來測量每一項指標，並在使用者瀏覽網頁時呈現給使用者。

此擴充套件程式有助於您瞭解自己的網站、競爭對手的網站和整個網路的效能。

	LCP	FID	CLS
web-vitals	✔	✔	✔
Web 指標擴充套件程式	✔	✔	✔

此外，傾向於直接透過底層網頁 API 來測量這些指標的開發者可以參考這些指標指南，從而瞭解執行詳情：

• 在 JavaScript 中測量 LCP
• 在 JavaScript 中測量 FID
• 在 JavaScript 中測量 CLS

關於如何使用熱門分析服務（或您自己的內部分析工具）來測量這些指標的更多指導，請參閱：實測 Web 指標的最佳實踐

核心 Web 指標的實驗室測量工具 #

雖然所有的核心 Web 指標首先都是實測指標，但其中的許多指標也可以在實驗室中進行測量。

實驗室測量是在開發過程中（功能釋出給使用者之前）測試功能效能的最佳方式，也是在效能迴歸發生之前及時捕獲的最佳方式。

以下工具可用於在實驗室環境中測量核心 Web 指標：

	LCP	FID	CLS
Chrome 開發者工具	✔	✘（使用 TBT 代替）	✔
燈塔	✔	✘（使用 TBT 代替）	✔

燈塔這類在沒有使用者的模擬環境中載入頁面的工具無法測量 FID（沒有使用者輸入）。但是，Total Blocking Time 總阻塞時間 (TBT) 指標不僅可以進行實驗室測量，而且還是 FID 的出色代理。在實驗室中改進 TBT 的效能最佳化應該能夠改進實際的 FID（請參閱下方的效能建議）。

雖然實驗室測量對於提供出色的體驗至關重要，但它不能替代實際測量。

根據使用者裝置功能、網路狀況、裝置上可能正在執行的其他程序以及與頁面互動方式的差別，網站效能也可能會有很大差異。事實上，每項核心 Web 指標的得分都會受到使用者互動的影響。只有透過實際測量才能準確獲取全貌。

提高分數的建議 #

當您測量了核心 Web 指標並確定了需要改進的領域後，下一步就是最佳化。以下指南提供瞭如何針對每項核心 Web 指標最佳化頁面的具體建議：

• 最佳化 LCP
• 最佳化 FID
• 最佳化 CLS

其他 Web 指標 #

雖然核心 Web 指標是理解並提供出色使用者體驗的關鍵指標，但還有其他的一些重要指標。

其他 Web 指標通常用作核心 Web 指標的代理或補充指標，有助於獲取範圍更廣的體驗或幫助診斷特定的問題。

例如，Time to First Byte 首位元組時間 (TTFB)和First Contentful Paint 首次內容繪製 (FCP)指標都是載入體驗的重要方面，並且在診斷 LCP 問題方面（分別為伺服器響應時間過長或阻塞渲染資源）都十分有用。

同樣，總阻塞時間 (TBT)和Time to Interactive 可互動時間 (TTI)等指標是實驗室指標，對於捕獲和診斷會對 FID 產生影響的潛在互動性問題至關重要。然而，這些指標不是核心 Web 指標的一部分，因為它們無法進行實際測量，也不反映以使用者為中心的結果。

不斷髮展的 Web 指標 #

Web 指標和核心 Web 指標代表了當今開發者用來測量網路體驗質量的最佳可用訊號，但這些訊號並不完美，並且會在未來不斷進行改進或補充。

核心 Web 指標與所有網頁都息息相關，並且已經顯示在相關的 Google 工具中。這些指標的變化將產生廣泛的影響，因此，開發者應當認為核心 Web 指標的定義和閾值是穩定的，並且會以可預測的、每年一次的更新節奏提前釋出更新通知。

其他 Web 指標通常適用於特定情景或工具，並且可能比核心 Web 指標更具實驗性。因此，這些指標的定義和閾值可能會有更頻繁的更改。