為什麼實驗資料和實際資料有差異 (以及處理方式)

瞭解為何監控 Core Web Vitals 指標的工具可能會回報不同的數據,以及如何解讀這些差異。

Google 提供許多工具來協助網站擁有者監控 Core Web Vitals 的分數。這些工具分為 兩個主要類別:

  • 回報研究室資料的工具,也就是在受控管的環境中收集的資料 預先定義的裝置和網路設定
  • 回報現場資料的工具,也就是從實際造訪網站的使用者收集的資料 你的網站

問題在於有時候研究室工具回報的資料可能相當特別 有別於現場工具回報的資料!研究室資料可能會顯示 但欄位資料顯示有需要 或者,欄位資料可能會顯示你所有的網頁都沒問題, 可能會得到很低的分數

以下是 web.dev 的 PageSpeed Insights 報表實際範例: 但在某些情況下,所有核心的研究室和實際資料可能都不同 網站體驗指標指標:

PageSpeed Insights 報表螢幕截圖,呈現相衝突的研究室與欄位資料

工具之間存在的常見原因 開發人員。本文將說明造成這些差異的主要原因 並提供涵蓋各項 Core Web Vitals 指標的特定範例。 網頁差異顯示時該怎麼辦

研究室資料與實際資料

為瞭解為什麼研究室和現場工具回報的值有所出入,即便是 網頁內容完全一致 - 您必須瞭解研究室與實際欄位之間的差異 資料。

研究室資料

研究室資料取決於 預先定義的網路和裝置條件組合這些條件稱為 lab 環境,有時也稱為「綜合」環境。

回報研究室資料的 Chrome 工具通常正在執行中 Lighthouse

檢驗測試的目的在於盡可能控制更多因素 在執行前,盡量達成一致且可重現的結果。

欄位資料

欄位資料是監控所有造訪網頁的使用者並評估 向每位使用者顯示一組特定成效指標個別 這點十分重要由於欄位資料是以實際使用者造訪為計算依據,因此能反映 使用者的實際裝置、網路狀況和地理位置。

現場資料通常稱為「實際使用者監控」 (RUM) 資料;這兩個字詞 這些元件可互換

這類報告的 Chrome 工具通常會從 Chrome 取得現場資料 使用者體驗報表 (CrUX)。 網站擁有者也很常收集欄位資料,這也是我們建議的做法 因為 Google Cloud 可提供 提供可做為行動依據的洞察資料,而不只是單獨使用 CrUX 而已。

瞭解現場資料時,最重要的是 一個數字,代表數字的分佈情形。也就是某些網站訪客 網站的載入速度可能會非常快,但對其他網站來說,載入速度則可能非常慢。 網站的欄位資料是所有成效資料完整的 向使用者收集的資料

舉例來說,CrUX 報表會顯示成效指標的分佈情形 28 天內的 Chrome 使用者人數。看到幾乎任何 CrUX 報告 造訪網站的某些使用者 其他員工的體驗可能很差

如果工具確實回報某項指標的單一數字,通常會 代表發布中的特定時間點回報核心網路內容的工具 Vitals 欄位分數會依據第 75 層的 百分位數

我們看上方螢幕截圖中的欄位資料,可以看到 分佈情形:

  • 88% 的訪客瀏覽 LCP 不超過 2.5 秒 (不錯)。
  • 8% 的造訪次數則介於 2.5 到 4 秒之間 (需要改善)。
  • 4% 的訪客發現 LCP 超過 4 秒 (較差)。

第 75 個百分位數,LCP 為 1.8 秒:

領域中的 LCP 分數分佈情形

相同網頁的研究室資料顯示 LCP 值為 3.0 秒。雖然這個值 大於欄位資料中顯示的 1.8 秒,這仍是有效的 LCP 這個值是構成完整發布資訊的眾多值之一 載入體驗的可能性

研究室中的 LCP 分數

為什麼研究室資料與實際資料不同

如上一節所述,實驗室資料和實際數據 你可以透過不同方式處理業務

