如何在 PageSpeed Insights 中查看 Chrome 使用者體驗報告資料

PageSpeed Insights (PSI) 是網頁程式開發人員可運用這項工具瞭解網頁效能及改進方式。這項功能使用 Lighthouse 稽核該網頁,找出改善成效的機會。此外,這個報告也整合了 Chrome 使用者體驗報告 (CrUX) 的資料,可顯示網頁和來源的整體使用體驗。在本指南中,您會瞭解如何使用 PSI 從 CrUX 擷取洞察,進一步瞭解使用者體驗。

PageSpeed Insights 中來自 CrUX 的欄位資料

讀取資料

如要開始使用,請前往 https://pagespeed.web.dev/ 然後輸入要測試的網頁網址,然後按一下「分析」。

輸入網址,開始使用 PageSpeed Insights

幾秒後 Lighthouse 稽核作業會執行,然後您會看到包含 CrUX (「瞭解實際使用者遇到的問題」) 和 Lighthouse (「診斷效能問題」) 資料的部分。CrUX 是一系列實際使用者體驗的集合,Lighthouse 則是研究室中的控管測試。

PageSpeed Insights 中來自 CrUX 的欄位資料

在「實際使用者體驗」部分中,指標會按照網站使用體驗核心指標其他重要指標分組。系統會優先列出三項 Core Web Vitals 指標:Largest Contentful Paint (LCP)、與下一個繪製互動的互動 (INP) 和累計版面配置位移。後面接著其他重要指標:First Contentful Paint (FCP) 和首次位元組所需時間 (TTFB)。

Core Web Vitals

  • LCP 會測量直到網頁顯示可能主要內容 (例如主頁橫幅或標題) 的時間。
  • INP 會評估使用者與網頁進行的所有互動延遲,並回報所有 (或幾乎所有) 互動次數小於的單一值,藉此衡量網頁的互動性。
  • CLS 會評估網頁中版面配置的不穩定程度,這是由於非同步載入的內容插入等轉換的情況。

其他重要指標

  • FCP 會測量直到網頁顯示 例如某些文字或標誌
  • TTFB 是一種實驗性指標,可以測量從資源要求到回應第一個位元組開始到回應之間所經過的時間。

指標門檻

下表說明這些指標的值如何歸類為 「良好」、「需要改善」或「不佳」。

指標 「Good」 「需要改善」 「不佳」
LCP 0 到 2500 毫秒 2500 - 4000 毫秒 4000 毫秒以上
CLS 0.00 至 0.10 0.10 到 0.25 0.25 以上
INP 0 至 200 毫秒 200 毫秒至 500 毫秒 500 毫秒以上
FCP 0 至 1800 毫秒 1800 毫秒 - 3000 毫秒 3000 毫秒以上
文字轉語音 0 到 800 毫秒 800 毫秒至 1800 毫秒 1800 毫秒以上

Core Web Vitals 指標是最重要的指標,由實際使用者直接體驗。其他指標可能會用作診斷,但不一定是真人辨識的結果。因此,這些指標不會納入 Core Web Vitals 評估,而且未達到「良好」狀態只有對 Core Web Vitals 有不良影響的門檻才會產生影響。

PSI 會以三種方式顯示使用者體驗:

  • 利用標籤總結網頁是否通過 Core Web Vitals 評估
  • 單位為秒或毫秒的百分位數 (CLS 無單位)
  • 表示「良好」、「需要改善」及「不佳」的百分比分佈圖如要查看體驗,請按一下這個專區右上方的「展開檢視」

PageSpeed Insights 中展開 CrUX 資料檢視畫面

上一個螢幕截圖中,頁面標示為「通過」Core Web Vitals 評估如要通過,百分位數必須歸類為「good」「Core Web Vitals」的所有指標否則,評量會顯示為「失敗」。部分網頁可能沒有足夠的 INP 資料,在這種情況下,系統會透過另外兩項 Core Web Vitals 指標評估該網頁。

所有指標顯示的百分位數都與第 75 個百分位數相對應。在統計學中,百分位數是用來表示特定百分比低於該值的數值。例如,上方螢幕截圖顯示 INP 的第 75 個百分位數為 64 毫秒,表示 75% 的 INP 體驗速度低於 64 毫秒。這些值會根據前一個門檻表 (其中「good」) 以不同顏色標示。綠色的值,表示「需要改善」是橘色,「不佳」設為紅色。

最後,每個指標的分佈情形會以「良好」、「需要改善」和「不佳」表示分組舉例來說,這個網頁的 LCP 體驗為「良好」(低於 2.5 秒) 90% 的時間。INP 的值「不佳」(至少 500 毫秒) 1% 的時間。這些分布圖代表網頁上的所有使用者體驗,而圖形的形狀則表示「良好」或「不良」的傾向。

來源成效摘要

PSI 也會提供來源成效的摘要。這是彙整自某個來源所有網頁的使用者體驗匯總資料。您可以針對整個來源取得與個別網頁相同的統計資料。這項資料與 BigQuery 中所提供的資料密切相關,但無法查詢網頁層級成效。

PageSpeed Insights 中的來源 CrUX 效能

PSI 與 BigQuery 的來源層級資料有一個重大的差異。BigQuery 上的資料集每個月會發布一次,並且包含上一個月的資料。舉例來說,202005 年的資料集涵蓋 2020 年 5 月發生的所有使用者體驗。另一方面,PSI 每天都會匯總涵蓋前 28 天的新資料,因此,你今天看到的結果可能與明天不同,不一定與 BigQuery 當月匯總結果相同。

無法在 CrUX 中取得網址資料時的回應

如果輸入的網址無法在 CrUX 中取得,PageSpeed Insights 會嘗試改回來源層級資料,如下一個螢幕截圖所示。按一下已停用「這個網址」按鈕旁的圖示,即可查看詳細說明。

PageSpeed Insights 中沒有網址層級的 CrUX 資料,因此會顯示來源資料

如果 CrUX 中也沒有來源層級資料,PSI 就無法顯示這個部分,您也會看到「無資料」。目前仍可透過 Lighthouse 的研究室資料預估頁面成效。

PageSpeed Insights 沒有 CrUX 資料

常見問題

以下是 PageSpeed Insights 中 CrUX 資料的常見問題:

何時該使用 PageSpeed Insights 而不是其他工具?

PSI 結合 CrUX 的實際使用者體驗資料與 Lighthouse 的實驗室效能診斷資料。方便你在同一處輕鬆查看網頁載入速度,以及如何加快網頁載入速度。在 PSI 中每天匯總欄位資料,比起匯總頻率較低的工具,進一步監控來源或網址成效,是不錯的選擇。

使用 PageSpeed Insights 是否有任何限制?

PSI 只會提供最新的每日匯總資訊,因此你未必能瞭解網站成效的趨勢變化。此外,CrUX 資料集也包含一些未在 PSI 中公開的非重要指標。

我想進一步瞭解 PageSpeed Insights,該怎麼做?

查看 PSI 說明文件 瞭解詳情。