使用「效能洞察」面板，取得根據實務及實際應用情況分析的網站成效洞察資料。
總覽
您可以透過「效能深入分析」面板執行下列操作：
- 記錄及評估網頁載入效能。
- 查看 Web Vitals 成效指標。
- 查看網路活動。
- 模擬較慢的 CPU 和網路速度。
- 匯入及匯出錄音檔。
為什麼要推出新面板？
全新「成效洞察」面板是實驗功能，旨在解決開發人員使用現有「成效」面板時遇到的下列 3 個問題：
- 資訊過多。我們重新設計了「效能洞察」面板，簡化資料，只顯示相關資訊。
- 難以區分用途。「效能洞察」面板支援以用途為導向的分析。目前僅支援網頁載入用途，未來將根據您的意見回饋提供更多功能，例如互動性。
- 需具備深厚的專業知識，才能有效使用瀏覽器。「成效洞察」面板會在「洞察」窗格中醒目顯示重要洞察資料，並提供如何修正問題的可行意見回饋。
簡介
本教學課程將說明如何透過「效能洞察」面板評估及瞭解網頁載入效能。請繼續閱讀或觀看上述教學課程的影片版本。
開啟「效能深入分析」面板
- 開啟開發人員工具。
依序按一下「更多選項」圖示 >「更多工具」>「效能洞察」。
記錄效能
「效能洞察」面板可記錄一般和個別用途 (例如載入網頁) 的成效。
- 在新分頁中開啟這個示範頁面，然後在該頁面中開啟「效能洞察」面板。
您可以在錄製期間限制網路和 CPU 的使用量。在本教學課程中，請勾選「Disable cache」，並在下拉式選單中將「CPU」設為「4x slowdown」：
按一下 「測量網頁載入速度」。開發人員工具會在頁面重新載入時記錄成效指標，並在網頁載入完成後幾秒鐘自動停止記錄。
重播表演錄影
你可以使用底部的控制項，調整錄音作業的重播方式。
以下提供示例說明如何執行這項操作。
- 按一下「播放」圖示 即可播放錄音內容。
- 按一下「暫停」圖示 ，即可暫停重播。
- 使用下拉式選單調整播放速度。
- 按一下 「切換視覺預覽」，即可顯示或隱藏視覺預覽畫面。
瀏覽效能錄影
開發人員工具會自動縮小以顯示完整的錄影時間軸。你可以縮放及移動時間軸來瀏覽錄音檔。
如要縮放時間軸，並左右移動，請使用對應的導覽按鈕：
- 按一下「時間軸」，即可移動播放頭來查看特定影格。
- 按一下底部的 「放大」和 「縮小」控制項即可縮放。在本例中，您會根據播放頭進行縮放。
- 拖曳底部的水平捲軸，即可左右移動時間軸。
或者，您也可以使用鍵盤快速鍵。按一下 按鈕，即可查看快速鍵。
使用快速鍵時，需要以滑鼠遊標縮放。
查看效能深入分析
在「深入分析」窗格中取得成效深入分析清單。找出並修正潛在的效能問題。
將滑鼠遊標懸停在每項深入分析結果上，即可在主要測試群組中醒目顯示這些深入分析資訊。
按一下洞察資料 (例如呈現阻斷要求)，即可在「Details」窗格中開啟該洞察資料。如要進一步瞭解問題，請查看「檔案」、「問題」、「如何修正」等部分。
查看網站體驗指標成效指標
網站體驗指標是 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 Time API。
您可以前往這個示範頁面，計算文字載入的所需時間。
如要查看使用者時間，請按照下列步驟操作：
- 使用
performance.mark()標記應用程式中的地點。 - 使用
performance.measure()測量標記之間的時長。 - 記錄成效。
- 查看「Timings」軌跡上的測量結果。如果找不到這條路線，請在「設定」中查看「使用者時間」。
- 如要查看詳細資料，請按一下音軌上的時間。
自訂使用者介面
如要自訂時間軸和軌道，請按一下面板的 「設定」圖示，然後勾選所需選項。
匯出錄音檔
如要儲存錄音檔，請按一下「匯出」圖示 。
匯入錄音檔
如要載入錄音，請選取「Import」圖示 。
刪除錄音檔
如要刪除錄音檔，請按照下列步驟操作：
- 按一下 「刪除」。確認對話方塊會隨即開啟。
- 在對話方塊中按一下「Delete」，即可確認刪除。