用 curl 和浏览器开发者工具检查网站是否启用了压缩(gzip/br)

前阵子我给自己的 WordPress 站点做了一轮优化,最先想确认的一件事就是:网页传输有没有启用压缩。不然同样的页面内容,带宽白白浪费,访问体验也不稳定。

我用的站点是:https://blog.sinovale.com,服务器是 Nginx。下面把我当时用到的检查方法整理成一篇可直接照抄的教程。


先搞清楚:我说的“压缩”是哪种?

很多人说“压缩”其实混在一起讲了两件事:

  • 传输压缩(HTTP 压缩):gzip / brotli(br)
    这是我这篇文章要检查的重点,能直接减少传输体积。
  • 资源压缩:比如 JS/CSS 的 minify、图片 WebP/AVIF
    这属于“内容本身更小”,和 gzip/br 不是一回事。

方法一:用浏览器开发者工具看响应头(最直观)

在电脑浏览器打开网页后:

  1. F12 打开开发者工具
  2. Network(网络)
  3. 刷新页面(Ctrl+R)
  4. 点开任意一个请求(建议先看首页 Document,再看 JS/CSS)
  5. Response Headers 里找:
  • content-encoding: gzip → 说明启用了 gzip 压缩
  • content-encoding: br → 说明启用了 brotli 压缩(通常压缩率更高)
  • 如果没有 content-encoding → 这条请求基本就是未压缩返回

另外,很多时候你还会看到 Size / Transferred

  • Transferred 明显小于 Size,通常也意味着压缩或缓存起作用(但最终还是以 content-encoding 为准)。

方法二:用 curl 一条命令确认(最准确、最省事)

我更喜欢用命令行,因为结论更硬。

1)检查首页 HTML 是否压缩

curl -I -H 'Accept-Encoding: gzip,br' https://blog.sinovale.com/

我这边的返回里有关键一行:

  • content-encoding: gzip

这就说明:首页 HTML 已经开启 gzip 传输压缩

同时还能看到:

  • server: nginx(确认是 Nginx 返回)
  • vary: Accept-Encoding, Cookie(告诉缓存层:不同压缩能力和 Cookie 会影响响应版本)

小提示:请求头里带上 Accept-Encoding: gzip,br 的意义是“我客户端支持 gzip 和 br”,服务器会从中选择它支持的方式返回。


再测两条:CSS 和 JS 有没有一起压缩(很多人漏在这里)

很多站只压了 HTML,结果 JS/CSS 没压,那体验还是差一截。所以我又测了两个典型静态文件:

2)测试 WordPress 自带的 CSS

curl -I -H 'Accept-Encoding: gzip,br' "https://blog.sinovale.com/wp-includes/css/dist/block-library/style.min.css"

返回包含:

  • content-encoding: gzip

说明 CSS 也在压缩。

3)测试 WordPress 自带的 jQuery

curl -I -H 'Accept-Encoding: gzip,br' "https://blog.sinovale.com/wp-includes/js/jquery/jquery.min.js"

返回同样包含:

  • content-encoding: gzip

说明 JS 也在压缩。

到这里基本可以下结论:我站点的 HTML / CSS / JS 都启用了 gzip 传输压缩。


为什么我没看到 br(brotli)?

即便我请求里写了 Accept-Encoding: gzip,br,服务器最后还是返回 content-encoding: gzip,一般意味着:

  • 服务器没有启用 brotli(Nginx 没装 brotli 模块或没开配置),或者
  • brotli 只对部分类型生效(但我这里 HTML/CSS/JS 都没返回 br,通常就是没启用)

我个人的选择是:gzip 够用就先不折腾。对小机器来说,brotli 的压缩率可能更好,但也可能带来更多 CPU 开销。除非你确定访客量大、带宽紧、并且愿意花时间把 brotli 模块装完整,否则 gzip 已经能解决 80% 的问题。


我额外建议再“体检”三类常见漏网之鱼

如果你也想检查得更彻底,可以再测这三类:

1)REST API(JSON)

curl -I -H 'Accept-Encoding: gzip,br' https://你的域名/wp-json/

看有没有 content-encoding: gzip

2)站点地图(XML)

curl -I -H 'Accept-Encoding: gzip,br' https://你的域名/sitemap.xml

看有没有 content-encoding: gzip

3)SVG(有些主题/图标会用)

curl -I -H 'Accept-Encoding: gzip,br' https://你的域名/xxx.svg

看有没有 content-encoding: gzip


总结

我的做法很简单:

  • 浏览器看 content-encoding(直观)
  • curl -I 看响应头(结论硬)
  • 再用 CSS/JS 验证一遍,避免“只压了 HTML”这种半套配置

到最后我确认:blog.sinovale.com 现在 gzip 压缩已启用,HTML/CSS/JS 都在压缩传输。


订阅评论
提醒

0 评论
内联反馈
查看所有评论