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