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