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 毫秒，使用者會認為是因相關來源 (例如使用者輸入) 造成。這表示理想的「與下一個顯示的內容互動」門檻應接近這個值。
Jakob Nielsen 常引用的「回應時間：3 個重要限制」一文中定義 0.1 秒為讓使用者感覺系統即時回應的限制值。Nielsen 引用了 Miller and Card，他引用 Michotte 的 1962 年《The Perception of Causality》(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 ms 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 是可接受的「差」門檻。