成效深入分析
「效能深入分析」提供網站效能的實用洞察,並可在開發人員工具的「效能」面板和 Lighthouse 中使用。
CSS 選擇器成本
找出複雜的 CSS 選取器,這類選取器需要較長時間才能與網頁上的元素相符。
文件要求延遲時間
找出 HTML 文件要求耗時超出預期的原因。
重複的 JavaScript
找出在單一網頁中多次載入的相同 JavaScript 模組或程式碼。
字型顯示
評估 `font-display` CSS 屬性,確保載入自訂字型時文字不會消失。
強制自動重排
指出 JavaScript 何時會強制瀏覽器重新計算網頁版面配置,可能導致效能問題。
提升圖片傳送效能
建議最佳化圖片載入的方式,例如使用 AVIF 或 WebP 等新式格式,並確保圖片大小正確。
INP 細目
顯示 INP 子部分,協助找出最佳化機會,進而改善 INP。
版面配置位移主因
指出導致網頁發生非預期移動的特定 DOM 元素,進而造成累計版面配置位移。
LCP 細目
顯示 LCP 子部分,協助找出最佳化商機,進而改善 LCP。
LCP 要求探索
找出 LCP 圖片要求時間超出預期的原因。
舊版 JavaScript
標記過時的 JavaScript 程式碼,這類程式碼對大多數新式瀏覽器而言可能較慢且不必要。
新式 HTTP
檢查是否有較新的網路通訊協定 (例如 HTTP/2 或 HTTP/3),以改善要求和回應的多工處理和速度。
網路依附元件樹狀結構
找出阻礙網頁初始轉譯作業的主要依附元件鏈。
最佳化 DOM 大小
如果網頁上有大量 HTML 元素,可能會影響轉譯效能,系統就會偵測到這類問題。
針對行動裝置最佳化可視區域
檢查網頁的可視區域是否已正確設定,確保不會在行動裝置上造成 300 毫秒的輕觸延遲。
轉譯封鎖要求
找出會阻礙網頁初始轉譯作業,進而導致 LCP 延遲的資源。
第三方
列出網頁上載入的第三方資源。
使用有效的快取生命週期
找出導致重複造訪網頁時可能出現不必要下載作業的次佳快取政策。