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」一文,瞭解如何更快載入動畫。
受影響的指標:首次顯示內容所需時間
運用效能預算避免發生迴歸問題
當您對程式碼進行最佳化以減少要求數量和傳輸大小後,請參閱設定效能預算,瞭解如何避免迴歸問題。