05月26, 2017

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

本博客使用 Nginx 反向代理 Node,正好玩玩 GZip 压缩。

概述

简单点讲,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 很熟的话,也可以自己分析。

我用的是卡卡网测速工具

测试结果如下:

alt

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

操作

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

nginx -t

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

用 VIM 打开配置文件:

vim /etc/nginx/nginx.conf

找到 GZip Setting 部分,进行修改:

##
# GZip Settings
##

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

# IE6 对 GZip 支持不好,不给它玩 GZip。
GZip_disable "msie6";

# Nginx 作为反向代理的时候启用。我是用 Nginx 做 NodeJS 的反向代理,开了!
GZip_proxied any;

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

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

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

# 识别http的协议版本(1.0/1.1)
GZip_http_version 1.1;

# 用于设置进行压缩的文件类型。我的博客主要是 HTML、CSS、JS 以及图片
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:

nginx -s reload

测试

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

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

如果输出最后一行为:

Content-Encoding: GZip

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

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

看看压缩效果

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

alt

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

搞定!

本文链接:http://www.xiaojichao.com/post/gzip.html

-- EOF --

Comments