本頁面由 Cloud Translation API 翻譯而成。

成效面板：分析網站成效

Dale St. Marthe

使用「成效」面板分析網站成效。

總覽

您可以使用「效能」面板記錄網頁應用程式的 CPU 效能設定檔。分析設定檔，找出潛在效能瓶頸，並瞭解如何最佳化資源使用情形。

使用「效能」面板執行下列操作：

記錄效能設定檔。
變更擷取設定。
分析成效報表。

如需有關改善網站效能的完整指南，請參閱「分析執行階段效能」。

開啟「效能」面板

如要開啟「Performance」面板，請開啟「DevTools」，然後從頂端的一系列分頁中選取「Performance」。

或者，您也可以透過指令選單開啟「效能」面板：

開啟開發人員工具。
按下以下任一組合鍵，開啟指令選單：
macOS：Command + Shift + P 鍵
Windows、Linux 和 ChromeOS：Control + Shift + P 鍵
開始輸入 Performance panel，選取「顯示成效面板」，然後按下 Enter 鍵。

即時觀測 Core Web Vitals

開啟「Performance」面板後，系統會立即擷取並顯示本機 Largest Contentful Paint (LCP) 和 Cumulative Layout Shift (CLS) 指標，並顯示分數 (良好、需要改善或不良)。

如果您與網頁互動，效能面板也會擷取本地的Interaction to Next Paint (INP) 及其分數，除了 LCP 和 CLS 之外，還會提供網頁使用網路連線和裝置的完整Core Web Vitals 概覽。

「成效」面板會在三個指標資訊卡下方提供已擷取的互動清單。如要清除清單，請依序點選「封鎖」「清除」。

如要查看指標分數的詳細資料，請將滑鼠游標懸停在指標值上，即可查看工具提示。

比較自己的使用體驗和使用者的使用體驗

您也可以從 Chrome 使用者體驗報告擷取欄位資料，並將網站使用者的體驗與本機指標進行比較。

如要新增欄位資料，請按照下列步驟操作：

依序前往「成效」 >「後續步驟」 >「欄位資料」，然後點選「設定」。
在「Configure field data fetching」對話方塊中，請留意「Privacy disclosure」，然後按一下「Ok」。
進階：設定開發環境與實際工作環境之間的對應關係...

如要自動取得最相關的欄位資料，您可以選擇在開發環境和實際工作環境來源之間設定 (多個) 對應項目：
1. 在對話方塊中，展開「進階」部分，然後按一下「+ 新增」。
2. 在對應表格中輸入開發和實際運作網址，然後按一下 +。
  
  舉例來說，如果您將 http://localhost:8080 對應至 https://example.com，當您前往 localhost:8080/page1 時，系統就會顯示 example.com/page1 的欄位資料。
  
  此外，如果您因某些原因無法自動取得欄位資料，可以開啟「一律顯示以下網址的欄位資料」，並提供網址。「成效」面板會先嘗試擷取這個網址的欄位資料，然後無論您前往哪個網頁，都會顯示這項欄位資料。
  
  如要在設定完成後變更欄位資料擷取設定，請依序點選「欄位資料」 >「設定」
設定完實際資料擷取功能後，「成效」面板現在會比較本機指標分數與使用者體驗。您可以在右側的「欄位資料」部分中查看收集期間。

如要查看指標分數的詳細資料，請將滑鼠游標懸停在指標值上，即可查看工具提示。

設定環境，以便更符合使用者的環境

在按照前一個章節所述設定欄位資料擷取功能後，「Performance」面板會提供建議，說明如何設定環境，以便更貼近使用者體驗。

如要設定環境，請按照下列步驟操作：

在每個指標資訊卡中，展開「考量本機測試條件」部分 (如有)，並參閱建議。

這個範例中，為了更符合使用者的體驗，您可能需要使用常見的電腦螢幕大小，並降低 CPU 和網路的速度。
如要符合這個範例的環境設定，請按照下列步驟操作：
1. 將可視區域設為常見的螢幕大小 (例如 720p 或 1080p)。如要模擬特定裝置和螢幕大小，您可以使用「元素」面板中的「裝置模式」。
2. 在本例中，82% 的網站使用者都是透過電腦瀏覽網站。為確保您比較的本地指標分數與正確的欄位資料相符，請依序前往「欄位資料」 >「裝置」下拉式清單，然後選取「電腦」。
3. 在「環境設定」部分，將「網路」下拉式清單設為「快速 4G」，並將「CPU」設為「20 倍減速」。您也可以在同一個部分 停用網路快取。
設定環境後，請重新載入網頁，與網頁互動以擷取本機 INP，然後再次比較指標分數。

指標分數似乎更貼近使用者體驗。因此，考量本機測試條件部分已從指標資訊卡中移除。

完成後，您就可以開始改善網站的網站體驗核心指標：

擷取及分析成效報表

在後續章節中，請按照指示記錄設定檔、變更擷取設定，並分析報表。

記錄效能分析

準備錄製時，效能面板會提供下列選項：

變更擷取設定

擷取設定可讓您變更開發人員工具擷取效能錄製內容的方式，並在報表中提供其他資訊。按一下「擷取設定」，即可存取「擷取設定」選單。

在「擷取設定」選單中選取下列選項：

停用 JavaScript 樣本：停用在「Main」軌跡中顯示的 JavaScript 呼叫堆疊記錄，這些堆疊是在記錄期間呼叫。可減少效能負擔。
啟用進階繪製檢測 (速度偏慢)：擷取進階繪製檢測。嚴重影響效能。
啟用 CSS 選取器統計資料 (慢速)：擷取 CSS 選取器統計資料。嚴重影響效能。
CPU 節流：模擬較慢的 CPU 速度。
網路節流：模擬網路速度較慢的情況。
硬體並行：設定 navigator.hardwareConcurrency 回報的值。

分析成效報表

請參閱「分析效能記錄」一文，瞭解如何使用「效能」面板的完整指南。

以下列出指南中各個主題的群組，以及其他實用的說明文件：

如要瞭解如何瀏覽報表，請按照下列步驟操作：

如要瞭解如何專注於工作流程中的重要事項，請按照下列步驟操作：

如要瞭解「自下而上」、「呼叫樹狀圖」和「事件記錄」分頁：

在表格中查看活動

如要瞭解如何分析這份報告，請按照下列步驟操作：

運用這些面板提升成效

探索其他可協助改善網站成效的資訊面板：