使用 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 的欄位資料

在「實際使用者體驗」部分中,指標會依網站體驗核心指標其他重要指標分組。網站體驗核心指標的三個指標會先列出:最大內容繪製 (LCP)、首次輸入延遲時間 (FID) 和累計版面配置位移。下列指標後面接著其他重要指標:首次顯示內容所需時間 (FCP)、與下一個繪製互動的時間 (INP) 和第一個位元組 (TTFB)。

Core Web Vitals

  • LCP 會測量在頁面顯示可能主要內容 (例如主頁橫幅或標題) 之前所花費的時間。
  • INP 會評估使用者與網頁互動時發生的所有延遲時間,並回報所有 (或幾乎所有) 互動中的單一值。
  • CLS 會測量網頁上版面配置的不穩定程度,因為這類轉變 (可能是以非同步方式載入的內容) 所致。

其他重要指標

  • FCP 會測量網頁在前景顯示資料所需的時間,例如文字或標誌。
  • TTFB 是一個實驗性指標,可測量從資源要求到收到回應第一個位元組所間隔的時間。
  • FID (現已淘汰並由 INP 取代) - 評估從使用者首次互動到網頁回應網頁的互動程度。

指標門檻

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

指標 | "良好" | "需要 8 至 10 毫秒 | 0 毫秒 | 0 毫秒 | 0 毫秒 | 10 毫秒 | 10 毫秒 | 0 毫秒 | 0 毫秒 | 0 毫秒 | 0 毫秒 | 0 毫秒 | 2500 到 4000 毫秒 | 4000 毫秒+ CLS | 0.00-0.10 | 0.10 - 0.25 | 0.25+

網站體驗核心指標是最重要的指標,會由使用者直接體驗。其他指標可能會做為診斷工具,但使用者不一定能察覺。因此,這些指標不會納入 Core Web Vitals 評估的考量因素,而且只有在對網站體驗核心指標有負面影響時,才無法達到「良好」門檻。

有三種方式會在 PSI 中顯示使用者體驗:

  • 報告會總結網頁是否通過 網站體驗核心指標評估
  • 以秒或毫秒為單位測量的百分位數 (CLS 為無單位)
  • 如要查看代表「良好」、「需要改善」和「不佳」體驗百分比的分佈情形,請按一下這個部分右上方的「展開檢視畫面」

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

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

所有指標顯示的百分位數,會對應至第 75 個百分位數。在統計資料中,百分位數是一種測量值,表示在指定的樣本中,百分比低於這個值。舉例來說,上述螢幕截圖顯示 FID 的第 75 個百分位數為 13 毫秒,代表 75% 的 FID 體驗速度較 13 毫秒。根據上方的門檻表格,這些值會以不同顏色標示;其中「良好」值是綠色,「需要改善」值則是橘色,「不良」值則呈紅色。

最後,系統會以「良好」、「需要改善」和「不良」分組來呈現各項指標的分佈情形。舉例來說,這類 LCP 體驗網頁的機率為「良好」(不到 2.5 秒),佔 90%。FID 為「低」(至少 300 毫秒) 的機率為 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 和其他工具?

PSI 結合 CrUX 實際使用者體驗資料,以及 Lighthouse 實驗室效能診斷資料。如此一來,你就能輕鬆在單一位置查看網頁載入速度,以及如何加快網頁載入速度。PSI 的每日欄位資料彙整作業是讓監控來源或網址成效的好地方,比起匯總頻率較低的工具更適合。

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

PSI 只會提供最新每日匯總資料,因此你可能無法查看網站成效的趨勢。此外,CrUX 資料集也會加入一些不會在 PSI 中公開的指標。

哪裡可以找到 PageSpeed Insights 的詳細資訊?

詳情請參閱 PSI 說明文件