PageSpeed Insights 簡介

瞭解 PageSpeed Insights 最新的功能,協助您更妥善地評估並改善網頁與網站品質。

Addy Osmani
Addy Osmani
Elizabeth Sweeny
Elizabeth Sweeny
Leena Sohoni
Leena Sohoni

多年來,PageSpeed Insights (PSI) 已發展成為一站式來源,涵蓋欄位研究室資料。這項工具整合 Chrome 使用者體驗報告 (CrUX) 和 Lighthouse 診斷資訊,可提供深入分析,協助您改善網站效能。

我們今天很高興向大家宣布新版 PSI!雖然這是速度工具套件的重要元素,但 PSI 程式碼集距今十年、包含許多舊版程式碼,當時主要是想重新設計。我們可以利用這個機會解決 PSI 中的介面相關問題,但這有時會導致使用者難以瀏覽報表。我們的主要目標如下:

  • 區分來自合成環境的資料與從實際使用者收集的資料,讓 UI 更直覺易懂。
  • 清楚說明 UI 中如何計算網站體驗核心指標評估結果。
  • 運用質感設計打造 PSI 的外觀和風格。

本文將介紹今年稍晚將推出的 PSI 新功能。

最新消息

經過重新設計的 PSI 使用者介面旨在改善報表資料的呈現方式,並增加報表中可用資料的清晰度和精細程度。新版 UI 旨在提供更加直覺易用,幫助開發人員快速找出網頁的研究室和現場效能深入分析。UI 的基本變更包括:

清楚分隔欄位和研究室資料

我們調整了使用者介面,將欄位資料與研究室資料區分開來。「欄位資料」和「研究室資料」的標籤已更換為文字,指出資料代表的意義和應用方式。我們也將「欄位資料」部分移到上方傳統的研究室效能分數 (目前顯示在頂端) 已移至「研究室資料」區段,以免對分數來源產生混淆。

瞭解實際使用者體驗
現場資料章節
診斷效能問題
研究室資料章節

網站體驗核心指標評估

網站體驗核心指標評估結果 (先前在欄位資料中會顯示為「通過」或「未通過」單一字詞),現在顯示為獨立的子區段,並擁有不同的圖示。

請注意,Core Web Vitals 的評估流程不會受到任何影響。網站體驗核心指標 FID、LCP 和 CLS 均可在網頁或來源層級匯總。對於在全部三項指標中擁有足夠資料的匯總作業,如果這三項指標的第 75 個百分位數均良好,匯總就會通過網站體驗核心指標評估。否則匯總不會通過評估。 如果匯總的 FID 資料不足,如果 LCP 和 CLS 的第 75 個百分位數均良好,就會通過評估。如果 LCP 或 CLS 的資料不足,系統將無法評估網頁或來源層級的匯總作業。

行動版和電腦版成效的標籤

我們變更了頂端的導覽選單,並將行動版和電腦版網頁的連結都放在報表頁面上。這些連結現在很容易可見,並且會明確指出顯示資料的平台。這麼做也能讓導覽列更加簡潔。

舊版 PageSpeed Insights (在撰寫時)
前 PSI 行動版和電腦版標籤
新版導覽列
之後的 PSI 行動版和電腦版標籤

來源摘要

來源摘要,針對來源的所有頁面提供匯總 CrUX 分數。目前點選核取方塊後就會顯示。我們已將這份報表部分移至「欄位資料」區段下方的新分頁「來源」。

新版 PageSpeed Insights 重新整理的來源摘要。

其他實用資訊

報表現在在每個欄位和研究室資訊卡的底部加入了新的資訊部分,並分享下列有關取樣資料的詳細資料:

  • 資料收集期間
  • 造訪時間長度
  • 裝置
  • 網路連線數
  • 樣本數量
  • Chrome 版本

這項資訊應能加強研究室和現場資料之間的區別,並幫助先前不確定這兩種資料來源 (研究室和現場資料) 有何差異。

增強的領域、實驗室取樣和設定資料分享資料區段

展開檢視畫面

我們推出了新的「展開檢視」功能,在欄位資料部分加入細查功能,可讓您查看網站體驗核心指標指標的精細詳細資料。

全新展開的檢視畫面,包含欄位資料指標的細查功能。

