避免產生龐大的網路酬載

大量的網路酬載往往會延長網頁載入時間。也會讓使用者付費,例如使用者可能需要支付更多行動數據費用。因此,減少網頁網路要求的總大小,可以讓使用者在您的網站「和」錢包中獲得良好的體驗

Lighthouse 網路酬載稽核失敗的方式

Lighthouse 會根據網頁要求的所有資源顯示總大小 (以 KiB 為單位)。系統會優先顯示最大的要求:

Lighthouse 的「避免耗用大量網路酬載」稽核項目螢幕截圖

根據 HTTP Archive 資料,網路酬載的中位數介於 1,700 和 1,900 KiB 之間。為顯示最高酬載,Lighthouse 會標示網路請求總量超過 5,000 KiB 的網頁。

如何縮減酬載大小

盡量將位元組大小維持在 1,600 KiB 以下。 這個目標是根據理論上可透過 3G 連線下載的資料量,同時達到 10 秒或更短的互動時間

以下是保持酬載大小縮減的方法:

堆疊專屬指南

Angular

套用路徑層級的程式碼分割,盡可能減少 JavaScript 套件大小。此外,建議您使用 Angular Service Worker 預先快取素材資源。

Drupal

建議你使用回應式圖片樣式來縮減頁面上載入圖片的大小。如果您使用 Views 在網頁上顯示多個內容項目,建議您導入分頁功能,限制特定頁面顯示的內容項目數量。

Joomla

建議你在文章類別中顯示摘錄 (「閱讀完整內容」連結是一種常見的解決方案)、減少特定頁面顯示的文章數量、將較長的文章分為多個頁面,或使用可延遲載入留言的外掛程式。

WordPress

建議你在文章清單中顯示摘錄 (可使用「更多」標記)、減少特定頁面顯示的文章數量、將較長的文章分為多個頁面,或使用可延遲載入留言的外掛程式。

資源

避免耗用大量網路酬載稽核的程式碼