Core Web Vitals 門檻背後的研究和方法
發布日期：2020 年 5 月 21 日
網站使用體驗核心指標是一組現場指標，可評估網站上實際使用者體驗的重要面向。Core Web Vitals 包含指標，以及每個指標的目標閾值，可協助開發人員從定性角度瞭解自家網站的使用體驗是「良好」、「需要改善」或「不佳」。這篇文章將說明一般選擇 Core Web Vitals 指標門檻的方法，以及如何選擇每項 Core Web Vitals 指標的門檻。
複習：Core Web Vitals 指標和門檻
Core Web Vitals 包含三個指標：最大內容繪製 (LCP)、互動到下一個繪製 (INP) 和累積版面配置位移 (CLS)。每項指標都會評估不同的使用者體驗面向：LCP 會評估感知載入速度，並在網頁載入時間軸上標示網頁主要內容可能已載入的時間點；INP 會評估回應速度，並量化使用者與網頁互動時的感受；CLS 會評估影像穩定性，並量化可見網頁內容的非預期版面配置位移量。
每個 Core Web Vitals 指標都有相關聯的門檻，可將成效分類為「良好」、「需要改善」或「不佳」：
| 佳 | 不佳 | 百分位數 | |
|---|---|---|---|
| 最大內容繪製 | ≤2500 毫秒 | 超過 4000 毫秒 | 75 |
| Interaction to Next Paint | 200 毫秒以下 | 超過 500 毫秒 | 75 |
| 累計版面配置轉移 | ≤0.1 | 超過 0.25 | 75 |
此外，為了將網頁或網站的成效分類，我們會使用該網頁或網站所有網頁瀏覽量的第 75 百分位數值。換句話說，如果網站的網頁瀏覽次數至少有 75% 達到「良好」門檻，該網站就會被歸類為在該指標上有「良好」成效。反之，如果至少有 25% 的網頁瀏覽量達到「差」門檻，該網站就會被歸類為「成效不佳」。舉例來說，如果 75 百分位 LCP 為 2 秒，就會歸類為「良好」，如果 75 百分位 LCP 為 5 秒，就會歸類為「不良」。
Core Web Vitals 指標門檻的判定標準
在本節中，我們將說明評估 Core Web Vitals 指標門檻的標準。後續章節將詳細說明如何套用這些條件來選取各項指標的門檻。我們預計在未來幾年改善及新增評估標準和門檻，進一步提升評估網站優質使用者體驗的能力。
優質使用者體驗
我們的首要目標是為使用者和使用者體驗提供最佳化服務。因此，我們希望確保符合 Core Web Vitals「良好」門檻的網頁，能提供優質的使用者體驗。
為了找出與優質使用者體驗相關的門檻，我們參考了人類感知和人機介面研究。雖然這項研究有時會使用單一固定門檻進行總結，但我們發現基礎研究通常會以值的範圍表示。舉例來說，關於使用者通常需要等待多久才會失去焦點的研究，有時會以 1 秒來表示，但實際上相關研究的結果是介於數百毫秒到數秒之間。事實上，感知門檻會因使用者和情境而異，這點可從匯總和匿名的 Chrome 指標資料中得到進一步證實，這些資料顯示，使用者在終止網頁載入前，等待網頁顯示內容的時間並非一成不變。相反地，這項資料顯示的是平滑連續的分布情形。如要深入瞭解人類感知門檻和相關 HCI 研究，請參閱「Web Vitals 背後的科學研究」。
如果特定指標有相關的使用者體驗研究，且文獻中對值範圍有合理共識，我們會將這個範圍做為輸入值，引導閾值選擇程序。如果無法取得相關的使用者體驗研究資料 (例如累積版面配置位移等新指標)，我們會評估符合不同候選門檻的實際網頁，找出可提供良好使用者體驗的門檻。
現有網站內容可達成
此外，為確保網站擁有者能成功將網站最佳化，以符合「良好」門檻，我們要求這些門檻必須適用於網路上的現有內容。舉例來說，雖然零毫秒是理想的 LCP「良好」門檻，可提供即時載入體驗，但在大多數情況下，由於網路和裝置處理延遲，實際上無法達到零毫秒的門檻。因此，零毫秒並非 Core Web Vitals 的合理 LCP「良好」門檻。
評估候選 Core Web Vitals 的「良好」門檻時，我們會根據 Chrome 使用者體驗報告 (CrUX) 的資料，確認這些門檻是可達成的。為確保可達到門檻，我們要求至少 10% 的來源符合「良好」門檻。此外，為確保經過妥善最佳化的網站不會因欄位資料的變化而遭到誤分類，我們也會驗證經過妥善最佳化的內容是否持續符合「良好」門檻。
反之，我們會找出只有少數來源未達到的效能等級，藉此建立「差」的門檻。除非有相關研究可用於定義「差」的門檻，否則系統會將成效最差的 10% 至 30% 來源歸類為「差」。
是否為每部裝置設定相同或不同的條件
行動裝置和電腦的使用行為通常在裝置功能和網路可靠性方面有很大差異。這會嚴重影響「可達成性」標準，因此建議我們應為每個標準設立不同的門檻。
不過，即使達成標準的條件會因裝置而異，使用者對良好或不佳體驗的期待也不會因裝置而異。因此，Core Web Vitals 建議的門檻並未依裝置區分，而是在兩者都使用相同的門檻。這樣一來，您也能更容易理解閾值。
此外，裝置不一定會歸入單一類別。這項功能應根據裝置板型規格、處理能力或網路狀況而定嗎？設定相同的門檻值可避免這種複雜性。
行動裝置的限制較多，因此大多數的門檻都是根據行動裝置可達成的目標設定。這些值更有可能代表行動裝置的門檻，而非所有裝置類型的共同門檻。不過，由於行動裝置通常是多數網站的流量來源，因此這項問題較不嚴重。
關於條件的最終看法
在評估候選門檻時，我們發現條件有時會互相衝突。舉例來說，在確保持續達到門檻的同時，也要確保持續提供良好的使用者體驗，這兩者之間可能會產生衝突。此外，由於人類感知研究通常會提供一系列值，而使用者行為指標會顯示行為的漸進變化，因此我們發現指標通常沒有單一「正確」的門檻。因此，我們在處理網站體驗核心指標時，會選擇最符合標準的門檻，同時也瞭解沒有任何完美的門檻，有時可能需要從多個合理的候選門檻中進行選擇。我們並未問「什麼是完美的閾值？」，而是著重於詢問「哪個候選閾值最能符合我們的標準？」
選擇百分位數
如先前所述，我們會使用網頁或網站所有造訪次數的第 75 個百分位數值，來分類網頁或網站的整體成效。我們根據兩項條件選擇 75 百分位數。首先，百分位數應確保網頁或網站的大多數造訪次數都能達到目標成效等級。其次，所選百分位數的值不應過度受到異常值的影響。
這些目標多少有些衝突。為了達成第一個目標，通常會選擇較高的百分位數。不過，百分位數越高，結果值受到異常值影響的可能性也會隨之增加。如果少數網站訪客使用不穩定的網路連線，導致 LCP 樣本過大，我們不希望網站分類受到這些異常值樣本的影響。舉例來說，如果我們使用高百分位數 (例如第 95 百分位數) 評估有 100 次造訪的網站成效，只需要 5 個異常值樣本，第 95 百分位數值就會受到異常值影響。
由於這些目標略有衝突，經過分析後，我們認為 75 百分位數可取得合理平衡。透過第 75 百分位數，我們得知大部分的網站訪客 (4 分之 3) 都能達到目標效能等級或更高。此外，第 75 個百分位數值較不易受到離群值的影響。回到上述範例，假設網站有 100 次造訪，其中 25 次造訪的值必須回報為大型異常值樣本，才能受到異常值影響，進而達到第 75 百分位。雖然 100 個樣本中可能有 25 個是異常值，但發生這種情況的機率遠低於第 95 個百分位數的情況。
最大內容繪製
我們在設定 LCP 門檻時，考量了以下體驗品質和可行性因素。
使用體驗品質
1 秒通常是指使用者等待多久後，就會開始失去對工作專注的時間。在仔細檢查相關研究後，我們發現 1 秒是用來描述從幾百毫秒到幾秒的值範圍的近似值。
兩個常見的 1 秒門檻來源是 Card 和其他人和 Miller。Card 引用 Newell 的「認知統一理論」，定義了 1 秒的「即時回應」門檻。Newell 解釋即時回應是「必須在 約一秒內對某些刺激做出的回應 (也就是大約 0.3 秒到 3 秒之間)」。這項做法遵循 Newell 討論「認知的即時限制」時所提及的內容，其中提到「與環境的互動會喚起認知考量，而這類互動通常會在幾秒內發生」，時間範圍大約為 0.5 到 2-3 秒。另一個常被引用的 1 秒門檻來源是 Miller，他指出：「如果回應延遲時間超過兩秒，人類可透過機器通訊執行的任務將會嚴重改變，且可能再延遲一秒左右。」
Miller 和 Card 的研究指出，使用者在失去專注力之前等待的時間範圍約為 0.3 到 3 秒，因此 LCP 的「良好」門檻應落在這個範圍內。此外，考量到現有的「良好」首次顯示內容繪製門檻為 1 秒，而最大內容繪製通常會在首次顯示內容繪製後發生，因此我們進一步將候選 LCP 門檻範圍從 1 秒到 3 秒之間。為了在這個範圍內選擇最符合條件的門檻，我們接下來會檢視這些候選門檻的可達成性。
可達成性
我們可以運用 CrUX 的資料，判斷網站上符合候選 LCP「良好」門檻的來源百分比。
| 1 秒 | 1.5 秒 | 2 秒 | 2.5 秒 | 3 秒 | |
|---|---|---|---|---|---|
| phone | 3.5% | 13% | 27% | 42% | 55% |
| 電腦 | 6.9% | 19% | 36% | 51% | 64% |
雖然只有不到 10% 的來源符合 1 秒的門檻，但 1.5 到 3 秒的其他所有門檻都符合至少 10% 的來源符合「良好」門檻的規定，因此仍是有效的候選項目。
此外，為確保已充分最佳化的網站能持續達到所選門檻，我們會分析網路上成效最佳的網站 LCP 成效，判斷這些網站能持續達到哪些門檻。具體來說，我們希望找出一個門檻，讓效能最佳的網站能持續達到第 75 百分位。我們發現 1.5 秒和 2 秒的門檻無法一律達到，但 2.5 秒則可一律達到。
為了找出 LCP 的「不良」門檻，我們使用 CrUX 資料來找出大多數來源達到的門檻：
| 3 秒 | 3.5 秒 | 4 秒 | 4.5 秒 | 5 秒 | |
|---|---|---|---|---|---|
| phone | 45% | 35% | 26% | 20% | 15% |
| 電腦 | 36% | 26% | 19% | 14% | 10% |
如果設為 4 秒門檻，約有 26% 的手機來源和 21% 的電腦來源會被歸類為「不佳」。這項數據落在 10% 至 30% 的目標範圍內，因此我們判定 4 秒是可接受的「不佳」門檻。
因此，我們認為 2.5 秒是合理的「良好」門檻，而 4 秒是合理的「不良」門檻，適用於最大內容繪製時間。
Interaction to Next Paint
我們在設定 INP 門檻時，考量了以下的使用者體驗和可行性。
使用體驗品質
研究結果一致指出，視覺回饋延遲時間最多為 100 毫秒，使用者會認為是因相關來源 (例如使用者輸入) 造成。這表示理想的「良好」Interaction to Next Paint 門檻應接近這個值。
Jakob Nielsen 常引用的「回應時間：3 個重要限制」一文中定義 0.1 秒為讓使用者感覺系統即時回應的限制值。Nielsen 引用了 Miller 和 Card 的論述，而他們則引用了 Michotte 於 1962 年發表的「The Perception of Causality」。在 Michotte 的研究中，實驗參與者會看到「螢幕上有兩個物件。物件 A 啟動並移動至 B。它會在與 B 接觸的當下停止，而後者則會開始並遠離 A。」Michotte 會變更物件 A 停止與物件 B 開始移動之間的時間間隔。Michotte 發現，如果延遲時間約為 100 毫秒，參與者會認為物件 A 導致物件 B 的動作。若延遲時間介於 100 毫秒至 200 毫秒，使用者會認為兩者之間存在因果關係，但若延遲時間超過 200 毫秒，使用者就不會認為物件 B 的動作是由物件 A 造成。
同樣地，Miller 也將「回應控制項啟用」的回應門檻定義為「指示動作的標示，通常是透過按鍵、開關或其他控制項元件的移動，表示已實際啟用。這個回應應被視為運算元件所誘發的機械動作的一部分。時間延遲：不超過 0.1 秒」和「按下按鍵和視覺回饋之間的延遲時間不超過 0.1 到 0.2 秒」。
在最近的「Towards the Temporally Perfect Virtual Button」中，Kaaresooja 和其他人研究了在觸控螢幕上觸碰虛擬按鈕，以及隨後顯示按鈕已被觸碰的視覺回饋之間，在不同延遲情況下，人們對兩者同時發生的認知。當按下按鈕和顯示視覺回饋之間的延遲時間為 85 毫秒以下時，參與者回報的按鈕按下和視覺回饋顯示時間有 75% 是同時發生。此外，在延遲時間為 100 毫秒以下的情況下，參與者表示按鈕的品質一貫很高，延遲時間為 100 毫秒至 150 毫秒時，感知品質會下降，延遲時間為 300 毫秒時，感知品質會降至極低。
因此，我們得出結論，研究指出 100 毫秒是 Web Vitals 的「良好」Interaction to Next Paint 門檻。此外，使用者回報的延遲時間為 300 毫秒以上時，品質等級偏低，因此這應是「不良」的門檻。
可達成性
根據 CrUX 的資料，我們判斷網際網路上的大部分來源都符合 75 百分位數的 200 毫秒 INP「良好」門檻：
| 100 毫秒 | 200 毫秒 | 300 毫秒 | 400 毫秒 | 500 毫秒 | |
|---|---|---|---|---|---|
| phone | 12% | 56% | 76% | 88% | 92% |
| 電腦 | 83% | 96% | 98% | 99% | 99% |
我們也特別關注低階行動裝置的 INP 通過率，因為這類裝置占網站訪客的比例相當高。這進一步證實 200 毫秒的門檻合適性。
考量到研究結果指出的 100 毫秒門檻，以及可達成的標準，我們認為 200 毫秒是提供良好體驗的合理門檻。
為了找出 LCP 的「不良」門檻，我們使用 CrUX 資料找出大多數來源都達到的門檻：
| 100 毫秒 | 200 毫秒 | 300 毫秒 | 400 毫秒 | 500 毫秒 | |
|---|---|---|---|---|---|
| phone | 88% | 44% | 24% | 12% | 8% |
| 電腦 | 17% | 4% | 2% | 1% | 1% |
這表示我們可以設定 300 毫秒的「不良」門檻。
不過，與 LCP 和 CLS 不同，INP 與熱門程度呈反比關係，也就是說，越熱門的網站通常越複雜，因此更有可能出現較高的 INP。當我們查看前 10,000 個網站 (佔網路瀏覽量的絕大多數) 時，會發現更複雜的情況：
| 100 毫秒 | 200 毫秒 | 300 毫秒 | 400 毫秒 | 500 毫秒 | |
|---|---|---|---|---|---|
| phone | 97% | 77% | 55% | 37% | 24% |
| 電腦 | 48% | 17% | 8% | 4% | 2% |
在行動裝置上，300 毫秒的「差」門檻會將大多數熱門網站歸類為「差」，導致可達成性標準過於嚴苛，而 500 毫秒的門檻則更適合 10% 到 30% 的網站。另外，請注意，200 毫秒的「良好」門檻對這些網站來說也較為嚴格，但仍有 23% 的網站在行動裝置上通過這項門檻，因此仍符合 10% 的最低通過率標準。
因此，我們認為 200 毫秒是大多數網站的合理「良好」門檻，而超過 500 毫秒則是合理的「不良」門檻。
累計版面配置轉移
我們在設定 CLS 門檻時，考量了以下體驗品質和可行性因素。
使用體驗品質
累計版面配置位移 (CLS) 是一種全新指標，用來評估網頁可見內容的位移程度。由於 CLS 是新指標，我們目前並未發現任何研究可直接提供這項指標的閾值。因此，為了找出符合使用者期待的門檻，我們評估了不同版面配置位移量的實際網頁，以便判斷在使用網頁內容時，哪個位移量會造成明顯中斷，進而判斷可接受的最大位移量。在內部測試中，我們發現 0.15 以上程度的變動一律會被視為干擾，而 0.1 以下的變動雖然明顯，但不會造成過度干擾。因此，雖然零版面配置位移是理想狀態，但我們認為值最高為 0.1 的候選值是「良好」的 CLS 門檻。
可達成性
根據 CrUX 資料，我們發現近 50% 的來源 CLS 為 0.05 或更低。
| 0.05 | 0.1 | 0.15 | |
|---|---|---|---|
| phone | 49% | 60% | 69% |
| 電腦 | 42% | 59% | 69% |
雖然 CrUX 資料顯示 0.05 可能是合理的 CLS「良好」門檻，但我們也瞭解，有些用途難以避免造成干擾的版面配置變動。舉例來說，對於第三方嵌入內容 (例如社群媒體嵌入內容)，有時必須等到嵌入內容完成載入後，才能得知嵌入內容的高度，這可能會導致版面配置偏移超過 0.05。因此，我們得出結論，雖然許多來源符合 0.05 門檻，但 CLS 門檻稍微寬鬆一點 (0.1)，可在使用者體驗品質和可行性之間取得更好的平衡。我們希望在未來，網頁生態系統能找出解決方案，解決第三方嵌入內容造成的版面配置變化問題，這樣在日後的 Core Web Vitals 迭代中，就能使用更嚴格的 CLS「良好」門檻值 0.05 或 0。
此外，為了判斷 CLS 的「不良」門檻，我們使用 CrUX 資料找出大部分來源都符合的門檻：
| 0.15 | 0.2 | 0.25 | 0.3 | |
|---|---|---|---|---|
| phone | 31% | 25% | 20% | 18% |
| 電腦 | 31% | 23% | 18% | 16% |
如果門檻為 0.25，約有 20% 的手機來源和 18% 的電腦來源會被歸類為「poor」。這項數據落在 10% 至 30% 的目標範圍內，因此我們認為 0.25 是可接受的「差」門檻。