大型網路酬載與長時間的載入時間密切相關。也會消耗使用者費用;例如,使用者可能需要支付更多行動數據用量。因此,減少網頁的網路要求總大小,對網站「和」錢包的使用者體驗有益。
Lighthouse 網路酬載稽核失敗
Lighthouse 會以 KiB 為單位,顯示網頁要求的所有資源總計大小。提出最大的要求會優先顯示:
![Lighthouse 為避免網路酬載稽核作業的螢幕截圖](https://developer.chrome.com/static/docs/lighthouse/performance/total-byte-weight/image/a-screenshot-the-lightho-5edd6e4e68e25.png?authuser=7&hl=zh-tw)
根據 HTTP 封存資料,網路酬載的中位數介於 1,700 至 1,900 KiB 之間。為協助列出最高酬載,Lighthouse 會標記所有網路要求總要求超過 5,000 KiB 的頁面。
如何縮減酬載大小
盡量將總位元組大小保持在 1,600 KiB 以下。 這個目標是根據理論可下載至 3G 連線的資料量,同時仍達到 10 秒以下的互動準備時間而定。
以下是減少酬載大小的一些方法:
- 將要求延後到有需要為止。請參閱 PRPL 模式一文,瞭解其中一種可行的做法。
- 盡可能縮小要求範圍。可能的技巧包括:
- 請快取要求,避免頁面在重複造訪時重新下載資源。(如要瞭解快取的運作方式和實作方式,請參閱網路可靠性到達網頁)。
堆疊專屬指南
Angular
請套用路徑層級程式碼分割,盡可能減少 JavaScript 套件的大小。此外,請考慮使用 Angular Service Worker 預先快取資產。
Drupal
建議您使用回應式圖片樣式,縮減網頁載入的圖片大小。如果您使用 View 在頁面上顯示多個內容項目,請考慮實作分頁以限制特定頁面顯示的內容項目數量。
Joomla
建議你在文章類別中顯示摘錄 (其中一種常見的解決方案為「閱讀完整內容」連結)、減少指定頁面顯示的文章數量、將長篇文章分為多個頁面,或使用外掛程式延遲載入留言。
WordPress
建議您在文章清單中顯示摘錄 (您可以使用「更多」標記)、減少特定頁面顯示的文章數量、將較長的文章分成多個頁面,或是使用外掛程式延遲載入留言。