在 Nginx 中开启 GZip 压缩，加快博客加载速度

概述简单点讲，GZip 就是一种压缩技术。更多技术干货亲锁定公众号"朗妹儿"

在网站和 Web 应用中，如果 Web 服务器端能自动把用户请求的资源文件用 GZip 压缩，然后再发送给客户端，而浏览器端又中能自动解压或者解析经 GZip 压缩过后的资源文件，那么就可以有效减少网络带宽的消耗，提升传输速度，用户浏览网页的速度就会快很多。

好消息是，现代浏览器都支持对 GZip 压缩过的资源的自动解压解析。而流行的 Web 服务器也都带有支持 GZip 压缩的模块。比如，Nginx 上就带有支持 GZip 压缩 的 ngx_http_gzip_module 模块，只要在 Nginx 的配置文件中配置开启 GZip 压缩，并设置一定参数就可以搞定。

启用 GZip 压缩是网站 和 Web 应用性能优化的手段之一。Steve Souders 在《高性能网站建设指南》和《高性能网站建设进阶指南》这两本书里，已经详细描述了 GZip 压缩的原理。有兴趣的可以去看看这两本书。

先测试一下未开启 GZip 压缩时网站的访问速度

先找个网站测速工具，测一下未启用 GZip 压缩时的网站访问速度。当然，如果你对 Chrome Devtools 很熟的话，也可以自己分析。

我用的是卡卡网测速工具。

在未启用 GZip 压缩的情况下，我博客首页的原始网页大小是 37491 字节，平均打开时间为 5.679 秒。

操作

SSH 登录到主机，在控制台下键入如下命令，查看 nginx 配置文件路径：

1. nginx -t

系统显示配置文件为： /etc/nginx/nginx.conf。

用 VIM 打开配置文件：

1. vim /etc/nginx/nginx.conf

找到 GZip Setting 部分，进行修改：

1. ##

2. # GZip Settings

3. ##

4.

5. # 该指令用于开启或关闭 GZip 模块，取值为 on 或 off，设置为 on 就是开启 GZip 压缩。

6. GZip on;

7.

8. # IE6 对 GZip 支持不好，不给它玩 GZip。

9. GZip_disable "msie6";

10.

11. # Nginx 作为反向代理的时候启用。我是用 Nginx 做 NodeJS 的反向代理，开了！

12. GZip_proxied any;

13.

14. # 用于设置 GZip 压缩比，取值为 1-9，默认是 1。数字越大压缩的越好，也越占用CPU时间。我们就取 5 好了。

15. GZip_comp_level 5;

16.

17. # 用于设置启用 GZip 压缩的最小文件大小，小于设置值的文件将不会压缩。默认值是0，不管页面多大都压缩。建议设置成大于1k的字节数，小于1k可能会越压越大。

18. GZip_min_length 1k;

19.

20. # 设置系统获取几个单位的缓存用于存储 GZip 的压缩结果数据流。16 8k代表以8k为单位，安装原始数据大小以8k为单位的16倍申请内存。

21. GZip_buffers 16 8k;

22.

23. # 识别http的协议版本(1.0/1.1)

24. GZip_http_version 1.1;

25.

26. # 用于设置进行压缩的文件类型。我的博客主要是 HTML、CSS、JS 以及图片

27. GZip_types text/plain text/css application/json application/x-javascript text/javascript text/xml application/xml application/xml+rss image/jpeg image/gif image/png;

:wq 保存并退出 VIM，然后执行如下命令，重启 Nginx：

1. nginx -s reload

测试

先用 curl 测试一下 GZip 是否成功开启：

1. curl -I -H "Accept-Encoding: GZip, deflate" "http://www.xiaojichao.com/"

如果输出最后一行为：

1. Content-Encoding: GZip

则表示 GZip 压缩成功开启了。

再用同样的方法，分别测试一下 JavaScript、CSS、图像文件是否被压缩。

看看压缩效果

最后再到卡卡网上测试一下启用压缩的效果。

网页大小已经被压缩为 11953 字节，平均打开时间变成了 0.162 秒！

搞定！

閱讀更多 全階魔方 的文章

關鍵字: Chrome 自动 服务器端