大量的網路酬載往往會延長網頁載入時間。也會讓使用者付費,例如使用者可能需要支付更多行動數據費用。因此,減少網頁網路要求的總大小,可以讓使用者在您的網站「和」錢包中獲得良好的體驗。
Lighthouse 網路酬載稽核失敗的方式
Lighthouse 會根據網頁要求的所有資源顯示總大小 (以 KiB 為單位)。系統會優先顯示最大的要求:
根據 HTTP Archive 資料,網路酬載的中位數介於 1,700 和 1,900 KiB 之間。為顯示最高酬載,Lighthouse 會標示網路請求總量超過 5,000 KiB 的網頁。
如何縮減酬載大小
盡量將位元組大小維持在 1,600 KiB 以下。 這個目標是根據理論上可透過 3G 連線下載的資料量,同時達到 10 秒或更短的互動時間。
以下是保持酬載大小縮減的方法:
- 延遲要求,直到需要時才執行。如要瞭解可能的做法,請參閱 PRPL 模式。
- 請盡可能縮小要求。可能的技巧包括:
- 快取要求,讓網頁在使用者重複造訪時不必重新下載資源。(請參閱網路可靠性到達網頁,瞭解快取的運作方式和實作方式)。
堆疊專屬指南
Angular
套用路徑層級的程式碼分割,盡可能減少 JavaScript 套件大小。此外,建議您使用 Angular Service Worker 預先快取素材資源。
Drupal
建議你使用回應式圖片樣式來縮減頁面上載入圖片的大小。如果您使用 Views
在網頁上顯示多個內容項目,建議您導入分頁功能,限制特定頁面顯示的內容項目數量。
Joomla
建議你在文章類別中顯示摘錄 (「閱讀完整內容」連結是一種常見的解決方案)、減少特定頁面顯示的文章數量、將較長的文章分為多個頁面,或使用可延遲載入留言的外掛程式。
WordPress
建議你在文章清單中顯示摘錄 (可使用「更多」標記)、減少特定頁面顯示的文章數量、將較長的文章分為多個頁面,或使用可延遲載入留言的外掛程式。