頁面圖片

我們已移除已載入頁面的圖片,此圖片會顯示在欄位資料旁。顯示載入順序的頁面圖片和縮圖都會在研究室資料區段中提供。

在研究室資料旁邊載入的頁面圖片。

如需最新的產品說明文件,請前往 https://developers.google.com/speed/docs/insights/.

web.dev/measure 更新

為減少效能工具箱中不同工具之間的一致性,我們也將更新 web.dev/measure,直接採用 PageSpeed Insights API 技術。

先前,開發人員可以透過 PSI 工具和 /測量執行報表,並查看不同的 Lighthouse 數據。造成差異的主因之一是 /測量源自美國 (因為之前使用美國的雲端後端)。

透過 /measure 直接呼叫的 API 和 PSI UI,開發人員在使用 PSI 和 /measure 時就可以獲得更一致的體驗。此外,我們也根據使用者使用該工具的方式,微調及評估。也就是說,/測量服務將停用已登入體驗,但最常用的功能 (包括多種類別) 仍可使用。

舊版測量頁面。
web.dev/measure before
新版評估工具,著重於提供網頁品質評估。
web.dev/measure after

太平洋標準時間今天

先退一步,接著來看看目前的 PageSpeed Insights 報告提供哪些功能。PSI 報表會在獨立分頁中提供行動裝置和電腦裝置的成效資料,並提供網頁改善建議。在各種情況下,報表的主要元件都很類似,其中包含以下元素:

效能分數:效能分數會顯示在 PSI 報表頂端,並提供整體網頁效能的摘要。此分數是由執行 Lighthouse 所決定,用來收集並分析網頁相關的研究室資料。90 分以上代表良好,需要改善 50-90 分,低於 50 分則代表不佳。

欄位資料:取自 CrUX 報告資料集的欄位資料,可提供有關實際使用者體驗的深入分析。這項資料包括首次顯示內容所需時間 (FCP) 等指標,以及評估網站體驗核心指標 (首次輸入延遲時間 (FID)、最大內容繪製 (LCP) 和累計版面配置位移 (CLS)。除了指標值外,您也可以查看特定指標值為「良好」、「需要改善」或「不佳」(以綠色、琥珀色和紅色長條) 的網頁分佈情形。發布版本和分數會依據 CrUX 資料集使用者載入的頁面來顯示。系統只會計算過去 28 天的分數,如果新網頁可能沒有足夠的實際使用者資料,則無法提供分數。

目前的 PageSpeed 深入分析報表中不同資料部分的詳細資料

來源摘要:使用者可以勾選「Show Origin Summary」(顯示來源摘要) 核取方塊,針對過去 28 天內從相同來源提供的所有網頁,查看相關指標的匯總分數。

Lab Data:研究室效能分數 (由 Lighthouse 計算) 是在受控管的環境中收集,可協助偵錯效能問題。此報表會使用首次顯示內容繪製最大內容繪製速度指數累計版面配置位移互動前所需時間總封鎖時間等指標顯示效能。每項指標都會評分,並標有「良好」、「需要改善」或「不佳」的圖示。本節將詳細說明預先發布版的效能瓶頸,協助您診斷問題,但可能無法找出實際問題。

稽核:本節會列出 Lighthouse 執行的所有稽核,並列出通過的稽核、改進機會和其他診斷資訊。

目前 PSI 設計的挑戰

如上方螢幕截圖所示,實驗室和現場資料的不同資料點並未明確隔離,剛開始使用 PSI 的開發人員可能無法輕鬆瞭解資料脈絡,以及應採取的後續行動。這種混淆會導致許多「如何」網誌文章難以解讀 PSI 報告。

重新設計後,我們希望開發人員能夠更輕鬆地解讀報表,這樣他們就能更快產生 PSI 報表,進而根據當中的深入分析採取行動。

瞭解詳情

如要進一步瞭解效能工具更新,請觀看 2021 年 Chrome 開發人員高峰會主題演講。我們會在 PSI 推出日期和 web.dev/measure 做出調整時立即通知你。

感謝 Milica Mihajlija、Philip Walton、Brendan Kenny 和 Ewa Gasperowicz 針對這篇文章提供的寶貴意見