成效深入分析：取得網站的可行深入分析資料's 成效

使用「成效洞察」面板，取得網站成效的實用洞察資料，並根據這些資料採取行動。

總覽

「成效洞察」面板可讓您執行下列操作：

• 記錄及評估網頁載入效能。
• 查看 Web Vitals 成效指標。
• 查看網路活動。
• 模擬較慢的 CPU 和網路速度。
• 匯入及匯出錄音檔。

為什麼要推出新面板？

我們正在進行實驗，推出新的「效能洞察」面板，解決開發人員使用現有「效能」面板時遇到的以下 3 個痛點：

• 資訊太多。改版後的 UI 會簡化資料，只顯示相關資訊，讓您在「成效洞察」面板中一目瞭然。
• 難以區分用途。「效能洞察」面板支援以用途為導向的分析。目前僅支援網頁載入用途，未來會根據您的意見回饋，支援更多用途，例如互動性。
• 需要深入瞭解瀏覽器運作方式，才能有效使用。「成效深入分析」面板會醒目顯示「洞察」窗格中的重要洞察資料，並提供實用意見，協助您修正問題。

簡介

本教學課程說明如何使用「效能洞察」面板評估及解讀網頁載入效能。請繼續閱讀或觀看上方影片版教學課程。

開啟「成效洞察」面板

1. 開啟開發人員工具。

2. 依序點選「更多選項」more_vert >「更多工具」 >「成效洞察」。

   

   或者，您也可以使用指令選單開啟「成效洞察」面板。

   

記錄成效

「效能深入分析」面板可記錄一般效能和以用途為導向的效能 (例如網頁載入)。

1. 在新分頁中開啟這個示範網頁，然後在該網頁上開啟「效能洞察」面板。

2. 錄製期間，你可以節流網路和 CPU。在本教學課程中，請勾選「Disable cache」(停用快取)，並在下拉式選單中將「CPU」設為「4x slowdown」(減緩 4 倍)：

   

3. 按一下「測量頁面載入速度」refresh。開發人員工具會在網頁重新載入時記錄效能指標，並在網頁載入完成後自動停止記錄。

   

重播演出錄製內容

使用底部的控制項，控制錄製內容的重播。

以下是操作範例。

• 按一下「播放」圖示 play_arrow 即可播放錄音。
• 按一下「暫停」pause即可暫停重播。
• 使用下拉式選單調整播放速度。
• 按一下「切換視覺預覽」 preview，即可顯示或隱藏視覺預覽。

瀏覽效能記錄

開發人員工具會自動縮小，顯示完整的錄製時間軸。你可以縮放及移動時間軸，瀏覽錄音內容。

如要縮放時間軸，並向左和向右移動，請使用對應的導覽按鈕：

• 按一下「時間軸」，移動播放頭即可查看特定影格。
• 按一下底部的「放大」zoom_in和「縮小」zoom_out控制項即可縮放畫面。在本例中，您會根據播放頭縮放。
• 拖曳底部的水平捲軸，即可左右移動時間軸。

你也可以使用鍵盤快速鍵。按一下 help 按鈕即可查看快速鍵。

使用快速鍵時，系統會根據滑鼠游標位置縮放畫面。

查看成效洞察

在「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。

請參閱這個示範頁面，瞭解如何計算文字載入經過的時間。

如要查看使用者時間，請按照下列步驟操作：

1. 使用 performance.mark() 標記應用程式中的地點。
2. 使用 performance.measure() 測量標記之間經過的時間。
3. 記錄運動表現。
4. 在「時間碼」軌跡中查看測量結果。如果找不到軌跡，請在「設定」中檢查「使用者時間碼」。
5. 如要查看詳細資料，請按一下軌道上的時間碼。

自訂使用者介面

如要自訂「時間軸」和「軌道」，請按一下面板的「設定」圖示 settings，然後勾選偏好的選項。

匯出錄音檔

如要儲存錄音內容，請按一下「匯出」圖示 download。

匯入錄音檔

如要載入錄音檔，請選取「匯入」圖示 publish。

刪除錄音檔

如何刪除錄音檔：

1. 按一下「刪除」圖示 delete。確認對話方塊隨即開啟。
2. 在對話方塊中，按一下「刪除」確認刪除。