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

成效面板：分析網站成效

Dale St. Marthe

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

總覽

您可以使用「效能」面板記錄網頁應用程式的 CPU 效能設定檔。分析設定檔，找出潛在效能瓶頸，以及改善資源使用方式的方法。

使用「Performance」面板執行以下操作：

記錄效能設定檔。
變更拍攝設定。
分析成效報表。

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

開啟效能面板

如要開啟「Performance」面板，請開啟開發人員工具，然後從頂端的一組分頁中選取「效能」。

或者，您也可以按照下列步驟，使用 Command 選單開啟「效能」面板：

開啟開發人員工具。
按下以下指令開啟「Command」選單：
macOS：Command + Shift + P 鍵
Windows、Linux、ChromeOS：Control + Shift + P 鍵
輸入 Performance panel 並選取「Show Performance Panel」，然後按下 Enter 鍵。

即時觀測 Core Web Vitals

開啟「Performance」面板後，系統會立即擷取並顯示當地的最大內容繪製 (LCP) 和累計版面配置位移 (CLS) 指標，方便您查看分數 (良好、需要改善或不佳)。

如果你與網頁互動，「Performance」面板也會擷取本機的「與下一個顯示的內容互動」(INP) 和分數 (除了 LCP 和 CLS 以外)，你也能透過網路連線和裝置，完整掌握網頁的 Core Web Vitals 總覽。

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

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

比較您的使用者體驗與使用者的體驗

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

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

在「成效」中 >後續步驟 >「欄位資料」，按一下「設定」。
在「設定欄位資料擷取」對話方塊中，記下「隱私權揭露資訊」，然後按一下「確定」。
進階：設定開發環境與實際工作環境之間的對應關係...

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

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

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

按照上一節所述設定欄位資料擷取後，「成效」面板會提供建議，協助您瞭解如何設定環境，以便更符合使用者的使用體驗。

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

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

在這個例子中，為了更貼近使用者的體驗，您可以使用常見的電腦螢幕大小，並調節 CPU 和網路。
如要比對這個範例的環境設定：
1. 將可視區域設為其中一種常見螢幕大小 (例如 720p 或 1080p)。如要模擬特定裝置和螢幕大小，您可以使用「元素」面板中的「裝置模式」。
2. 在本例中，82% 的網站使用者會使用桌機瀏覽網站。為確保能比較當地指標分數和正確的欄位資料，請在「欄位資料」部分選取「電腦」>裝置下拉式清單。
3. 在「環境設定」部分，將「網路」下拉式清單設為「快速 4G」，並將「CPU」設為「20 倍減速」。您也可以務必在相同部分中 停用網路快取。
設定環境後，請重新載入網頁，與網頁互動以擷取本機 INP，然後再次比較指標分數。

看來指標分數現在更接近使用者體驗。因此，指標資訊卡中會找不到「考量本機測試條件」部分。

完成後，您就可以開始改善網站的Core Web Vitals：

擷取及分析成效報表

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

記錄效能設定檔

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

變更擷取設定

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

從「Capture settings」選單中選取下列選項：

停用 JavaScript 範例：停用「主要」軌跡在錄製期間呼叫的 JavaScript 呼叫堆疊記錄。這麼做會降低效能負擔。
啟用進階繪製檢測 (速度偏慢)：擷取進階繪製檢測。大幅降低成效。
啟用 CSS 選取器統計資料 (慢)：擷取 CSS 選取器統計資料。大幅降低成效。
CPU 節流：模擬較慢的 CPU 速度。
網路節流：模擬較慢的網路速度。
硬體並行：設定 navigator.hardwareConcurrency 回報的值。

分析成效報表

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

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

瞭解如何瀏覽報表：

如要瞭解如何專心處理重要的工作流程：

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

在表格中查看活動

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

運用這些面板提升成效

查看其他有助於改善網站成效的面板：