文字型資源應壓縮,以盡量減少網路位元組總數。Lighthouse 報告的「Opportunity」部分會列出所有未壓縮的文字型資源:
Lighthouse 如何處理文字壓縮
Lighthouse 會收集所有回應:
- 具有文字型資源類型。
- 請勿加入設為
br
、gzip
或deflate
的content-encoding
標頭。
接著,Lighthouse 會使用 GZIP 壓縮每個項目,以計算可節省的費用。
如果回應的原始大小小於 1.4KiB,或是可能壓縮的壓縮量小於原始大小的 10%,Lighthouse 不會在結果中標記該回應。
如何在伺服器上啟用文字壓縮
在提供這些回應的伺服器上啟用文字壓縮,以通過這項稽核。
瀏覽器要求資源時,會使用 Accept-Encoding
HTTP 要求標頭指出其支援的壓縮演算法。
Accept-Encoding: gzip, compress, br
如果瀏覽器支援 Brotli (br
) 功能,建議您使用 Brotli,因為這麼做可以縮減資源檔案大小,超過其他壓縮演算法。搜尋 how to enable Brotli compression in <X>
,其中 <X>
是伺服器名稱。自 2022 年 12 月起,除了 Safari 的 Safari 以外,所有主要瀏覽器都支援 Brotli。如需更新,請參閱瀏覽器相容性。
使用 GZIP 做為 Brotli 的備用方案。所有主要瀏覽器都支援 GZIP,但效率低於 Brotli。如需範例,請參閱伺服器設定。
您的伺服器應傳回 Content-Encoding
HTTP 回應標頭,以指明使用的壓縮演算法。
Content-Encoding: br
在 Chrome 開發人員工具中檢查回應是否已壓縮
如何檢查伺服器是否壓縮回應:
按下 Control+Shift+J
(或在 Mac 上按下 Command+Option+J
) 開啟開發人員工具。按一下 [網路] 分頁。
[comment]: <> (以下清單是 web.dev 上的簡碼,但並非從英文翻譯成英文)。1. 按下 Control+Shift+J
(或在 Mac 上按下 Command+Option+J
) 開啟開發人員工具。2. 按一下「網路」分頁標籤。3. 按一下您要查看回覆的要求。
4. 按一下「標頭」分頁標籤。
5. 檢查「Response Headers」部分的 content-encoding
標頭。
如何比較回應的壓縮和解壓縮大小:
[comment]: <> (以下清單是 web.dev 上的簡碼,但並非從英文翻譯成英文)。1. 按下 Control+Shift+J
(或在 Mac 上按下 Command+Option+J
) 開啟開發人員工具。2. 按一下「網路」分頁標籤。3. 啟用大型要求列。請參閱使用大型要求列。4. 查看您想要的回應的「大小」欄。頂部的值是壓縮後的大小。底部值為解壓縮後的大小。
另請參閱壓縮及壓縮網路酬載。
堆疊專屬指南
Joomla
啟用「Gzip 網頁壓縮」設定 (依序點選「系統」 >「全域設定」 >「伺服器」)。
WordPress
請在網路伺服器設定中啟用文字壓縮功能。