避免產生龐大的網路酬載

大型網路酬載與長時間的載入時間密切相關。也會消耗使用者費用;例如,使用者可能需要支付更多行動數據用量。因此,減少網頁的網路要求總大小,對網站「和」錢包的使用者體驗有益。

Lighthouse 網路酬載稽核失敗

Lighthouse 會以 KiB 為單位,顯示網頁要求的所有資源總計大小。提出最大的要求會優先顯示:

Lighthouse 為避免網路酬載稽核作業的螢幕截圖

根據 HTTP 封存資料,網路酬載的中位數介於 1,700 至 1,900 KiB 之間。為協助列出最高酬載,Lighthouse 會標記所有網路要求總要求超過 5,000 KiB 的頁面。

如何縮減酬載大小

盡量將總位元組大小保持在 1,600 KiB 以下。 這個目標是根據理論可下載至 3G 連線的資料量,同時仍達到 10 秒以下的互動準備時間而定。

以下是減少酬載大小的一些方法:

堆疊專屬指南

Angular

請套用路徑層級程式碼分割,盡可能減少 JavaScript 套件的大小。此外,請考慮使用 Angular Service Worker 預先快取資產。

Drupal

建議您使用回應式圖片樣式,縮減網頁載入的圖片大小。如果您使用 View 在頁面上顯示多個內容項目,請考慮實作分頁以限制特定頁面顯示的內容項目數量。

Joomla

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

WordPress

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

資源

「避免使用這個網路酬載」稽核的原始碼