概述简单点讲,GZip 就是一种压缩技术。更多技术干货亲锁定公众号"朗妹儿" 每天都有新内容。经过 GZip 压缩后的资源文件(比如网页中的HTML、XML、CSS、JavaScript、JSON、图片文件等等),大小可以变为原来的 30%以上。
在网站和 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 秒!
搞定!
閱讀更多 全階魔方 的文章