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

Jecelyn Yeen
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova

使用「成效洞察」面板，取得根據實務及實際應用情況進行的網站成效洞察資料。

為什麼要推出新面板？

全新「成效洞察」面板是實驗功能，旨在解決開發人員使用現有「成效」面板時遇到的下列 3 個問題：

  • 資訊過多。我們重新設計了「效能洞察」面板，簡化資料，只顯示相關資訊。
  • 難以區分用途。「效能洞察」面板支援以用途為導向的分析功能。只支援目前載入網頁的用途，日後我們將根據您的意見回饋 (例如互動) 推出更多功能。
  • 需具備深厚的專業知識，才能有效使用瀏覽器。「成效洞察」面板會在「洞察」窗格中醒目顯示重要洞察資料，並提供如何修正問題的可行意見回饋。

簡介

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

開啟「效能深入分析」面板

  1. 開啟開發人員工具。

  2. 依序按一下「更多選項」圖示 >「更多工具」 >「效能洞察」。

    顯示「效能深入分析」選單。

    或者，使用「指令選單」開啟「效能深入分析」面板。

    在指令選單中顯示效能深入分析指令。

記錄效能

「效能洞察」面板可記錄一般和個別用途 (例如載入網頁) 的成效。

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

  2. 您可以在記錄時調節網路和 CPU。針對這個教學課程，請在下拉式選單中，勾選「停用快取」，並將「CPU」設為「4 倍慢速」：

    節流。

  3. 按一下「評估網頁載入」圖示 。開發人員工具會在頁面重新載入時記錄成效指標，並在網頁載入完成後幾秒鐘自動停止記錄。

    開始選項。

重播表演錄影

你可以使用底部的控制項，調整錄音作業的重播方式。

重播控制項。

以下是操作範例。

  • 按一下「播放」圖示 即可播放錄製內容。
  • 按一下「暫停」圖示 ，即可暫停重播。
  • 使用下拉式選單調整播放速度。
  • 按一下「切換預覽畫面」圖示 ，即可顯示或隱藏預覽畫面。

開發人員工具會自動縮小以顯示完整的錄影時間軸。你可以使用縮放功能來瀏覽錄製內容，也可以移動時間軸。

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

  • 按一下「時間軸」，即可移動播放頭來查看特定影格。
  • 按一下底部的 「放大」和 「縮小」控制項即可縮放。在這種情況下，您可以根據播放頭進行縮放。
  • 拖曳底部的水平捲軸，即可左右捲動時間軸。

或者，您也可以使用鍵盤快速鍵。按一下 按鈕，即可查看快速鍵。 鍵盤快速鍵。

使用快速鍵時，需要以滑鼠遊標縮放。

查看效能深入分析

在「深入分析」窗格中取得成效深入分析清單。找出並修正潛在的效能問題。

洞察窗格。

將滑鼠遊標懸停在每項深入分析結果上，即可在��要������������中醒目顯示這些深入分析資訊。

按一下某項深入分析 (例如轉譯封鎖要求)，即可在「Details」窗格中開啟該項深入分析。如要進一步瞭解問題，請參閱「檔案」、「問題」、「如何修正」部分等資訊。

深入分析詳細資料。

查看網站體驗指標成效指標

網站體驗指標是 Google 推出的一項計畫，旨在針對提供良好網路使用者體驗的關鍵品質信號提供整合式指引。

您可以在「時間軸」和「深入分析」窗格中查看這些指標���

查看網站體驗指標效能指標。

將滑鼠遊標懸停在「時間軸」上的深入分析上，進一步瞭解相關指標。

找出最大內容繪製的延遲情形

Largest Contentful Paint (LCP) 是 Core Web Vitals 指標之一。這個指標會回報可視區域內最大圖片或文字區塊的顯示時間 (相對於網頁首次載入的時間)。

LCP 門檻。

LCP 分數良好為 2.5 秒以下。

如果網頁最大內容繪製時間較長的顯示時間，時間軸會顯示有黃色正方形或紅色三角形的 LCP 徽章。

LCP 徽章。

如要開啟「詳細資料」窗格，請按一下時間軸上的 LCP 徽章或右側的「深入分析」窗格。這個窗格會顯示延遲的可能原因，以及修正方式的建議。

詳細資料窗格。

