探索轉譯效能相關問題

Sofia Emelianova

Kayce Basques

運用「轉譯」分頁的效能相關選項參照，探索轉譯效能問題。

醒目顯示經過繪製的重新繪製區域

開啟這個選項後，Chrome 會在重新繪製時讓螢幕閃爍綠燈。

如何查看正在重新繪製的區域：

1. 開啟這個示範上的「算繪」分頁，然後勾選「調整閃光燈」。
2. 觀察以綠色標示的重繪內容。

如果在另一個網頁中看到整個螢幕閃爍的綠色或畫面中不應繪製的區域，請考慮進一步調查。

醒目顯示版面配置位移區域

版面配置位移會導致非預期的重新繪製作業，而且不僅會造成困擾，也會造成傷害。

螢幕側錄說明版面配置不穩定對使用者造成的影響。

如何查看網頁上版面配置位移的位置和時間：

1. 開啟「Rendering」分頁，然後勾選「版面配置位移區域」。

2. 重新整理頁面。版面配置位移的區域會以紫色快速醒目顯示。

使用圖層框線查看圖層和圖塊

使用「圖層框線」在頁面上方查看圖層框線和圖塊的疊加層。

如何啟用圖層框線：

1. 開啟「算繪」分頁，然後勾選「圖層框線」。
2. 觀察橘色和橄欖綠色中的圖層邊框，以及青色的圖塊。

如需顏色標記的說明，請參閱 debug_colors.cc 中的註解。

查看影格轉譯統計資料，即時查看每秒影格數

「影格轉譯統計資料」是顯示在可視區域右上角的疊加層。

如要開啟「影格轉譯統計資料」：

1. 開啟「算繪」分頁，並啟用「影格轉譯統計資料」核取方塊。
2. 查看網頁右上角的統計資料。

「影格轉譯統計資料」重疊會顯示：

• 在頁面執行期間即時預估每秒影格數。
• 以圖表時間軸形式包含三種影格類型：
  • 成功轉譯影格 (藍線)
  • 部分呈現的影格 (黃線)
  • 捨棄的影格 (紅線)。
• GPU 光柵狀態：開啟或關閉。詳情請參閱「如何取得 GPU 光柵化」。
• GPU 記憶體用量：已使用的記憶體和記憶體 MB 上限。

找出捲動效能問題

您可以利用「捲動效能問題」，找出網頁中包含與捲動相關的事件監聽器，這些元素可能影響網頁效能的元素。

如何查看可能有問題的元素：

1. 開啟「算繪」分頁，然後勾選「捲動效能問題」。
2. 特別標明可能有問題的元素。

查看網站體驗核心指標

網站體驗指標是 Google 推動的一項計畫，旨在針對提供優質網路使用者體驗的必要品質信號提供整合式指引。

Core Web Vitals 是網站體驗指標的子集，適用於所有網頁。每項網站體驗核心指標都代表使用者體驗的不同面向，而且可在實際環境中評估，反映以使用者為中心的重要結果。網站體驗核心指標包括：

• 最大內容繪製 (LCP)：測量載入效能。為提供良好的使用者體驗，LCP 應在網頁初次開始載入後的 2.5 秒內執行。
• 與下一個顯示的內容 (INP) 互動：評估互動。為提供良好的使用者體驗，網頁的 INP 必須小於 200 毫秒。
• 累計版面配置位移 (CLS)：評估視覺化穩定性。為提供良好的使用者體驗，網頁應維持 0.1. 以下的 CLS。

使用網站體驗指標 Chrome 擴充功能，查看網頁的網站體驗核心指標值。