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

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

• 「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」一文，瞭解如何更快載入動畫。

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

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

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

資源

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