瞭解最新的 PageSpeed Insights 功能，以便更有效地評估及改善網頁和網站品質。
多年下來，PageSpeed Insights (PSI) 已成為一站式來源，可提供實地和研究室資料。這項功能會整合 Chrome 使用者體驗報告 (CrUX) 和 Lighthouse 診斷資訊，提供有助於改善網站效能的洞察資料。
今天，我們很高興宣布 PSI 更新版！雖然 PSI 是我們速度工具套件中的重要元素，但這個程式碼基底已使用了十年，包含許多舊版程式碼，因此需要重新設計。我們藉此機會解決 PSI 中與介面相關的問題，這些問題有時會導致使用者難以瀏覽報表。我們的主要目標如下：
- 明確區分來自合成環境的資料，以及從實地使用者收集的資料，讓使用者介面更直覺。
- 清楚說明 UI 中如何計算 Core Web Vitals 評估。
- 運用 Material Design，讓 PSI 的外觀和風格更現代化。
這篇文章將介紹 PSI 將於今年稍晚推出的新功能。
新功能
PSI UI 重新設計旨在改善報表資料的呈現方式，並為報表中提供的資料增添清晰度和細節。新版 UI 旨在提供更直覺的操作介面，協助開發人員快速掌握網頁的實驗室和實地成效洞察資料。UI 的根本性變更包括：
明確區分實地和實驗室資料
我們已變更 UI，將實驗室資料與實地資料明確區隔開來。「Field Data」和「Lab data」的標籤已改為說明資料意義和用途的文字。我們也將「欄位資料」部分移至頂端。目前顯示在頂端的傳統實驗室效能分數已移至「實驗室資料」部分，以免造成分數來源的歧義。
Core Web Vitals 評估
網站體驗核心指標評估結果先前會在「欄位資料」中以「通過」或「失敗」這兩個單字顯示，現在則會以獨立的子區段和獨特圖示呈現。
請注意，Core Web Vitals 的評估程序並未變更。網站體驗核心指標 FID、LCP 和 CLS 可在網頁或來源層級匯總。如果匯總資料在所有三個指標中都足夠，只要所有三個指標的第 75 個百分位數為「良好」，匯總資料就會通過 Core Web Vitals 評估。否則匯總功能無法通過評估。如果匯總資料的 FID 資料不足，只要 LCP 和 CLS 的第 75 個百分位數都為「良好」，匯總資料就會通過評估。如果 LCP 或 CLS 的資料不足，就無法評估網頁或來源層級的匯總資料。
行動版和電腦版成效的標籤
我們已變更頂端的導覽選單，並在報表頁面上提供行動版和電腦版的連結。連結現在可輕鬆顯示，並清楚標示資料顯示的平台。這麼做也有助於讓導覽列更簡潔。
來源摘要
點選核取方塊後，系統會顯示「來源摘要」，其中會列出來源中所有網頁的匯總 CrUX 分數。我們已將這份報表的「來源」部分移至「欄位資料」部分的新分頁。
其他實用資訊
報表現在會在每個欄位底部加入新的資訊部分，以及實驗室資訊卡，提供以下關於取樣資料的詳細資料：
- 資料收集期間
- 造訪時間長度
- 裝置
- 網路連線數
- 樣本數量
- Chrome 版本
這項資訊應可強化實驗室資料和實地資料的差異，並協助先前不確定這兩個資料來源 (實驗室和實地) 有何差異的使用者。
展開檢視畫面
我們推出了新的「展開檢視」功能，可在欄位資料部分新增深入查看功能，讓您查看網站體驗核心指標的詳細資料。
頁面圖片
我們已移除已載入頁面的圖片，該圖片會顯示在欄位資料旁邊。實驗室資料區段會顯示顯示載入順序的頁面圖片和縮圖。
如需最新的產品說明文件，請前往 https://developers.google.com/speed/docs/insights/.。
web.dev/measure 更新
為減少效能工具箱中不同工具之間的不一致性，我們也更新了 web.dev/measure，讓這項工具直接由 PageSpeed Insights API 提供支援。
先前，開發人員會透過 PSI 工具和 /measure 同時執行報表，並查看不同的 Lighthouse 數字。差異的主要原因之一，是因為 /measure 會將所有測試從美國發起 (因為它先前有位於美國的雲端後端)。
由於 /measure 會直接呼叫與 PSI 使用者介面相同的 API，開發人員在使用 PSI 和 /measure 時，將可獲得更一致的體驗。我們也根據使用者使用這項工具的方式，對 /measure 進行了一些調整。這表示 /measure 的登入體驗將會移除，但最常使用的功能 (查看多個類別) 仍可供使用。
PSI today
先回顧一下，我們來看看目前的 PageSpeed Insights 報告提供哪些資訊。PSI 報表會在個別分頁中提供行動裝置和電腦裝置的成效資料，並提供網頁改善建議。每個案例的報表主要元件都類似，包括：
成效分數：成效分數會顯示在 PSI 報表頂端，並概略說明整體網頁成效。這個分數是透過執行 Lighthouse 來收集及分析網頁的研究室資料，90 分以上視為高分，50 到 90 分為需要改善，低於 50 分則為不佳。
現場資料：現場資料來自 CrUX 報告資料集，可提供實際使用者體驗的洞察資料。資料包括首次顯示內容所需時間 (FCP) 等指標，以及 Core Web Vitals 評估指標 (首次輸入延遲 (FID)、最大內容繪製 (LCP) 和累積版面配置位移 (CLS)。除了指標值之外，您還可以查看特定指標值為「良好」、「需要改善」或「不良」的網頁分布情形，分別以綠色、琥珀色和紅色長條圖表示。系統會根據 CrUX 資料集中使用者的網頁載入次數，顯示分布情形和分數。系統會計算過去 28 天的分數，但新網頁可能沒有足夠的實際使用者資料，因此無法計算分數。
來源摘要：使用者可以點選「顯示來源摘要」核取方塊，查看過去 28 天內，從相同來源提供的所有網頁的指標匯總分數。
研究室資料：研究室效能分數是使用 Lighthouse 計算得出，可在受控環境中收集資料，協助您偵錯效能問題。這份報表會使用First Contentful Paint、Largest Contentful Paint、Speed Index、Cumulative Layout Shift、Time to Interactive 和Total Blocking Time等指標來顯示效能。系統會為每項指標評分，並加上「良好」、「需要改善」或「不佳」的圖示標籤。本節提供的資料可協助您在發布前找出效能瓶頸，並診斷問題，但可能無法擷取實際問題。
稽核：這個部分會列出 Lighthouse 執行的所有稽核，並列出通過稽核的項目，以及改善機會和其他診斷資訊。
目前 PSI 設計的挑戰
如上方螢幕截圖所示，實驗室和實地資料的不同資料點並未清楚區隔，因此新手開發人員可能不容易瞭解資料的背景資訊，也不知道下一步該做什麼。這項誤解導致許多「如何」的部落格文章，說明如何解讀 PSI 報表。
我們希望透過重新設計，讓開發人員更容易解讀報表，進而快速從產生 PSI 報表，轉而採取報表內含的洞察資料所提供的行動。
瞭解詳情
如要進一步瞭解效能工具更新，請觀看 Chrome 開發人員高峰會 2021 的開幕致詞。我們會持續通知 PSI 的發布日期，以及 web.dev/measure 的異動。
感謝 Milica Mihajlija、Philip Walton、Brendan Kenny 和 Ewa Gasperowicz 對本文提供的意見回饋