Nginx gzip 压缩：一个配置让页面加载快 3 倍

背景监控大屏首页加载慢，F12 一看：

chart.min.js：200KB

index.html：5KB

加上 CSS、字体，一共 250KB+

服务器带宽不大，每次加载都要等。

想做到：让 Nginx 自动压缩响应，减少传输量。

解决一、基础配置在 /etc/nginx/nginx.conf 的 http 块里加：

bash 复制代码

gzip on;
gzip_vary on;
gzip_comp_level 5;
gzip_min_length 1024;
gzip_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/javascript
    application/json
    application/xml
    application/xml+rss
    image/svg+xml;

改完：

bash 复制代码

sudo nginx -t && sudo systemctl reload nginx

二、每个指令干什么

指令	作用
`gzip on`	开启 gzip
`gzip_vary on`	加 `Vary: Accept-Encoding`，让 CDN/代理正确缓存
`gzip_comp_level 5`	压缩级别 1-9，5 是速度和压缩比的最佳平衡
`gzip_min_length 1024`	小于 1KB 不压缩（压缩后反而更大）
`gzip_types`	哪些 MIME 类型要压缩

关键点：gzip_types 默认只压 text/html，JS / CSS / JSON 都要显式加。

三、验证生效

bash 复制代码

# 看响应头有没有 Content-Encoding: gzip
curl -s -H "Accept-Encoding: gzip" -D - -o /dev/null https://example.com/static/chart.min.js | grep -i encoding

期望：

css 复制代码

content-encoding: gzip

对比压缩前后大小：

bash 复制代码

# 不压缩
curl -s -o /dev/null -w "原始: %{size_download} bytes\n" https://example.com/static/chart.min.js

# 压缩
curl -s -H "Accept-Encoding: gzip" -o /dev/null -w "压缩: %{size_download} bytes\n" https://example.com/static/chart.min.js

典型输出：

makefile 复制代码

原始: 205000 bytes
压缩: 65000 bytes

压缩到 1/3。

验证效果

文件	原始	gzip 后	压缩比
chart.min.js	205KB	65KB	68%
index.html	5KB	1.5KB	70%
style.css	30KB	8KB	73%
合计	240KB	75KB	69%

页面加载时间：

改造前：2.1s

改造后：0.7s

3 倍提速，一行配置的事。

三个坑坑 1：gzip_types 忘了加 JS Nginx 默认只压 text/html。application/javascript 不加，chart.min.js 就白压了。

验证方法：

bash 复制代码

curl -s -H "Accept-Encoding: gzip" -D - -o /dev/null https://example.com/static/chart.min.js | grep -i encoding

没输出 = 没压缩。

坑 2：gzip_comp_level 调到 9 级别越高越耗 CPU。级别 9 比级别 5 只多压 3%，但 CPU 多花 50%。

建议：

静态资源：级别 5~6

动态响应（API）：级别 3~4

小学生版解释：

抽真空 90% 就够了，非要抽到 99% 得花大力气，收益很小。

坑 3：已经压缩的文件又压一遍如果你有 .gz 预压缩文件（比如构建时生成），要用 gzip_static 直接发，不要再压。

csharp 复制代码

gzip_static on;

效果：Nginx 优先找 chart.min.js.gz，直接发送，省 CPU。

适合：静态资源多、构建流程能生成 .gz 的场景。