Gzip
Gzip 是常見的文字壓縮,能降低 HTML/CSS/JS 傳輸大小。若 Brotli 不可用,gzip 仍是基本必備。
定義
Gzip 是廣泛支援的壓縮方式,用於壓縮文字資源以降低傳輸量。即使你優先使用 Brotli,gzip 仍是重要的 fallback,確保各種客戶端都能獲得壓縮收益。
為什麼重要
- 大幅降低傳輸量 — 文字資源通常可壓縮 60-80%,直接改善 LCP 和 TTFB
- 相容性最高 — 所有現代瀏覽器和幾乎所有 HTTP 客戶端都支援
- 對大型 JS/CSS bundle 特別有效 — 壓縮後可能從 1MB 降到 300KB
- 降低頻寬成本 — 傳輸量減少意味著更少的 CDN/流量費用
- 改善行動裝置體驗 — 在較慢的行動網路上,壓縮效果更明顯
- 是 Brotli 的必要 fallback — 不支援 Brotli 的客戶端仍能受益
- SEO 信號 — Google PageSpeed Insights 會檢查壓縮是否啟用
怎麼做(實作重點)
- 在 CDN/伺服器層級啟用 gzip(通常一個設定即可)
- 設定正確的 Content-Encoding: gzip 回應頭
- 只壓縮文字類型:text/html、text/css、application/javascript、application/json 等
- 不要壓縮已壓縮的格式(圖片、影片、PDF)— 浪費 CPU 且可能變大
- 使用靜態 gzip:預先壓縮 .gz 檔案,避免即時壓縮的 CPU 開銷
- 搭配快取:壓縮後的資源應該被快取,避免重複壓縮
- 測試壓縮率:用 DevTools 確認 Transfer Size vs Resource Size
範例
nginx
# nginx.conf
http {
gzip on;
gzip_vary on; # 加入 Vary: Accept-Encoding
gzip_min_length 1024; # 小於 1KB 不壓縮(收益太低)
gzip_comp_level 6; # 壓縮等級 1-9(6 是平衡點)
# 只壓縮這些 MIME 類型
gzip_types
text/plain
text/css
text/javascript
application/javascript
application/json
application/xml
image/svg+xml;
# 預壓縮的 .gz 檔案優先
gzip_static on;
}bash
# 檢查回應頭是否有 Content-Encoding: gzip
curl -I -H "Accept-Encoding: gzip" https://example.com/bundle.js
# 期望看到:
# Content-Encoding: gzip
# Vary: Accept-Encoding
# 比較壓縮前後大小
curl -so /dev/null -w '%{size_download}' https://example.com/bundle.js # 無壓縮
curl -so /dev/null -w '%{size_download}' -H "Accept-Encoding: gzip" https://example.com/bundle.js # 有壓縮常見問題
關於這個詞彙的常見問答。