在這個例子中，要求會封鎖轉譯，而您可以在內嵌式設定中套用重要樣式加以修正。詳情請參閱「排除禁止轉譯資源」。

如要查看 LCP 轉譯時間的子部分，請向下捲動至「詳細資料」 >「時間細目」部分。

時間細目。

LCP 轉譯時間包含下列子部分：

LCP 子部分 說明
第一位元組時間 (TTFB) 從使用者開始載入網頁，到瀏覽器收到 HTML 文件回應第一個位元組的時間。
資源載入延遲 TTFB 與瀏覽器開始載入 LCP 資源之間的差異。
資源載入時間 載入 LCP 資源本身所需的時間。
元素轉譯延遲時間 LCP 資源完成載入與 LCP 元素完全轉譯之間的差距。

如果 LCP 元素不需要載入資源就能顯示，則會省略資源載入延遲時間和時間。舉例來說，如果元素是使用系統字型轉譯的文字節點，

查看版面配置位移活動

在「Layout Shifts」軌中查看版面配置位移活動。

版面配置位移軌跡。

版面配置位移會在一個工作階段視窗中分組。本範例中有兩個工作階段回溯期，各工作階段的回溯期之間有落差。

工作階段回溯期和間隔。

累計版面配置位移 (CLS) 是網站體驗核心指標之一。使用「版面配置位移」軌跡找出潛在問題和版面配置位移的原因。

改善 CLS 指標時，請一律從最大的工作階段回溯期開始。在此範例中，工作階段視窗 1 是根據背景顏色和等級顯示的最大視窗。

CLS。

點選螢幕截圖即可查看版面配置位移的詳細資料，找出潛在的根本原因和受影響的元素。

查看版面配置位移的詳細資料。

在這個例子中，可能的根本原因為「未大小的媒體」。如要瞭解修正方式，請參閱「將累計版面配置位移最佳化」一文。

找出可能的根本原因

瞭解版面配置位移分數

如要瞭解分數的計算方式，請使用「Details」窗格中的「Window」部分。視窗會顯示目前版面配置位移所屬的工作階段視窗。

如果移動整個頁面，每個版面配置位移的最高分數為 1。在本範例中，第一個版面配置位移分數為 0.15。第二個版面配置位移分數為 0.041。

瞭解版面配置位移分數。

這個工作階段期間的總分數為 0.19。視 CLS 門檻而定，此功能需要改善。工作階段視窗背景顏色也能套用相同顏色。

CLS 門檻。

工作階段視窗背景圖表會隨時間增加。版面配置位移的「累計分數」反映該時間點的增加分數。

Cession 視窗背景圖。

查看網路活動

在網路追蹤中查看網路活動。您可以展開網路測試群組，查看所有網路活動，然後按一下每個項目查看詳細資料。

查看網路活動。

查看轉譯器活動

在「Renderer」測試群組中查看轉譯活動。您可以展開每個轉譯器檢視活動，並點選各個項目來查看詳細資料。

查看轉譯器活動。

查看 GPU 活動

查看 GPU 追蹤中的 GPU 活動。GPU 軌跡預設為隱藏，如要啟用這項功能，請查看「設定」中的「GPU」。

查看 GPU 活動。

查看使用者載入時間

如要取得自訂成效評估指標，您可以使用「使用者載入時間」，並透過「時間」追蹤圖表顯示時間。詳情請參閱 User Time API。

您可以前往這個示範頁面，計算文字載入的所需時間。

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

  1. 使用 performance.mark() 標記應用程式中的地點。
  2. 使��� performance.measure() 測量標記之間的時長。
  3. 記錄效能。
  4. 查看 Timings 測試群組的測量結果。如果找不到測試群組，請查看「設定」中的「使用者時間」。
  5. 如要查看詳細資料，請按一下曲目上的時間。 時間賽道。

自訂使用者介面

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

[設定]。

匯出錄音檔

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

匯出錄音檔。

匯入錄製內容

如要載入錄音，請選取「Import」圖示 。

匯入錄製內容。

刪除錄音檔

如要刪除錄音檔，請按照下列步驟操作：

  1. 按一下 「Delete」(刪除)。確認對話方塊會隨即開啟。 刪除錄音檔。
  2. 在對話方塊中按一下「Delete」(刪除) 以確認刪除。