啟用文字壓縮

文字型資源應壓縮,以盡量減少網路位元組總數。Lighthouse 報告的「Opportunity」部分會列出所有未壓縮的文字型資源:

Lighthouse 啟用文字壓縮稽核功能的螢幕截圖

Lighthouse 如何處理文字壓縮

Lighthouse 會收集所有回應:

  • 具有文字型資源類型。
  • 請勿加入設為 brgzipdeflatecontent-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 標頭。

內容編碼回應標頭
content-encoding 回應標頭。

如何比較回應的壓縮和解壓縮大小:

[comment]: <> (以下清單是 web.dev 上的簡碼,但並非從英文翻譯成英文)。1. 按下 Control+Shift+J (或在 Mac 上按下 Command+Option+J) 開啟開發人員工具。2. 按一下「網路」分頁標籤。3. 啟用大型要求列。請參閱使用大型要求列。4. 查看您想要的回應的「大小」欄。頂部的值是壓縮後的大小。底部值為解壓縮後的大小。

另請參閱壓縮及壓縮網路酬載

堆疊專屬指南

Joomla

啟用「Gzip 網頁壓縮」設定 (依序點選「系統」 >「全域設定」 >「伺服器」)。

WordPress

請在網路伺服器設定中啟用文字壓縮功能。

資源