結合多項 Google 工具，有效稽核、改善及監控網站。
發布日期：2020 年 5 月 28 日
Core Web Vitals 是一組指標，可根據載入效能、使用者輸入回應速度和版面配置穩定性等條件，評估使用者體驗。
本指南將探討改善網站 Core Web Vitals 的工作流程，但工作流程的起點取決於您是否收集自己的欄位資料。至於何時結束，則取決於您認為哪些 Google 工具能有效診斷及修正使用者體驗問題。
Core Web Vitals 最好在實際環境中評估
Core Web Vitals 專門用來評估使用者對網站的體驗，是以使用者為中心的指標。Lighthouse 等實驗室工具是診斷工具，可找出潛在的效能問題和最佳做法。實驗室工具是在特定預先定義的條件下執行，可能無法反映使用者體驗的實際 Core Web Vitals 評估結果。
舉例來說，Lighthouse 是一種實驗室工具，可在模擬的電腦或行動環境中，透過模擬節流執行測試。雖然在嘗試診斷效能問題時，模擬較慢的網路和裝置條件很有幫助，但這只是網路條件和裝置功能多樣性的一小部分，因此可能無法反映網站使用者體驗。
Lighthouse 等實驗室工具通常也會以全新訪客的身分，對網頁進行「冷載入」。這通常是載入速度最慢的情況，但實際上，如果訪客曾造訪過網站，或是在網站上瀏覽，可能已快取部分素材資源。新訪客和工具也可能因為 Cookie 通知橫幅或其他內容，而有不同的網站體驗。
簡而言之，雖然實驗室工具可以指出潛在的效能問題，並協助您偵錯和疊代，但可能無法代表有多少訪客實際體驗您的網站。使用欄位資料評估實際成效，並使用 Lighthouse 等實驗室工具診斷如何改善成效。另請參閱「使用 Lighthouse 的時機」一節。
Google 會透過 Chrome 使用者體驗報告 (CrUX) 評估 Core Web Vitals。這份公開資料集收集自實際 Chrome 使用者，許多 Google 和第三方工具都以這項資料集為基礎，回報網站的 Core Web Vitals。
不過，CrUX 也有其限制。通常可以告訴您何時發生問題，但往往沒有足夠的資料告訴您原因。
盡可能收集自己的實測資料
如要改善網站在實際環境中的效能，您建立的資料集就是最佳選擇。首先，您需要收集網站訪客的實測資料。具體做法取決於貴機構的規模，以及您是否要付費使用第三方解決方案或自行建立。
付費解決方案幾乎一定會評估 Core Web Vitals (和其他成效指標)，且通常會提供各種工具，協助您深入分析結果資料。如果大型組織擁有大量資源，這可能是首選方法。
不過，您可能不是大型組織的一員，甚至沒有能力負擔第三方解決方案。在這種情況下，Google 的 web-vitals 程式庫可協助您收集「所有」網站體驗指標。不過，您必須負責回報、儲存及分析這些資料。
如果您已使用 Google Analytics，但尚未開始收集自己的現場資料，可以考慮使用 web-vitals 程式庫，將現場收集到的 Web Vitals 傳送至 Google Analytics，並使用 GA4 的 BigQuery Export 功能製作資料報表。
瞭解 Google 工具
無論是否收集自己的欄位資料，您都可以使用多種 Google 工具分析 Core Web Vitals。建立工作流程前，請先概略瞭解各項工具，判斷哪些工具最適合你。
Chrome 使用者體驗報告 (CrUX)
如前所述，CrUX 是公開資料集，收集了部分 Google Chrome 實際使用者在數百萬個網站上的現場資料。其中包含 Core Web Vitals 指標，以及流量充足網站的其他指標。
CrUX 可做為來源層級的每月 BigQuery 資料集，或網址或來源層級的每日 API，前提是網址或來源在 CrUX 資料集中有足夠的樣本。您可以透過各種 CrUX 工具取得 CrUX 資料，包括程式輔助存取工具和視覺化工具。
CrUX 的使用時機
即使您自行收集現場資料，CrUX 仍有其用處。雖然 CrUX 僅代表一部分 Chrome 使用者，但比較網站的現場資料，看看與 CrUX 資料是否一致，仍有助於瞭解網站效能。每種方法各有優缺點，可能導致結果有所差異。如果網站完全沒有收集任何欄位資料，CrUX 就能提供高層級總覽，特別實用 (前提是網站資料集有納入網站)。
你可以直接使用 CrUX，或使用其他工具 (包括下文提及的工具)。直接使用 CrUX 資料集 (透過 BigQuery 或 API)，有助於揭露其他工具未顯示的資料，例如其他工具通常無法提供國家/地區層級資料，或查看 CrUX 中的其他指標，這些指標通常也不會顯示在其他工具中。
不適合使用 CrUX 的情況
CrUX 僅代表 Chrome 使用者，而且只涵蓋部分 Chrome 使用者。完整的 RUM 解決方案可涵蓋 Chrome 和其他支援 Web Vitals 指標的瀏覽器，提供更多體驗。
如果網站流量不足，就不會顯示在 CrUX 資料集中。如果遇到這種情況，您需要自行收集欄位資料，瞭解網站在實際環境中的成效，因為 CrUX 無法提供這項資訊。或者，您必須仰賴實驗室資料，但如前所述，這類資料可能不具代表性。
CrUX 提供的資料是過去 28 天的累計平均值，因此不適合在開發期間使用，因為改善項目需要一段時間才會反映在 CrUX 資料集中。
最後，CrUX 是公開資料集，因此可提供的資訊量和查詢資料的方式有限。擷取自己的 RUM 資料，可收集更多詳細資料 (例如 LCP 元素)，並進一步區隔資料，找出問題所在。與未登入的使用者相比，登入的使用者是否能享有更優質的 Core Web Vitals？LCP 緩慢的使用者是否具有特定 LCP 元素？哪些互動會導致 FID 和 INP 值偏高？
PageSpeed Insights (PSI)
PSI 是一項工具，可針對特定網頁，回報 CrUX 的現場資料「和」Lighthouse 的實驗室資料。詳情請參閱各節。
PSI 的使用時機
PSI 非常適合用來評估行動裝置和電腦使用者在網頁層級或來源層級的 CrUX 效能。如果想初步瞭解網頁或網站的 Core Web Vitals，這項工具是不錯的選擇。此外，你也可以查看其他網站 (例如競爭對手) 的 Core Web Vitals 資料。
PSI 也會提供 Lighthouse 資料，在指標一致的情況下，提供實用建議來改善 Core Web Vitals。如果兩者不一致，Lighthouse 建議的關聯性可能會降低。
由於 Lighthouse 是從伺服器執行，因此可以形成比從開發人員工具執行 Lighthouse 更一致的基準。
不適合使用 PSI 的情況
PSI 僅適用於公開網址，無法用於不公開的開發網站。
網站必須符合特定資格條件 (包括網站熱門程度門檻)，系統才會提供 CrUX 資料。如果網頁或來源沒有 CrUX 資料，PSI 就只能顯示 Lighthouse 研究室資料，因此實用性較低。
同樣地，如果只有來源層級的 CrUX 資料，而非受測的特定網址，則將來源層級欄位資料與網頁層級實驗室診斷資料建立關聯的實用性也會受限。來源層級欄位資料仍是非常實用的資訊，可做為網站效能摘要，Lighthouse 稽核也可能有幫助，但在這種情況下，應格外謹慎。
最後，如果 CrUX 提供網頁層級資料，但與 Lighthouse 實驗室資料不同，Lighthouse 的建議可能價值有限。載入後 CLS 問題和互動性 Core Web Vitals (FID 和 INP) 特別容易發生這種情況，因為實驗室稽核對這類問題的幫助不大。
Search Console
Search Console 會評估網站的搜尋聯播網流量和成效，包括 Core Web Vitals。只有確認網站擁有權的網站擁有者才能使用。
Search Console 的一項實用功能，是將類似的網頁 (例如使用相同範本的網頁) 歸入單一群組評估。Search Console 也提供 Core Web Vitals 報表，資料來源為 CrUX 的實際資料。
Search Console 的使用時機
Search Console 適合開發人員和非開發人員使用，能以其他 Google 工具無法提供的方式，評估搜尋和網頁成效。這項工具會呈現 CrUX 資料，並依相似度將網頁分組，提供全新洞察資料，說明成效提升對整個網頁類別的影響。
不適合使用 Search Console 的情況
如果專案使用不同的第三方工具，依相似度將網頁分組，或網站未列入 CrUX 資料集，Search Console 可能就不適用。
如果群組中的範例網頁與群組中其他網頁有不同的特性，網頁分組也可能會令人困惑，例如群組整體未通過特定 Core Web Vitals，但範例網頁似乎都通過相同的 Core Web Vitals。如果群組包含長尾網頁或不常造訪的網頁，載入速度可能會較慢，因為這些網頁不太可能快取。如果長尾中這類網頁的數量夠多，可能會影響群組的整體通過率。
燈塔
Lighthouse 是一項實驗室工具，可提供改善網頁效能的具體建議。Lighthouse 使用者流程也允許開發人員編寫互動流程指令碼，以便在載入網頁後進行效能測試。
Lighthouse-CI 是相關工具，可在專案建構和部署期間執行 Lighthouse，協助進行效能迴歸測試。這項工具會提供 Lighthouse 報表和提取要求，並追蹤一段時間內的成效指標。
Lighthouse 的使用時機
在開發期間，Lighthouse 是在本機和測試環境中找出效能改善機會的絕佳工具。在建構和部署階段，Lighthouse CI 同樣適用於測試和正式環境，在這些環境中，需要進行效能迴歸測試，以維持良好的使用者體驗。
不適合使用 Lighthouse 的時機
Lighthouse (或 Lighthouse CI) 無法取代實際資料。Lighthouse 主要是診斷工具，會列出預先定義載入網頁作業的潛在問題和最佳做法。這項工具提供的建議不一定符合使用者體驗到的效能。
雖然 Lighthouse 可透過 PageSpeed Insights 等工具診斷正式版網站，但最好在開發和持續整合環境中使用 Lighthouse，在效能問題進入正式版前解決。
您也可以在 Chrome 開發人員工具的「效能」面板中，透過「深入分析」取得 Lighthouse 提供的稽核結果，進一步分析網頁效能。
Chrome 開發人員工具中的「Performance」面板
Chrome 開發人員工具是一組瀏覽器內建的開發工具，包括「Performance」面板。「效能」面板是實驗室工具，包含兩種「模式」：
首次開啟「效能」面板時，「即時指標」畫面會顯示目前的 Core Web Vitals 指標，並可從 CrUX 匯入欄位資料。當您與網頁互動，嘗試找出效能問題時，這項工具可做為「即時」效能檢視畫面，特別適合用來找出 CLS 和 INP 指標可能顯示的載入後問題。
其次，開發人員可以透過「成效」面板，擷取網頁載入期間或記錄時間範圍內所有網頁活動的設定檔 (或追蹤記錄)。這個檢視畫面可深入分析觀察到的所有內容，包括網路、轉譯、繪製和指令碼活動等維度，以及網頁的 Core Web Vitals。此外，這項工具也提供與 Lighthouse 類似的深入分析。
「效能」面板的使用時機
開發人員應使用「效能」面板，深入瞭解特定網頁效能。
即時指標檢視畫面可用來快速瞭解網頁目前的效能特性，並在與網頁互動時找出潛在問題。
追蹤記錄檢視畫面特別適合用來偵錯影響 INP 的回應問題。找出回應不佳且可重複的互動後，Performance 面板可提供大量資料，說明瀏覽器中發生的情況，協助您瞭解問題，包括主執行緒封鎖、JavaScript 呼叫堆疊、轉譯工作等。
不適合使用「Performance」面板的情況
「效能」面板是開發人員工具，主要提供實驗室資料，但也會提供 CrUX 的部分現場資料。無法取代實際資料。
追蹤記錄檢視畫面包含大量偵錯資訊，但正因如此，新手開發人員或非開發人員可能難以理解。不過，面板開啟時會顯示即時指標檢視畫面，為不需要完整詳細資料的使用者提供更易於使用的介面，解決了這個問題。
確保網站 Core Web Vitals 保持良好狀態的三步驟工作流程
改善使用者體驗時，最好將過程視為持續循環。如要改善 Core Web Vitals 和其他成效指標，可以採取以下做法：
- 評估網站健康狀態並找出痛點。
- 偵錯及最佳化。
- 使用持續整合工具進行監控，找出並避免迴歸問題。
步驟 1：評估網站健康狀態，找出可改善之處
建議先從實測資料著手，評估網站健康狀態。
- 使用 PageSpeed Insights 查看來源的整體 Core Web Vitals 體驗指標，以及個別網址的特定資訊。
- Search Console 的網頁分組功能可有效找出需要改善的網頁。
- 如果您有 RUM 資料，通常最適合用來找出有問題的特定網頁或流量區隔。
無論是分析自行收集的欄位資料，還是 CrUX 資料，這都是至關重要的第一步。如果沒有收集欄位資料，CrUX 資料可能足以提供指引，前提是網站有出現在資料集中。
使用 PageSpeed Insights 分析網站效能
PageSpeed Insights 會顯示 CrUX 資料，涵蓋過去 28 天內第 75 個百分位數的使用者體驗資料。也就是說，如果 75% 的使用者體驗符合特定指標設定的門檻，則該體驗會視為「良好」。
如果您想查看特定網頁的成效，請使用該網頁。開始進行最佳化時，如要全面瞭解網站，建議從首頁著手，因為首頁通常是許多網站上最熱門的網頁之一。
一開始請先著重在 PSI 的「實際使用者體驗」部分。最多可看到四種資料檢視：所輸入網址和整個來源的行動版和電腦版。比較這些項目，看看有何不同。行動裝置通常比電腦效能低，因為行動裝置是資源受限的裝置，且網路連線可能較不穩定。如果網址和來源資料有顯著差異，請嘗試瞭解原因：首頁通常是使用者造訪的第一個網頁 (也就是到達網頁)，因此載入速度可能比來源慢，使用者會受到未預先載入的瀏覽器快取影響。後續網頁的載入速度可能會更快，因為任何共用素材資源都會快取，進而降低匯總來源層級資料。
PSI 也會顯示三項 Core Web Vitals (LCP、CLS 和 INP)，以及診斷 TTFB 和 FCP 指標。是否有任何 Core Web Vitals 未達標？差距多少？這有助於找出需要加強的部分。
瞭解這些數字之間的關係，尤其是 LCP。如果 LCP 速度緩慢 (如本例所示)，請查看 TTFB 和 FCP，這兩項指標都是 LCP 的里程碑。在這個範例中，TTFB 為 1.8 秒，因此很難達到 LCP 良好狀態的建議門檻 (2.5 秒)。這表示後端速度緩慢 (伺服器問題或缺少 CDN)、網路速度較慢，或重新導向延遲了第一個 HTML 位元組。詳情請參閱最佳化 TTFB 指南。FCP 則需要再多一秒，這可能再次表示網路速度較慢。在本例中，LCP 與 FCP 的時間差距不大，表示網頁載入後，LCP 資源已充分最佳化。CrUX 現在也會在資源類型和子部分中顯示更多診斷資訊，這也有助於診斷 LCP 問題。
如果是 CLS，請查看 CrUX CLS 和 Lighthouse CLS 分數，判斷這是載入 CLS 問題 (Lighthouse 會偵測並提供建議)，還是 Lighthouse 無法偵測的載入後 CLS 問題。詳情請參閱最佳化 CLS 指南。
如要瞭解回應速度，請查看 INP 分數。請查看 Lighthouse 的 TBT 稽核，瞭解網頁初次載入時是否會執行大量 JavaScript 處理作業，這可能會影響 INP。INP 是較難改善的指標，詳情請參閱最佳化 INP 指南。
在 Search Console 中找出成效不佳的網頁
PSI 適合用來測試特定網址或整個網站，Search Console 則可協助你針對特定類型的網頁進行調整。如果許多網頁有共同主題或技術，且 Search Console 能成功識別，這項功能就特別實用。
Search Console 中的 Core Web Vitals 報告會顯示網站效能的整體情況，但你仍可深入查看需要處理的特定網頁。此外，你也可以透過 Search Console 執行下列操作：
- 找出需要改善的個別網頁群組，以及提供良好使用者體驗的網頁群組。
- 依狀態、指標和類似網頁群組 (例如電子商務網站上的產品詳細資料頁面)，取得網址成效的精細資料。
- 取得詳細報表，瞭解行動裝置和電腦上各個使用者體驗品質類別的網址。
找出特定網頁後，您可以使用 PSI (如前所述) 進一步瞭解這些網頁的問題。
步驟 2：偵錯及最佳化
在步驟 1 中，你應該已找出需要改善成效的網頁，以及要改善的 Core Web Vitals 指標。您可以使用 Google 工具取得更多資訊，瞭解根本原因並找出問題。
- 查看 Lighthouse 稽核，取得網頁的概略指引
- 使用「Performance」面板的即時指標檢視畫面，即時分析 Core Web Vitals。
- 使用「效能」面板追蹤功能，偵錯效能問題並測試程式碼變更。
如需更詳細的指引，請參閱下列指南：
透過 Lighthouse 找出商機
PageSpeed Insights 會為您執行 Lighthouse。您也可以透過 Chrome 開發人員工具執行 Lighthouse，在本機驗證修正項目，不過「效能」面板 (下文會介紹) 是更全面的工具，可用於在本機找出及修正效能問題。
重點在於確認 Lighthouse 稽核是否重現您要解決的問題 (例如 LCP 緩慢或 CLS 問題)。Lighthouse 預設只會評估載入網頁期間的使用者體驗。由於這是實驗室工具，因此也會排除 INP，改用 TBT。
如果 Lighthouse 指標顯示的問題與您嘗試解決的問題類似，稽核中的豐富資訊可協助您找出問題並建議解決方案。
您可以篩選稽核項目，只查看感興趣的 Core Web Vitals，專注於修正與特定指標相關的問題：
針對 INP，請使用 TBT 稽核找出可能影響這些指標的問題，但請注意，如果沒有互動，Lighthouse 的診斷功能會受到限制。
使用 Chrome 開發人員工具的即時指標畫面，即時分析
Chrome 開發人員工具「Performance」面板中的即時指標畫面，會在載入網頁和瀏覽網頁時，即時顯示 Core Web Vitals。因此，這項工具可以擷取 INP，以及載入後發生的版面配置位移。您也可以查看各項指標的詳細資訊：
這個檢視畫面提供許多實用資訊，有助於找出效能問題，甚至能從 CrUX 擷取欄位資訊。如要進一步瞭解，可以透過追蹤記錄深入分析。
使用「效能」面板深入分析
Chrome 開發人員工具的「效能」面板可讓您記錄特定時間範圍內的所有網頁行為設定檔 (或追蹤記錄)。
您可以在「洞察」側邊面板中查看成效洞察。此外，系統也會顯示 Core Web Vitals 指標，以及這些指標的欄位值 (如有)。
「Layout Shifts」軌跡會醒目顯示版面配置位移，點選這些位移可進一步瞭解位移元素，以便偵錯 CLS。
追蹤記錄底部的「Timings」會顯示 LCP 等重要時間點。按一下即可瞭解詳情。
長時間任務 (可能導致 INP 問題) 也會在火焰圖中以紅色三角形醒目顯示。
這些功能以及「成效」面板其他部分的資訊，可協助您判斷修正措施是否對網頁的 Core Web Vitals 產生影響。
在實際環境中對 Core Web Vitals 進行偵錯
實驗室工具不一定能找出影響使用者的所有 Core Web Vitals 問題原因。這也是為什麼收集自己的實測資料非常重要，因為這類資料會考量實驗室資料無法考量的因素。
詳情請參閱「對實際環境中的效能進行偵錯」。
步驟 3：監控變更
修正問題後，請確認修正措施已發揮預期效果，且沒有新的問題影響 Core Web Vitals。這需要監控效能問題，做為開發人員工作流程的一部分，避免效能問題發布至實際工作環境，並定期監控現場資料，確保情況確實如此。
在持續整合 (CI) 環境中監控效能要求
Lighthouse-CI 可讓您自動對程式碼修訂版本執行 Lighthouse 稽核，防止效能迴歸問題進入程式碼。這項工具可檢查效能時間 (可能會有變化)，或僅檢查效能稽核，做為程式碼檢查工具，防止程式碼中出現不良做法。
使用欄位資料查看網站健康趨勢
雖然您應該盡可能在正式發布前找出並修正所有效能問題，但使用 RUM 監控現場資料，對於找出任何遺漏的問題至關重要。市面上有許多商用 RUM 產品可協助您完成這項工作。web-vitals JavaScript 程式庫可自動收集網站的欄位資料，並視需要使用這些資料，為自訂資訊主頁和快訊系統提供資料。
如果網站沒有 RUM 解決方案，您可以使用各種 CrUX 工具，對欄位資料進行基本趨勢分析。
結論
如要確保使用者享有快速愉悅的體驗，必須秉持效能優先的心態，並採用工作流程來確保進度。只要使用合適的工具和流程進行稽核、偵錯和監控，就能打造優質的使用者體驗，並將 Core Web Vitals 保持在良好範圍內。