評估網站體驗核心指標的工具

你常用的開發人員工具現在可評估網站體驗核心指標。

Addy Osmani
Addy Osmani
X GitHub
Elizabeth Sweeny
Elizabeth Sweeny
X GitHub

我們最近公布的網站體驗指標計畫，針對所有網站提供優質網路使用者體驗的重要品質信號提供整合式指引。很高興在此宣布，Google 的所有熱門網站開發人員工具現在都支援網站體驗核心指標的評估作業，方便您更輕鬆地診斷及修正使用者體驗問題。內含 Lighthouse、PageSpeed Insights、Chrome 開發人員工具、Search Console、web.dev 的測量工具、Web Vitals Chrome 擴充功能和全新 (!) Chrome UX Report API。

Google 搜尋現在納入「網站體驗核心指標」來評估網頁體驗的基礎，因此務必要盡可能提供所需指標，並採取行動。

支援網站體驗核心指標指標的 Chrome 和搜尋工具摘要

如要透過網站體驗核心指標改善使用者體驗，請嘗試下列工作流程：

  • 使用 Search Console 新推出的網站體驗核心指標報告，找出需要處理的網頁群組 (以實際資料為根據)。
  • 找出需要運作的網頁後，請使用 PageSpeed Insights (採用 Lighthouse 和 Chrome 使用者體驗報告) 診斷網頁上的研究室和現場問題。您可以透過 Search Console 取得 PageSpeed Insights (PSI)，也可以直接在 PSI 上輸入網址。
  • 準備好在研究室中在本機最佳化網站了嗎？使用 Lighthouse 和 Chrome 開發人員工具評估網站體驗核心指標，並取得具體的修正指引。Web Vitals Chrome 擴充功能可讓您即時查看電腦指標。
  • 需要網站體驗核心指標的自訂資訊主頁嗎？針對現場資料使用最新的 CrUX 資訊主頁或新的 Chrome UX Report API，或針對研究室資料使用 PageSpeed Insights API。
  • 在尋找相關指引嗎？web.dev/measure 能評估網頁，運用 PSI 資料提供一系列最佳化指南和程式碼研究室，以便進行最佳化。
  • 最後，請將 Lighthouse CI 用於提取要求，確保在將變更部署至實際工作環境前，網站體驗核心指標中沒有任何迴歸問題。

因此，我們就來深入瞭解每項工具的具體更新！

燈塔

Lighthouse 是一項自動化網站稽核工具，可協助開發人員診斷問題並找出改善網站使用者體驗的機會。並衡量研究室環境中的多種使用者體驗品質，包括效能和無障礙設計。最新版本的 Lighthouse (6.0，2020 年 5 月中旬) 包含其他稽核項目、新指標，以及新撰寫的效能分數。

Lighthouse 6.0 顯示最新的網站體驗核心指標指標

Lighthouse 6.0 在報表中推出了三項新指標。這裡的其中兩個新指標為最大內容繪製 (LCP) 和累計版面配置位移 (CLS)，是實作網站體驗核心指標的研究室，可提供重要的診斷資訊，協助提升使用者體驗。有鑑於評估使用者體驗的重要性，新指標不僅評估及納入報表，在計算效能分數時也會將這些指標列入考慮。

Lighthouse 的第三個新指標是「Total Blocking Time」(總封鎖時間) (TBT)，與「首次輸入延遲時間」(FID) (FID) 欄位指標有關，這是另一項「網站體驗核心指標」指標。您可根據 Lighthouse 報告提供的建議和分數進行最佳化，藉此打造最佳使用者體驗。

Lighthouse 發電的所有產品都已更新為最新版本，包括 Lighthouse CI。在系統合併與部署前，您可以輕鬆評估提取要求適用的 Core Web Vitals。

Lighthouse CI 顯示採用 Largest Contentful Paint 的差異檢視畫面

如要進一步瞭解 Lighthouse 的最新動態，請參閱 Lighthouse 6.0 最新功能的網誌文章。

