降低要求數量並減少傳輸大小

Lighthouse 會報告頁面載入時的網路要求數量,以及網頁載入時傳輸的資料量:

Lighthouse Keep 要求數量偏低和傳輸大小小稽核的螢幕截圖
  • 「Total」資料列的「Requests」和「Transfer Size」值是新增「Image」、「Script」、「Font」、「Stylesheet」、「Other」、「Document」和「「Media」資料列的值。
  • 「第三方」欄不會計算「總計」列的值。其目的為讓您瞭解要求總數,以及來自第三方網域的總移轉大小。第三方要求可以是任何其他資源類型的組合。

如何減少資源數量和傳輸大小

高資源數量或大量傳輸大小對負載效能的影響,取決於要求的資源類型。

CSS 和 JavaScript

根據預設,CSS 和 JavaScript 檔案的要求會遭到封鎖。換句話說,所有 CSS 和 JavaScript 要求都完成後,瀏覽器才能在螢幕上算繪內容。如果其中有任何檔案在速度緩慢的伺服器中代管,則該一個緩慢的伺服器可能會延遲整個轉譯程序。請參閱「最佳化 JavaScript」、「最佳化第三方資源」和「將 CSS 最佳化」一文,瞭解如何只寄送您實際需要的程式碼。

受影響的指標:全部

圖片

圖片要求並未禁止轉譯 (例如 CSS 和 JavaScript),但仍可能會對載入效能造成負面影響。常見的問題是,行動裝置使用者在載入網頁時,發現圖片已開始載入,但需要一點時間才能完成。如要瞭解如何加快圖片載入速度,請參閱最佳化圖片

受影響的指標:首次顯示內容所需時間首次有效繪製速度指數

字型

如果字型檔案載入效率不彰,載入頁面時可能會無法顯示文字。請參閱「最佳化字型」,瞭解如何預設採用使用者裝置上可用的字型,然後在下載完成後切換至自訂字型。

受影響的指標:首次顯示內容所需時間

文件

如果您的 HTML 檔案較大,瀏覽器就必須花更多時間剖析 HTML 並從剖析的 HTML 建構 DOM 樹狀結構。

受影響的指標:首次顯示內容所需時間

媒體

GIF 動畫檔案通常非常大。請參閱「以影片取代 GIF」一文,瞭解如何更快載入動畫。

受影響的指標:首次顯示內容所需時間

運用效能預算避免發生迴歸問題

當您對程式碼進行最佳化以減少要求數量和傳輸大小後,請參閱設定效能預算,瞭解如何避免迴歸問題。

資源

「保持要求數量偏低,並減少傳輸大小小」稽核的原始碼