使用 效能 工具來分析你網站的表現。 主要有兩種觀點：
- 首頁會顯示你與目前網頁互動時的本地指標。
- 錄製個人檔案並查看績效時間軸。
詳細內容：
想了解如何使用 效能 工具提升網站效能，請參考「 分析執行時效能」 (教學) 。
概觀
效能工具會顯示頁面互動的本地指標，並讓你記錄網頁應用程式的 CPU 效能設定檔。 分析投資組合，找出潛在的效能瓶頸及優化資源使用的方法。
打開效能工具
要開啟 效能 工具：
打開新視窗或分頁，進入像是 「探索宇宙 」示範的網頁。
右鍵點擊網頁，然後選擇 檢查。
DevTools 開啟。
在上方的活動欄，點擊
「效能工具」。如果
Performance 工具未 顯示在 活動列中，請點選 更多工具 (
) 按鈕，然後選擇 效能 工具。
使用指令選單
要透過指令選單開啟效能工具：
打開新視窗或分頁，進入像是 「探索宇宙 」示範的網頁。
右鍵點擊網頁，然後選擇 檢查。
DevTools 開啟。
在 DevTools 右上角，點選 「自訂並控制 DevTools」，再點「 執行」指令。
或者，請點擊：
- macOS： Command+Shift+P
- Windows、Linux、ChromeOS： Control+Shift+P
指令 選單 打開，顯示 執行 >指令。
開始輸入 表演，選擇 顯示表演 [面板]，然後按下 Enter。
頁面互動的在地指標
使用 效能 工具在初始的 「本地指標 」檢視核心網路指標。 效能工具的首頁顯示本地指標，也就是關於渲染網頁的效能指標：
- LCP) 最大內容豐富 Paint (- 頁面主要內容載入的速度。
- 累積版面變動 (CLS) - 衡量最近一次意外版面版面變動的指標。
- 與 Next Paint (INP) 互動 - 頁面上最近使用者互動的響應速度。
當您初次開啟 效能 工具時，核心網路指標會顯示在 本地指標 區塊的三張卡片中：
記錄型態時間軸
也可使用 效能 工具查看錄製的績效軌跡，包括：
- 記錄績效檔案。
- 更改擷取設定。
- 分析績效報告。 顯示錄影期間內頁面表現的資訊，例如：
- 錄音期間發生的使用者互動。
- 執行的 JavaScript 程式碼。
- 就是進行的造型和版面操作。
- 其他隨時間的效能指標，例如網路請求與佈局調整。
在你記錄效能追蹤後，效能追蹤會被顯示出來，而不是 本地指標。
切換到查看本地指標或其他個人資料
若要切換到初始的本地指標檢視，請點擊返回至即時指標頁面 (
) 按鈕。
若要切換顯示不同已開啟的已錄製個人檔案時間軸，請點擊即時指標頁面返回右側的「顯示近期時間軸會話」下拉選單， (
監控核心網頁指標
使用 效能 工具在初始的 「本地指標 」檢視核心網路指標。 效能工具的首頁顯示本地指標，這是關於渲染網頁的效能指標：
- 最大內容繪圖 (LCP) - 頁面主要內容載入的速度。
- 累積版面變動 (CLS) - 衡量最近一次意外版面版面變動的指標。
- 互動至下一繪畫 (INP) - 頁面上最近使用者互動的回應速度。
術語
| 術語 | 描述 | Docs |
|---|---|---|
| 網路動態 | 大量指標提供統一指引，協助你在網路上提供優質的使用者體驗。 | 網路動態 web.dev。 |
| 核心網頁指標 | 適用於所有網頁的網頁指標子集，應由所有網站擁有者共同衡量。 每個核心網路指標代表使用者體驗的不同面向，在現場可衡量，並反映出以使用者為中心的關鍵成果的真實經驗。 | 核心網頁指標 在 網路生命徵 象 web.dev。 |
| LCP) 中最大的 Contentful Paint ( | 測量 載重 性能。 為了提供良好的使用者體驗，LCP 應在頁面首次載入後 2.5 秒內啟動。 視口中最大影像、文字區塊或影片相對於使用者首次瀏覽頁面的時間渲染時間。 | 最大內容豐富的顏料 (LCP) 見MDN詞彙表。 MDN 最大的ContentfulPaint。 |
| CLS) 累積版 (位 | 測量 視覺穩定性。 為了提供良好的使用者體驗，頁面應維持 CLS 為 0.1。 甚至更少。 在頁面整個生命週期中，每一次意外的版面變動，會產生最大的版面變動分數。 | MDN 詞彙表中 CLS) (累積版面變動。 MDN 的 LayoutShift。 |
| 與下一位畫作 (INP) 互動 | 衡量 互動性。 為了提供良好的使用者體驗，頁面的 INP 應該不超過 200 毫秒。 頁面對使用者互動的整體響應速度，基於使用者瀏覽期間所有點擊、點擊與鍵盤互動的延遲。 | 與 Next Paint (INP) 的互動 ，見 MDN 的詞彙表。 MDN 的 PerformanceEventTiming。 |
| 地方指標、地方資料 | LCP、CLS 和 INP 指標。 這些資料會在被檢查的網頁上本地擷取，並隨著你與頁面互動而更新。 |
使用試用頁面
在效能工具中，為LCP、CLS及INP卡片產生差或需改進的指標：
在新視窗或分頁中開啟網頁，例如探索 宇宙 示範。
「探索宇宙」示範頁面設計成故意緩慢載入與處理互動，以說明如何在 效能 工具中使用 LCP、CLS 與 INP 指標來識別並修正效能問題。
右鍵點擊網頁，然後選擇 檢查。
DevTools 開啟。
在上方的活動欄中，選擇
「效能工具」。如果
Performance 工具未 顯示在 活動列中，請點選 更多工具 () 按鈕，然後選擇 效能 工具。最大化視窗，並將示範頁面窗格做得很寬，例如視窗寬度的 60%。
如果示範頁面的視窗太窄，有些卡片可能會持續顯示 良好，但值仍為綠色，這並非預期結果。
選擇下一步選區、>環境設定、卡片>、CPU 限速下拉選單>、選擇 4x 減速——建議。
或者，建議選擇擷取設定 (
) >CPU 降頻下拉選單>，顯示 4 倍減速。選擇下一步選區的>環境設定卡片，>網路限速下拉選單>，選擇慢速 4G。
選擇下一步>，環境設定卡>，勾選停用網路快取的方塊。
右鍵點擊 (或長點) 地址列左側的刷新按鈕，然後選擇清空快取並進行硬刷新。
這確保影像是從伺服器重新載入，而非從本地快取。
LCP 和 CLS 卡片顯示的數值是橘色且需要改進，或是紅色值且品質差，而非綠色值且良好。
如果 LCP 或 CLS 卡在銀河影像渲染完成後仍為綠色且顯示 良好 ，請最大化視窗並擴大示範頁面窗格。
LCP 顯示銀河影像載入時間很長。 卡片顯示的是橘色且 需改進，或是紅色值且 品質差，而非綠色且 品質良好。 引擎會將此影像識別為最大要渲染的項目。
在 LCP 卡片上，將滑鼠移到度量值上方可查看提示資訊。
CLS 卡片說明了版面突然且意外的跳躍會對使用者造成負面影響。 這也是因為圖片載入需要一些時間。 設計上，示範網頁未指定圖片高度，因此頁面一開始載入時未預留太多空間。 當圖片開始出現時，下面的內容會突然往下跳。
在 CLS 卡片上，將滑鼠移到指標值上即可查看提示資訊。
銀河影像渲染完成後，在渲染示範頁面中，點擊右側「 發現 」欄中的標題，例如「 日心說 1543 (」) 。
INP卡從不顯示值變成橘色且需改進，或紅色值顯示差。 會顯示 一個INP 值。
在 INP 卡片上，將滑鼠移到指標值上即可查看提示資訊。
在 INP 卡片中，點擊INP值。
在試玩頁面中， 發現 卡設計成緩慢展開與重新渲染，點擊標題到渲染展開卡牌內容之間需要很長時間。 延遲值在 100ms 到 1000ms 之間隨機，導致 INP 值很高。
在 本地指標 卡下方，會填入 互動 分頁和 版面調整 分頁。
互動標籤
互動標籤會顯示你與網頁互動的相關資訊：
互動標籤包含：
- 階段。
- 元素。
- 時間點。
要清除互動標籤，請點擊互動標籤右側 (清除目前日誌的「清除」
) 按鈕。
版面切換標籤
佈局轉換標籤顯示有關佈局轉移的資訊：
版面切換標籤包含：
- 分數。
- 元素。
擷取並分析績效報告
在接下來的章節中，請依照指引學習如何錄製檔案、更改擷取設定，以及分析報告。
記錄績效檔案
當你準備好錄音時， Performance 工具會提供以下選項：
- 效能功能參考中的執行時效能紀錄。
- 效能功能參考中的負載效能紀錄。
- 在錄製時擷取截圖，並參考 Performance Features 。
- 在錄製 Performance 功能時強制垃圾回收。
- 在「表演功能」參考中儲存並分享錄音。
- 在 Performance Features reference 中載入錄音。
- 清除之前的錄音 ，請參考 Performance Features 。
更改擷取設定
擷取設定 可以讓你改變 DevTools 捕捉效能錄音的方式，並在報告中提供額外資訊。 點擊 擷取設定 (擷取 
) 按鈕即可進入 擷取設定 選單。
從 擷取設定 選單中選擇以下選項：
選擇 「停用 JavaScript 範例 」勾選框：停用錄製期間被呼叫的 JavaScript 呼叫堆疊錄製，這些堆疊顯示在主軌道中。 降低效能負擔。 請參閱效能功能參考中的「停用 JavaScript 範例」。
選擇 啟用進階渲染儀表 (慢) 勾選框：擷取進階塗裝儀表。 這會大幅影響效能。 請參閱效能功能參考中的啟用進階塗裝儀表。
選擇 啟用 CSS 選擇器統計 (慢) 勾選框：擷取 CSS 選擇器統計。 這會大幅影響效能。 請參閱 DevTools (Microsoft Edge 131) 中效能工具側邊欄的檢視 CSS 選擇器成本 。
CPU 降頻：模擬較慢的 CPU 速度。 請參見「效能特徵參考」中的「錄製時節流CPU」。
網路限速：模擬較慢的網路速度。 請參見「效能功能」參考中的「在錄製時節流網路」。
分析績效報告
關於如何使用 Performance 工具的完整指南，請參閱 Performance Features Reference 中的「分析 Performance Recording」。
要瀏覽績效報告：
專注於對你的工作流程重要的事項：
在 Performance Features 參考中，對錄影部分進行縮放並切換縮放等級。
想了解自 下而上、 通話樹和 事件日誌 分頁：
- 在效能特徵參考中的表格中查看活動。
要分析績效報告：
- 在效能功能參考中查看主執行緒活動。
- 請閱讀性能特徵參考中的火焰圖表。
- 請參閱效能功能參考中的截圖。
- 在效能功能參考中查看記憶體指標。
- 請參閱《Performance Features reference》中一段錄音的時長。
- 在 Recalculate Style 事件中分析 CSS 選擇器的效能。
- 在效能功能參考中分析每秒幀數 (FPS) 。
- 表演錄音事件參考
利用這些工具提升效能
發掘其他能幫助你提升網站效能的工具：
| 工具 | 文章 |
|---|---|
| 燈塔 工具 | 利用 Lighthouse 優化網站速度 |
| 記憶 工具 | 修復記憶體問題 |
| 效能 工具 >Insights 標籤 | 在效能功能參考中獲取可行的洞察。 |
| 渲染 工具 | 渲染工具，用來查看網頁在不同顯示選項或視覺缺陷下呈現的樣貌 |
| 議題 工具 | 使用 Issues 工具找出並修正問題 |
| 效能 工具 | 在效能功能參考中查看圖層資訊 |
另請參閱
- 探索宇宙 試玩頁面
注意事項
本頁部分內容基於 Google 創作與 分享 的作品，並依 據創用CC 姓名標示 4.0 國際授權條款進行修改。 原始頁面 可 在此找到，作者為 Dale St. Marthe 與 Sofia Emelianova。
本作品採用 創用CC 姓名標示4.0國際授權條款授權。