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

Jecelyn Yeen

Sofia Emelianova

注意：「效能洞察」面板已淘汰，並將於 2024 年移除。建議改用「效能」面板。詳情請參閱「2024 年以後推出的效能工具」一文。

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

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

注意：這是 Chrome 102 的預先發布版功能。我們的團隊正積極努力開發這項功能，也想聽聽你的意見回饋，以便進一步改善這項功能。

為什麼要推出新面板？

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

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

簡介

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

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

1. 開啟開發人員工具。

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

   

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

   

記錄效能

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

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

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

   

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

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

   

   重點：如要評估網頁的一般成效，請使用「開始記錄」功能。與頁面互動，並點選「停止錄製」即可手動停止記錄。

重播表演錄影

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

以下是操作範例。

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

瀏覽表演錄影

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

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

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

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

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

查看效能深入分析

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

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

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

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

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

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

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

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

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

LCP 分數良好為 2.5 秒以下。

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

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

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

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

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

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

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

查看版面配置位移活動

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

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

重點：思考版面配置位移，例如煙火。有時系統會一次進行多次變換，接著會暫停一段時間，接著又會輪流進行多次。每組多段時間都有一個工作階段回溯期，詳情請參閱「工作階段回溯期」一文。

累計版面配置位移 (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. 查看 Timings 測試群組的測量結果。如果找不到測試群組，請查看「設定」中的「使用者時間」。
5. 如要查看詳細資料，請按一下曲目上的時間。

自訂使用者介面

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

匯出錄音檔

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

匯入錄製內容

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

刪除錄音檔

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

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