使用「成效深入分析」面板，瞭解網站成效的實用且以用途為導向的洞察資料。
總覽
您可以透過「效能深入分析」面板執行下列操作：
- 記錄及評估網頁載入效能。
- 查看 Web Vitals 成效指標。
- 查看網路活動。
- 模擬 CPU 和網路速度較慢的情況。
- 匯入及匯出錄音檔。
為什麼要推出新面板？
新版「效能深入分析」面板是實驗功能，可解決開發人員在使用現有「效能」面板時遇到的 3 個痛點：
- 資訊太多。重新設計的 UI 讓「成效洞察」面板可簡化資料，只顯示相關資訊。
- 難以區分用途。「效能深入分析」面板支援以用途為導向的分析。目前僅支援網頁載入用途，未來將根據您的意見回饋提供更多功能，例如互動性。
- 需要深入瞭解瀏覽器的運作方式，才能有效使用。「成效深入分析」面板會在「深入分析」窗格中醒目顯示重要洞察資料，並提供可行的意見回饋，說明如何修正問題。
簡介
本教學課程將說明如何使用「成效深入分析」面板評估及瞭解網頁載入效能。請繼續閱讀或觀看上述教學課程的影片版本。
開啟「效能深入分析」面板
記錄效能
「Performance insights」面板可記錄一般和用例導向 (例如網頁載入) 的效能。
- 在新分頁中開啟這個示範頁面，然後在該頁面開啟「成效洞察」面板。
您可以在錄製期間限制網路和 CPU 的使用量。在本教學課程中，請勾選「Disable cache」，並在下拉式選單中將「CPU」設為「4x slowdown」：
按一下 「測量網頁載入速度」。開發人員工具會在網頁重新載入時記錄成效指標，然後在網頁載入完成後幾秒內自動停止記錄。
重播表演錄製內容
使用底部的控制項，控制錄影重播。
以下提供示例說明如何執行這項操作。
- 按一下「播放」圖示 即可播放錄音內容。
- 按一下 「暫停」，即可暫停重播。
- 使用下拉式選單調整播放速度。
- 按一下 「切換視覺預覽」，即可顯示或隱藏視覺預覽畫面。
瀏覽效能錄影
開發人員工具會自動縮小顯示錄製時間軸的完整內容。你可以縮放及移動時間軸來瀏覽錄音檔。
如要放大及左右移動時間軸，請使用對應的導覽按鈕：
- 按一下「時間軸」，即可移動播放頭，查看特定影格。
- 按一下底部的 「放大」和 「縮小」控制項，即可縮放畫面。在本例中，您會根據播放頭進行縮放。
- 拖曳底部的水平捲軸，即可左右移動時間軸。
或者，您也可以使用鍵盤快速鍵。按一下 按鈕即可查看快速鍵。
使用快速鍵時，您可以根據滑鼠游標進行縮放。
查看成效深入分析
在「Insights」窗格中取得效能深入分析資訊清單。找出並修正潛在的效能問題。
將滑鼠游標懸停在每個洞察資料上，即可在主要軌道上醒目顯示。
按一下洞察資料 (例如呈現阻斷要求)，即可在「Details」窗格中開啟該洞察資料。如要進一步瞭解問題，請查看「檔案」、「問題」、「如何修正」等部分。
查看 Web Vitals 成效指標
網站使用體驗核心指標是一項由 Google 推動的計畫，旨在針對不可或缺的品質信號提供統合一致的指南，協助發布商打造出色的網頁使用者體驗。
您可以在「時間軸」和「深入分析」窗格中查看這些指標。
將滑鼠游標懸停在時間軸上的洞察資訊上，即可進一步瞭解指標。
找出 Largest Contentful Paint 的延遲時間
最大內容繪製 (LCP) 是 Core Web Vitals 指標之一。記錄可視區域中最大圖片或文字區塊的算繪時間 (相對於網頁初次載入的時間)。
良好的 LCP 分數為 2.5 秒以下。
如果網頁上最大內容繪製的算繪時間較長，時間軸上就會顯示帶有黃色方塊或紅色三角形的 LCP 徽章。
如要開啟「Details」窗格，請按一下時間軸或右側「洞察」窗格中的 LCP 徽章。您可以在這個窗格中，查看延遲的可能原因，以及修正建議。
在這個範例中，要求會阻止算繪，您可以內嵌套用關鍵樣式來修正。如需更多資訊，請參閱「排除會妨礙顯示的資源」。
如要查看 LCP 算繪時間的子部分，請向下捲動至「Details」 >「Timings breakdown」部分。
LCP 算繪時間包含下列子部分：
| LCP 子部分 | 說明 |
|---|---|
| 收到第一個位元組的時間 (TTFB) | 從使用者啟動網頁載入作業到瀏覽器收到 HTML 文件回應的第一個位元組所需的時間。 |
| 資源載入延遲 | TTFB 與瀏覽器開始載入 LCP 資源之間的差異。 |
| 資源載入時間 | 載入 LCP 資源本身所需的時間。 |
| 元素轉譯延遲 | LCP 資源完成載入到 LCP 元素完全算繪完成之間的差異。 |
如果 LCP 元素不需要資源載入才能轉譯，系統會省略資源載入延遲和時間。例如，如果元素是使用系統字型算繪的文字節點。
查看版面配置位移活動
在「Layout Shifts」軌跡中查看版面配置轉換活動。
版面配置位移會在工作階段時段中分組。在這個範例中，有兩個工作階段視窗。工作階段時間區間之間有間隔。
累計版面配置位移 (CLS) 是核心網站體驗指標之一。使用「版面配置位移」追蹤記錄，找出版面配置位移的潛在問題和原因。
改善 CLS 指標時，請一律從最大的工作階段視窗開始。在本範例中，會話視窗 1 是根據背景顏色和層級，顯示最大的視窗。
按一下螢幕截圖，查看版面配置位移的詳細資料，找出潛在的根本原因和受影響的元素。
在這個例子中，潛在的根本原因是未設定大小的媒體。如要瞭解如何修正這個問題，請參閱「最佳化累積版面配置偏移」。
瞭解版面配置位移分數
如要瞭解分數計算方式，請參閱「Details」窗格中的「Window」部分。「Window」會顯示目前版面配置位移屬於哪個工作階段視窗。
如果整個網頁都位移，每個版面配置位移的最高分數為 1。在本範例中，第一個版面配置轉換的分數為 0.15。第二次版面配置轉換獲得 0.041 分數。
這個工作階段窗格的總分數為 0.19。根據 CLS 門檻，該網頁需要改善。工作階段視窗的背景顏色也會反映相同的情況。
工作階段背景圖表隨時間增加。版面配置偏移的累積分數反映的是該時間點的增幅。
查看網路活動
在「網路」測試群組中查看網路活動。您可以展開網路追蹤記錄，查看所有網路活動，並按一下每個項目查看詳細資料。
查看轉譯器活動
查看「Renderer」群組中的轉譯活動。您可以展開每個轉譯器來查看活動，並按一下每個項目查看詳細資料。
查看 GPU 活動
在 GPU 群組中查看 GPU 活動。根據預設，GPU 追蹤會處於隱藏狀態。如要啟用這項功能，請在「設定」中勾選「GPU」。
查看使用者載入時間
如要取得自訂成效評估，您可以使用使用者時間，並透過時間軌跡以視覺化方式呈現時間。詳情請參閱 User timing API。
請參閱這個示範頁面，計算文字載入的經過時間。
如要查看使用者時間，請按照下列步驟操作：
- 使用
performance.mark()在應用程式中標記地點。 - 使用
performance.measure()測量標記之間的經過時間。 - 記錄成效。
- 查看「Timings」軌跡上的測量結果。如果找不到這條路線，請在「設定」中查看「使用者時間」。
- 如要查看詳細資料，請按一下音軌上的時間。
自訂使用者介面
如要自訂時間軸和軌道，請按一下面板的 「設定」圖示，然後勾選所需選項。
匯出錄音檔
如要儲存錄音內容，請按一下「匯出」圖示 。
匯入錄音檔
如要載入錄影檔案，請選取「Import」圖示 。
刪除錄音檔
如要刪除錄音檔，請按照下列步驟操作：
- 按一下 「刪除」。系統會開啟確認對話方塊。
- 在對話方塊中按一下「Delete」，即可確認刪除。