Sofia Emelianova
Kayce Basques
透過「轉譯」分頁提供的效能相關選項參考資源，找出轉譯效能問題。
醒目顯示有閃光效果的重新繪製區域
開啟這個選項後，Chrome 會在重新繪製時閃爍綠色畫面。
如要查看正在重繪的區域，請按照下列步驟操作：
如果在另一頁看到整個螢幕閃爍的綠色區域或您認為不應繪製的區域，請考慮進一步調查。
醒目顯示版面配置位移區域
版面配置位移會導致意外重繪，不僅令人困擾，也可能造成損害。
如要查看頁面上版面配置的移動位置和時間，請按照下列步驟操作：
開啟「Rendering」分頁，然後勾選「Layout Shift Regions」。
重新整理網頁。版面配置位移區域會以紫色標示。
查看具有圖層框線的圖層和圖塊
使用「圖層框線」，即可在頁面頂端查看圖層框線和地圖方塊的重疊元素。
如要啟用圖層邊框：
- 開啟「Rendering」分頁，然後勾選「Layer Borders」。
- 請注意橘色和橄欖綠色的圖層邊框，以及青色的圖塊。
如需顏色代碼的說明，請參閱 debug_colors.cc 中的註解。
透過影格轉譯統計資料即時查看每秒影格數
「影格算繪統計資料」是疊加層，會顯示在檢視區的右上角。
如何開啟畫格算繪統計資料：
- 開啟「Rendering」(轉譯) 分頁標籤，然後勾選「Frame 轉譯統計資料」核取方塊。
- 查看網頁右上角的統計資料。
「影格算繪統計資料」疊加層會顯示：
- 網頁執行期間的每秒影格數預估值 (即時)。
- 將時間軸設為包含三種影格類型的圖表：
- 成功轉譯影格 (藍線)
- 部分呈現的畫面 (黃色線條)
- 捨棄的影格 (紅線)。
- GPU 光柵狀態：開啟或關閉。詳情請參閱如何取得 GPU 光柵化。
- GPU 記憶體用量：已用和最大記憶體 MB 數量。
找出捲動效能問題
使用「捲動效能問題」功能，找出網頁中含有捲動相關事件監聽器的元素，這些元素可能會影響網頁效能。
如要查看可能有問題的元素，請按照下列步驟操作：
- 開啟「算繪」分頁，然後檢查「捲動效能問題」。
- 觀察畫面上有哪些可能有問題的元素。
查看 Core Web Vitals
網站體驗指標是 Google 推出的一項計畫，旨在針對提供良好網路使用者體驗的關鍵品質信號提供整合式指引。
Core Web Vitals 是 Web Vitals 的一部分，適用於所有網頁。每個 Core Web Vitals 都代表使用者體驗的獨特面向，可在實地測試中評估，並反映以使用者為本的關鍵結果。Core Web Vitals 的優點如下：
- 最大內容繪製 (LCP)：評估載入效能。為了提供良好的使用者體驗，LCP 應在網頁開始載入後的 2.5 秒內完成。
- Interaction to Next Paint (INP)：評估互動性。為提供良好的使用者體驗，網頁的 INP 必須設為 200 毫秒以下。
- 累計版面配置位移 (CLS)：評估視覺穩定性。為了提供良好的使用者體驗，網頁應維持 0.1. 以下的 CLS。
使用網站體驗指標 Chrome 擴充功能查看網頁的 Core Web Vitals 值。