PageSpeed Insights

PageSpeed Insights (PSI) 會回報網頁的研究室和實際效能，呈現在行動裝置和電腦上的效能。這項工具會概略說明網頁的實際使用者體驗 (資料來源為 Chrome 使用者體驗報告)，以及一系列可行的建議，協助網站擁有者改善網頁體驗 (由 Lighthouse 提供)。

PageSpeed Insights 和 PageSpeed Insights API 經過升級後，現在可在背景使用 Lighthouse 6.0，而且現在可在研究室和報表的領域部分評估網站體驗核心指標！網站體驗核心指標會以藍色列名標註，如下所示。

針對現場和研究室顯示網站體驗核心指標的 PageSpeed Insights

Search Console 能為網站擁有者提供清楚而需要處理的網頁群組總覽，而 PSI 則有助於找出各個網頁上改善網頁體驗的機會。在 PSI 中，您可以從報告頂端清楚瞭解網頁是否符合所有「Core Web Vitals」核心指標的良好體驗門檻 (由「通過 Core Web Vitals 評估」或「未通過 Core Web Vitals 評估」表示)。

CrUX

Chrome 使用者體驗報告 (CrUX) 是一份公開資料集，內含數百萬個網站的實際使用者體驗資料。會評估所有網站體驗核心指標的欄位版本。與研究室資料不同的是，CrUX 資料來自實際領域的選擇加入的使用者。有了這些資料，開發人員就能瞭解實際使用者體驗在自家網站 (甚至競爭對手網站上) 的分佈。即使網站上沒有 RUM，您還是可以透過 CrUX 快速評估網站體驗核心指標。BigQuery 的 CrUX 資料集包含所有 Core Web Vitals 的精細成效資料，且會在來源層級的每月快照中取得。

要確實瞭解網站在使用者體驗上的成效，唯一的方法就是實際評估使用者載入並與網站互動的情形。這種測量類型通常稱為「實際使用者監控」，簡稱 RUM。即使網站上沒有 RUM，您還是可以透過 CrUX 快速評估網站體驗核心指標。

CrUX API 簡介

今天我們很高興宣布推出 CrUX API，您可以透過這個 API 輕鬆快速地整合開發工作流程，並針對下列領域指標整合開發工作流程、來源和網址層級的品質評估：

  • 最大內容繪製
  • 累計版面配置轉移
  • 首次輸入延遲時間
  • 首次顯示內容所需時間

開發人員可以查詢來源或網址，然後依據不同的板型規格區隔結果。API 會每日更新，並提供前 28 天的資料摘要 (與每月匯總的 BigQuery 資料集不同)。這個 API 也有相同的寬鬆公用 API 配額，也就是 PageSpeed Insights API 這個 API (每天 25,000 個要求)。

以下示範如何使用 CrUX API 來視覺化呈現網站體驗核心指標，以及良好、需要改善和不佳的分佈情形：

顯示網站體驗核心指標指標的 Chrome User Experience Report API 示範

我們會在日後的版本中擴充 API，以存取其他 CrUX 資料集維度和指標。

CrUX 資訊主頁重新設計

透過全新設計的 CrUX 資訊主頁，您可以輕鬆追蹤來源的成效變化，還能用來監控所有網站體驗核心指標指標的分佈情形。如要開始使用資訊主頁，請前往 web.dev 參閱教學課程。

Chrome 使用者體驗報表資訊主頁，顯示新的到達網頁中的網站體驗核心指標指標

我們推出了新的網站體驗核心指標到達網頁，讓您一眼就能瞭解網站成效。歡迎針對所有 CrUX 工具提供意見。如要分享想法和問題，請透過 @ChromeUXReport Twitter 帳戶或 Google 網路論壇與我們聯絡。

Chrome 開發人員工具效能面板

在「體驗」部分中對版面配置位移事件進行偵錯

