Nginx 开启 Gzip 与浏览器缓存：让网站加载快一倍

网站慢，第一刀该砍在传输层

很多「网站加载慢」的锅不在代码，而在没压缩、没缓存。一个 2MB 的页面，开 Gzip 可能压到 300KB；静态资源设好浏览器缓存，二次访问直接走本地。这两件事 Nginx 一行配置就能搞定，却常被忽略。

一、开启 Gzip 压缩

Gzip 对文本类资源（HTML/CSS/JS/JSON）压缩率极高，对图片（本身已压缩）意义不大，需排除。

# /etc/nginx/nginx.conf 或站点配置
gzip on;
gzip_vary on;
gzip_min_length 1024;          # 小于 1KB 不压缩（压缩反而亏）
gzip_comp_level 6;             # 1-9，6 是速度与比的平衡点
gzip_proxied any;
gzip_types
  text/plain
  text/css
  text/javascript
  application/javascript
  application/json
  application/xml+rss
  image/svg+xml;

改完 nginx -t && nginx -s reload 生效。用浏览器 DevTools 的 Network 面板看响应头里是否出现 Content-Encoding: gzip 即可验证。

二、浏览器缓存：Cache-Control 与 ETag

核心思路：内容不变的资源缓存很久，内容变的资源靠文件名哈希破缓存。

# 带哈希的文件名（如 app.ab12cd.js）可长缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

# HTML 不缓存或短缓存，保证更新及时生效
location ~* \.html$ {
    add_header Cache-Control "no-cache";
}

配合构建工具给静态资源加 contenthash 文件名（如 main.3f9a.js），更新后文件名变、自动失效，旧资源却能被长缓存复用。

三、ETag 与 Last-Modified

Nginx 默认开启 ETag（静态文件）。客户端二次请求带 If-None-Match，资源没变就返回 304 Not Modified，只传头部不传 body，省带宽。

etag on;           # 默认即开，显式写出便于记忆

四、别忘了这几个加速点

• 开启 HTTP/2：listen 443 ssl http2;，多路复用显著提速（需 HTTPS）。
• SSL 会话复用：ssl_session_cache shared:SSL:10m; 减少握手开销。
• 静态资源走 CDN：把图片/JS/CSS 丢到 CDN，源站压力骤降。
• 关闭不必要日志：高频静态请求可 access_log off; 降 IO。

五、验证效果

# 看响应头
curl -I https://fsdata.site/app.js
# 期望看到：
# Content-Encoding: gzip
# Cache-Control: public, immutable
# ETag: "xxxx"

小结

前端性能优化，传输层是性价比最高的一层。Gzip 压文本、Cache-Control 管缓存、ETag/304 省带宽、HTTP/2 + CDN 再锦上添花。把这些配进 Nginx，首屏加载时间砍掉一半并不夸张——而且全是配置、零代码改动。