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