欄位資料包括多種網路與裝置條件,以及 不同類型的使用者行為這也包括其他因素 影響使用者體驗 例如瀏覽器最佳化 (例如 往返快取 (bfcache),或是平台最佳化 (例如 AMP 快取

相反地,研究室資料會刻意限制涉及的變數數量。A 罩杯 研究室測試包含:

  • 單一裝置...
  • 卻只能連線到單一網路...
  • 在單一地理位置放送

任何實驗室測試的特定事項,不一定能準確反映 特定網頁或網站的欄位資料的第 75 個百分位數。

在偵錯問題或測試時,研究室的受控環境非常實用 不過,如果採用這些因素控管 您沒有明確呈現在現實世界中 用來觸及各種網路、裝置功能或地理位置。個人中心 也通常無法掌握實際使用者行為對效能的影響 例如捲動、選取文字或輕觸網頁上的元素

以及實驗室條件與狀況之間可能存在的斷線。 以大多數實際使用者來說 才是最重要的,讓您充分運用研究室 並複製任何差異

以下各節將詳細說明最常見的原因 那麼各個 Core Web 的研究室資料和現場資料都可能有差異 Vitals 指標:

LCP

不同的 LCP 元素

研究室測試中發現的 LCP 元素可能與 LCP 不同 元素。

如果對特定網頁執行 Lighthouse 報表,系統會傳回相同的 每次處理 LCP 元素。但查看同一個網頁的欄位資料 您通常會找到各種不同的 LCP 元素,系統會根據 個別網頁造訪的特定情況數量。

舉例來說,以下因素都可能造成不同的 LCP 元素:

  • 不同裝置螢幕大小會導致顯示的元素不同 檢視點
  • 如果使用者已登入,或某些區塊顯示個人化內容 LCP 元素可能會依使用者而異
  • 與前一點類似,如果 A/B 版本測試在網頁上執行 會導致顯示的元素截然不同
  • 使用者在系統上安裝的字型組合可能會影響 以及 LCP 元素
  • 研究室測試通常會在網頁的「基數」上執行網址:不含任何查詢參數 或雜湊片段加入。但在現實生活中,使用者常常會分享網址 包含片段 ID 文字片段,因此 LCP 元素可能會 實際上來自網頁的中間或底部 (而不是「在網站上方」 「捲動」)。

這個欄位中的 LCP 是所有使用者造訪的第 75 個百分位數 如果某個使用者當中有許多 例如使用系統字型轉譯一段文字,然後 即使這些使用者中 元素,如果發生率低於 25%,也不會影響該網頁的分數 。

相反地,也可能有。檢驗測試可能會找出 將文字視為 LCP 元素,因為它會模擬 Moto G4 手機, 可視區域較小,一開始會算繪網頁的主頁橫幅 畫面外。然而,您的現場資料可能大部分含有 大螢幕,因此載入速度緩慢的主頁橫幅「是」其 LCP 元素。

快取狀態對 LCP 的影響

研究室測試通常使用冷快取載入網頁,但當實際使用者造訪時 這些網頁可能已快取部分資源。

使用者初次載入網頁時,載入速度可能會很慢,但如果網頁 網頁可能就會立即載入

有些研究室工具支援多個同一個網頁執行多次 (以模擬 研究室工具無法掌握 回訪者的經驗 新使用者和回訪者在實際造訪中所佔的百分比。

如果網站的快取設定經過最佳化 並有大量重複訪客 發現,實際的 LCP 體驗會比研究室資料顯示的速度快上許多。

AMP 或 Signed Exchange 最佳化

使用 AMP 或使用 Signed Exchanges 建立的協作平台 (SXG) 可能會由 Google 等內容集結網站預先載入 搜尋這樣可以大幅改善使用者載入效能 造訪您的網頁

除了跨來源預先載入,網站本身也可以 預先載入內容,以便載入網站後續的網頁。 這也會改善這些網頁的 LCP

研究室工具不會模擬這些最佳化作業帶來的成效, 但他們就無法得知 您有多少比例的流量 比較 Google 搜尋和其他平台

bfcache 對 LCP 的影響

透過 bfcache 還原網頁時,載入體驗會接近 享受流暢的體驗,自然融入你的領域 資料

研究室測試不考慮 bfcache 檔案, bfcache 相容,則可能會 從而加快領域回報 LCP 分數的速度。

使用者互動對 LCP 的影響

LCP 會指出圖片中最大圖像或文字區塊的顯示時間 但最大元素可能會在網頁載入時改變 內容會以動態方式新增至可視區域中

在研究室中,瀏覽器會先等網頁完全載入 決定 LCP 元素但在這個欄位中,瀏覽器會 監控大型元素 在使用者捲動畫面或與網頁互動後顯示

這個方式很合理 (也沒有必要),因為使用者通常等待 與網頁互動,直到「出現」也就是 LCP 目標指標。考慮加入 因為這些元素可能只 「因為」使用者做了某些動作才載入。

然而這麼做的後果是,網頁的欄位資料回報速度可能會更快 根據使用者在該網頁上的行為而定。

INP

INP 需要與使用者的實際互動

INP 指標可評估網頁回應使用者互動的程度 使用者實際選擇與應用程式互動的時間點

這個句子的第二部分至關重要,因為實驗室測試 支援指令碼使用者行為,無法準確預測使用者 與網頁互動,因此無法準確評估 FID。

TBT 不會將使用者行為納入考量

「Total Blocking Time (TBT)」研究室指標可量化網頁載入期間主執行緒遭到封鎖的程度,有助於診斷 INP 相關問題。

概念:網頁含有大量同步 JavaScript,或含有大量同步 JavaScript 的網頁 當使用者時,轉譯工作較可能因為主執行緒遭到封鎖 最初互動不過,如果使用者等到 JavaScript 執行完畢,INP 可能非常低。

使用者選擇與網頁互動的時機,主要取決於 「看起來」是互動式,且不能以 TBT 為單位進行測量。

待定模式不會考量輕觸延遲

如果網站不支援行動裝置瀏覽,瀏覽器會加上 300 毫秒。 延遲 再執行事件處理常式。這是因為他們需要 判斷使用者是否嘗試在觸發前嘗試輕觸兩下縮放 滑鼠或點擊事件

這段延遲將計入網頁的 INP,因為這會影響實際輸入內容 使用者體驗但因為嚴格來說,這段延遲並非「長」 工作,這不會影響網頁的 TBT。 這表示即使網頁的 INP 分數非常高,但 INP 卻可能偏低。

快取狀態和 bfcache 對 INP 的影響

就像妥善快取能改善領域 LCP 一樣,也能 改善 INP

現實生活中,使用者可能有網站的 JavaScript 因此處理資料只需減少 縮短延遲時間,縮短延遲時間。

同樣的道理也適用於從 bfcache 還原的網頁。在這些情況下 JavaScript 會從記憶體還原,因此可能幾乎或完全未處理 。

CLS

使用者互動對 CLS 的影響

在研究室中測量的 CLS 只會考量以上發生的版面配置位移 這只是 CLS 的一小部分 並採取修正措施

在欄位中,CLS 會考量所有非預期的版面配置 在整個購物歷程中持續出現變化 網頁壽命,包括使用者捲動頁面或捲動頁面時, 回應速度緩慢的網路要求

舉例來說,在網頁的延遲載入圖片或 iframe沒有 也可能造成版面配置 會在使用者捲動至網頁上的這些部分時移動但這些轉變 只有在使用者向下捲動畫面時才會發生這種情形,而研究室測試通常不會捕捉到這點。

個人化內容

個人化內容 (包括指定廣告和 A/B 版本測試) 會影響的元素 都會在網頁上載入這也會影響 頁面個人化時載入的方式 內容通常會稍後載入並插入網頁的主要內容中 版面配置位移。

在研究室中,載入網頁時通常沒有個人化內容 為一般「測試使用者」提供的內容,則不一定能觸發轉換程序 實際使用情境

欄位資料包括所有使用者的體驗,因此數值和程度 某個網頁發生的版面配置位移的情況,大多取決於內容 資料。

快取狀態和 bfcache 對 CLS 的影響

載入期間版面配置位移最常見的兩個原因是圖片和 不含尺寸的 iframe (如上所述) 和網頁載入速度緩慢 所以這兩種問題更有可能 會影響使用者初次造訪網站時的體驗,系統 並將空無一物。

如果網頁資源是快取資料,或網頁本身是從 bfcache 時,瀏覽器通常可以立即算繪圖片和字型,而沒有 並等待系統下載這可能會導致欄位中的 CLS 值較少 而不是研究室工具回報的

結果出現差異時的處理方式

一般而言,如果特定網頁同時有欄位資料和研究室資料 欄位資料可用來決定處理的優先順序。自欄位資料以來 代表使用者實際遇到的情形 您就能確實瞭解使用者在什麼情況下遇到困難 同時找出改善 AI 的方式

另一方面,如果您的欄位資料全盤顯示良好分數 根據研究室資料,如果還有改善空間 瞭解進一步最佳化的方式

此外,雖然現場資料確實擷取了實際使用者體驗,但只會擷取 以便順利載入網站的使用者。研究室資料 有時還能找出拓展網站觸及範圍的機會 網路速度較慢或低階裝置的使用者則更容易存取。

整體而言,實驗室資料和實際環境資料都是有效的 評估成效。兩者的強項和限制都存在,如果 只使用其中一種,可能會錯失改善 打造良好的使用者體驗

延伸閱讀