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

Jecelyn Yeen

Sofia Emelianova

使用「成效洞察」面板，取得網站成效相關可做為行動依據的洞察資料。

注意：這項功能僅適用於 Chrome，不適用於 Chromium。

注意：這是 Chrome 102 的預先發布版功能。我們的團隊正積極努力改善這項功能，歡迎提供意見回饋，協助我們進一步改善功能。

為什麼要新增面板？

新的「效能深入分析資訊」面板是一項實驗，旨在解決以下 3 個開發人員問題點，未來處理現有的「效能」面板時可能會遇到以下問題：

• 資訊過多。透過重新設計的使用者介面，「效能深入分析」面板不僅簡化資料，也只顯示相關資訊。
• 難以區分不同用途。「效能深入分析」面板支援用途導向分析。目前僅支援載入網頁的用途，日後我們會根據您的意見回饋 (例如互動) 提供更多功能。
• 需要深厚的瀏覽器運作方式才能有效使用。「成效深入分析」面板會在「深入分析」窗格中醒目顯示重要的洞察資料，並提供可做為行動依據的洞察資料，協助您修正問題。

簡介

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

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

1. 開啟開發人員工具。

2. 依序按一下「更多選項」圖示 >「更多工具」 >「成效深入分析」。

   

   或者，您也可以使用指令選單開啟「Performance Insights」面板。

   

記錄效能

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

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

2. 你可以在錄製時節流網路和 CPU。在本教學課程中，請勾選「停用快取」，並在下拉式選單中將「CPU」設為「4x 最慢」：

   

   重點：節流是相對於電腦的功能。舉例來說，4 倍減速選項會讓 CPU 運作速度比平常慢 4 倍。由於行動裝置的架構與桌上型電腦和筆記型電腦截然不同，開發人員工具無法真正模擬行動裝置的 CPU。

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

   

   重點：如要評估網頁的一般成效，請使用「開始記錄」。如要停止記錄，請與網頁互動，然後點選「停止錄製」。

重播表演錄音

你可以使用底部的控制項控制錄製的重播功能。

以下是具體做法範例。

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

瀏覽表演錄音

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

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

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

您也可以使用鍵盤快速鍵。按一下 按鈕即可查看捷徑。

使用快速鍵時，請根據滑鼠遊標縮放畫面。

查看效能深入分析

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

將滑鼠遊標懸停在各項深入分析上，即可在主要測試群組中醒目顯示這些洞察資訊。

按一下深入分析 (例如算繪封鎖要求)，在「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」相關說明。

請查看這個示範頁面，計算文字載入經過的時間。

如何查看使用者載入時間：

1. 使用 performance.mark() 在應用程式中標記地點。
2. 使用 performance.measure() 評估標記之間的經過時間。
3. 記錄效能。
4. 在「時間」軌跡中查看測量結果。如果看不到測試群組，請查看「設定」中的「使用者載入時間」。
5. 如要查看詳細資料，請按一下賽道上的時間。

自訂 UI

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

匯出錄音檔

如要儲存記錄，請按一下「Export」圖示 ，

匯入錄音檔

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

刪除錄音檔

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

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