使用「成效」面板分析網站成效。
總覽
您可以使用「效能」面板記錄網頁應用程式的 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 使用者體驗報告擷取欄位資料,並將網站使用者的體驗與本機指標進行比較。
如要新增欄位資料,請按照下列步驟操作:
在「成效」中 >後續步驟 >「欄位資料」,按一下「設定」。
在「設定欄位資料擷取」對話方塊中,記下「隱私權揭露資訊」,然後按一下「確定」。
進階:設定開發環境與實際工作環境之間的對應關係...
如要自動取得最相關的欄位資料,您可以在開發與實際執行來源之間設定 (多個) 對應:
- 在對話方塊中,展開「進階」部分,然後按一下「+ 新增」。
在對應表格中,輸入您的開發與實際執行網址,然後按一下 +。
舉例來說,如果您將
http://localhost:8080
對應至https://example.com
,當您前往localhost:8080/page1
時,系統就會顯示example.com/page1
的欄位資料。此外,如果您因某些原因無法自動取得欄位資料,可以開啟「一律顯示以下網址的欄位資料」
,並提供網址。「成效」面板會先嘗試擷取這個網址的欄位資料,並在每次瀏覽什麼網頁時顯示這個欄位資料。如要在設定完成後變更欄位資料擷取設定,請按一下「欄位資料」>設定
設定欄位資料擷取功能後,「成效」面板現在會顯示當地指標分數與使用者體驗的比較結果。您可以在右側的「欄位資料」部分查看收集期間。
如要查看指標分數的細目,請將滑鼠遊標懸停在指標值上,即可查看工具提示。
設定環境,以便更符合使用者的環境
按照上一節所述設定欄位資料擷取後,「成效」面板會提供建議,協助您瞭解如何設定環境,以便更符合使用者的使用體驗。
如要設定環境,請按照下列步驟操作:
在每個指標資訊卡中,展開「考量本機測試條件」部分 (如有),並參閱建議。
在這個例子中,為了更貼近使用者的體驗,您可以使用常見的電腦螢幕大小,並調節 CPU 和網路。
如要比對這個範例的環境設定:
設定環境後,請重新載入網頁,與網頁互動以擷取本機 INP,然後再次比較指標分數。
看來指標分數現在更接近使用者體驗。因此,指標資訊卡中會找不到「考量本機測試條件」部分。
完成後,您就可以開始改善網站的Core Web Vitals:
擷取及分析成效報表
在後續章節中,請按照指示記錄設定檔、變更擷取設定,並分析報表。
記錄效能設定檔
準備錄製時,「效能」面板會提供以下選項:
變更擷取設定
擷取設定可讓您變更開發人員工具擷取成效記錄的方式,並可在報表中提供其他資訊。按一下「擷取設定」,即可存取「擷取設定」選單。
從「Capture settings」選單中選取下列選項:
- 停用 JavaScript 範例:停用「主要」軌跡在錄製期間呼叫的 JavaScript 呼叫堆疊記錄。這麼做會降低效能負擔。
- 啟用進階繪製檢測 (速度偏慢):擷取進階繪製檢測。大幅降低成效。
- 啟用 CSS 選取器統計資料 (慢):擷取 CSS 選取器統計資料。大幅降低成效。
- CPU 節流:模擬較慢的 CPU 速度。
- 網路節流:模擬較慢的網路速度。
- 硬體並行:設定
navigator.hardwareConcurrency
回報的值。
分析成效報表
如需「成效」面板的完整使用指南,請參閱「分析成效記錄」一文。
以下列出指南中各個主題的群組,以及其他實用的說明文件:
瞭解如何瀏覽報表:
如要瞭解如何專心處理重要的工作流程:
如要瞭解「自下而上」、「呼叫樹狀圖」和「事件記錄」分頁:
如要瞭解如何分析這份報告,請按照下列步驟操作:
- 查看主執行緒活動
- 解讀火焰圖
- 查看螢幕截圖
- 查看記憶體指標
- 查看錄影片段的長度
- 分析重新計算樣式事件期間的 CSS 選取器效能
- 使用「效能」面板剖析 Node.js 效能
- 分析每秒影格數 (FPS)
- 時間軸事件參考資料
運用這些面板提升成效
查看其他有助於改善網站成效的面板: