成效面板：分析網站成效

Dale St. Marthe
Dale St. Marthe
LinkedIn
Sofia Emelianova
Sofia Emelianova
GitHub

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

總覽

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

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

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

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

開啟「效能」面板

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

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

  1. 開啟開發人員工具。
  2. 按下下列按鍵，開啟「命令」選單：
  3. macOS：Command + Shift + P 鍵
  4. Windows、Linux、ChromeOS：Control + Shift + P 鍵指令選單，包含
  5. 開始輸入 Performance panel，選取「顯示效能面板」，然後按下 Enter 鍵。

即時觀察網站體驗核心指標

開啟「效能」面板後，系統會立即擷取並顯示本機的「最大內容繪製 (LCP)」和「累計版面配置位移 (CLS)」指標，並顯示分數 (良好、需要改善或不良)。

如果您與網頁互動，「成效」面板也會擷取本機 Interaction to Next Paint (INP) 和分數，除了 LCP 和 CLS 之外，還能讓您全面瞭解網頁的 Core Web Vitals，包括網路連線和裝置。此外，這項工具也會擷取並回報單頁應用程式中用戶端軟性導覽的網站體驗核心指標。

在「互動」和「版面配置位移」分頁的三張指標資訊卡下方，您會看到表格，其中包含擷取的互動和版面配置位移資訊，包括元素、時間、階段 (互動) 和分數 (版面配置位移)。如要清除這兩份清單，請依序點選「封鎖」和「清除」。

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

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

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

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

  1. 在「Performance」 >「Next steps」 >「Field data」中，按一下「Set up」。

    「後續步驟」部分的「設定」按鈕。

  2. 在「設定欄位資料擷取」對話方塊中，請注意「隱私權揭露」，然後按一下「確定」。

    進階：設定開發環境和正式環境之間的對應關係...

    如要自動取得最相關的實際資料，可以視需要設定開發環境和實際環境來源之間的 (多個) 對應：

    1. 在對話方塊中，展開「進階」部分，然後按一下「+ 新增」。

    2. 在對應表中輸入開發和正式版網址，然後按一下「+」。

      進階部分中開發和實際環境來源之間的對應關係。

      舉例來說，如果將 http://localhost:8080 對應至 https://example.com，當您前往 localhost:8080/page1 時，系統會顯示 example.com/page1 的欄位資料。

      此外，如果因故無法自動取得實際資料，可以勾選「一律顯示以下網址的實際資料」，並提供網址。「成效」面板會先嘗試擷取這個網址的欄位資料，然後無論您前往哪個網頁，都會顯示這些欄位資料。

      如要在設定後變更欄位資料擷取設定，請依序點選「欄位資料」 >「設定」

    設定實際資料擷取功能後，「Performance」面板會顯示本機指標分數與使用者體驗分數的比較結果。收集期間會顯示在右側的「欄位資料」部分。

    擷取實測資料後的收集期間。

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

設定環境，盡量與使用者的環境相符

按照上一節所述設定欄位資料擷取後，「效能」面板會提供建議，協助您設定環境，更貼近使用者的體驗。

如何設定環境：

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

    每個指標資訊卡中的「考量本機測試條件」部分都會展開。

    在這個範例中，為了更貼近使用者的體驗，建議您使用常見的電腦螢幕大小，並降低 CPU 和網路速度。

  2. 如要比照這個範例的環境設定，請按照下列步驟操作：

    1. 將可視區域設為常見的螢幕大小 (例如 720p 或 1080p)。如要模擬特定裝置和螢幕大小，可以使用「Elements」面板中的「Device mode」。
    2. 在這個範例中，82% 的網站使用者使用電腦瀏覽。如要確保比較本機指標分數與正確的欄位資料，請從「欄位資料」 >「裝置」下拉式選單中選取「桌機」。
    3. 在「Environment settings」部分，將「Network」下拉式選單設為「Fast 4G」，並將「CPU」設為「20x slowdown」。您也可以在同一部分中，勾選「停用網路快取」。

  3. 設定好環境後，請重新載入網頁，並與網頁互動來擷取本機 INP，然後再次比較指標分數。

    環境設定會與實際使用者體驗相符。

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

現在，您可以開始改善網站的 Core Web Vitals：

擷取及分析成效報表

在接下來的章節中，請按照指引錄製設定檔、變更擷取設定，以及分析報告。

記錄效能剖析檔

準備好錄製時，「Performance」面板會提供下列選項：

變更擷取設定

擷取設定可讓您變更開發人員工具擷取效能記錄的方式，並在報表中提供額外資訊。按一下「擷取設定」圖示 ，開啟「擷取設定」選單。

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

分析成效報表

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

以下是本指南的主題分組，以及其他實用說明文件：

如要瞭解如何瀏覽報表：

使用成效洞察取得網站成效的實用洞察資料：

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

如要瞭解「Bottom-up」、「Call tree」和「Event log」分頁：

如要瞭解如何分析報表：

使用這些面板提升成效

探索其他有助於提升網站成效的面板：

其他資源