Chrome 開發人員工具的「效能」面板新增「體驗」專區，可協助偵測非預期的版面配置位移。這項功能有助於找出並修正網頁含有累計版面配置位移問題的視覺不穩定問題。

在「Performance」面板中以紅色記錄顯示累計版面配置位移

選取版面配置位移，即可在「Summary」分頁中查看詳細資料。如要以視覺化方式呈現位移發生的位置，請將滑鼠遊標懸停在「Moved from」和「Moved to」欄位。

在頁尾顯示總封鎖時間，偵錯互動準備

總封鎖時間 (TBT) 指標可透過研究室工具進行評估，是首次輸入延遲時間的最佳替代指標。TBT 會測量首次顯示內容所需時間 (FCP) 到互動時間 (TTI) 之間的總時長，也就是主執行緒因長時間遭到封鎖而不造成輸入回應的時間。效能最佳化可以提升研究室的 TBT，進而提升原領域的 FID。

開發人員工具效能面板的頁尾顯示總封鎖時間

評估網頁效能時，Chrome 開發人員工具的「效能」面板頁尾現已顯示 TBT：

  1. 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
  2. 按一下「成效」分頁標籤。
  3. 按一下「錄製」。
  4. 手動重新載入頁面。
  5. 等待頁面載入，然後停止記錄。

詳情請參閱開發人員工具新功能 (Chrome 84 版)。

Search Console

Search Console 新推出的網站體驗核心指標報告會根據 CrUX 實際資料，找出網站上需要處理的網頁群組。網址成效的分類依據包括狀態、指標類型和網址群組 (由類似網頁組成的群組)。

Search Console 新推出的網站體驗核心指標報告

這份報表是根據網站體驗核心指標的三項指標產生：LCP、FID 和 CLS。如果為某個網址收集的資料量未達到這些指標的最低閾值，報告中就不會列出該網址。試用新報表，全面掌握來源成效。

找出有網站體驗核心指標相關問題的網頁類型後，即可使用 PageSpeed Insights 瞭解代表性網頁的具體最佳化建議。

web.dev

https://pagespeed.web.dev/ 可讓您評估網頁在特定期間內的效能，並提供一份優先的指南和程式碼研究室清單，說明如何改善。評估數據是由 PageSpeed Insights 所提供。這個評估工具現在也支援網站體驗核心指標指標，如下所示：

使用 web.dev 評估工具評估網站體驗核心指標指標趨勢，並取得優先指引

網站體驗指標擴充功能

網站體驗指標擴充功能會即時測量 (電腦版) Google Chrome 的三項網站體驗核心指標指標。這樣一來，您就能在開發工作流程中及早發現問題，也能做為診斷工具，在使用者瀏覽網站時評估網站體驗核心指標的成效。

您現在可以從 Chrome 線上應用程式商店安裝這個擴充功能！希望你覺得實用。歡迎您對專案的 GitHub 存放區提供意見，協助我們改善這項功能。

透過網站體驗指標 Chrome 擴充功能即時顯示網站體驗核心指標

簡短亮點

大功告成！接下來可採取的做法：

  • 使用開發人員工具中的 Lighthouse 改善使用者體驗，並確保自己在這個領域運用網站體驗核心指標，成功奠定良好基礎。
  • 使用 PageSpeed Insights 比較研究室和網站體驗核心指標的效能。
  • 歡迎試用全新的 Chrome User Experience Report API，輕鬆存取來源和網址過去 28 天在網站體驗核心指標中的成效。
  • 您可以使用開發人員工具「效能」面板中的「體驗」部分和頁尾，深入分析特定網站體驗核心指標並進行偵錯。
  • 透過 Search Console 的 Core Web Vitals 報表，瞭解來源在業界的成效摘要。
  • 使用網站體驗核心指標，即時追蹤網頁在網站體驗核心指標中的效能。

我們將在 6 月於 web.dev Live 上發布更多有關網站體驗核心指標工具的資訊。訂閱即可收到活動的最新消息！

~ 作者：Elizabeth 和 Addy，WebPerf Janitors