gzip – Linux系统运维日志

Nginx性能优化功能- Gzip压缩(大幅度提高页面加载速度)

Nginx开启Gzip压缩功能，可以使网站的css、js 、xml、html 文件在传输时进行压缩，提高访问速度, 进而优化Nginx性能! Web网站上的图片，视频等其它多媒体文件以及大文件，因为压缩效果不好，所以对于图片没有必要支压缩，如果想要优化，可以图片的生命周期设置长一点，让客户端来缓存。开启Gzip功能后，Nginx服务器会根据配置的策略对发送的内容, 如css、js、xml、html等静态资源进行压缩, 使得这些内容大小减少，在用户接收到返回内容之前对其进行处理，以压缩后的数据展现给客户。这样不仅可以节约大量的出口带宽，提高传输效率，还能提升用户快的感知体验, 一举两得; 尽管会消耗一定的cpu资源，但是为了给用户更好的体验还是值得的。

经过Gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用户浏览页面的时候速度会快得多。Gzip 的压缩页面需要浏览器和服务器双方都支持，实际上就是服务器端压缩，传到浏览器后浏览器解压并解析。浏览器那里不需要我们担心，因为目前的巨大多数浏览器都支持解析Gzip过的页面。

Gzip压缩作用：将响应报⽂发送⾄客户端之前可以启⽤压缩功能，这能够有效地节约带宽，并提⾼响应⾄客户端的速度。Gzip压缩可以配置http,server和location模块下。Nginx开启Gzip压缩功能的配置如下:

#修改nginx配置文件 /usr/local/nginx/conf/nginx.conf
[root@localhost ~]# vim /usr/local/nginx/conf/nginx.conf        #将以下配置放到nginx.conf的http{ ... }节点中

#修改配置为
gzip on;                    #开启gzip压缩功能
gzip_min_length 10k;         #设置允许压缩的页面最小字节数; 这里表示如果文件小于10个字节，就不用压缩，因为没有意义，本来就很小.
gzip_buffers 4 16k;         #设置压缩缓冲区大小，此处设置为4个16K内存作为压缩结果流缓存
gzip_http_version 1.1;      #压缩版本
gzip_comp_level 2;   #设置压缩比率，最小为1，处理速度快，传输速度慢；9为最大压缩比，处理速度慢，传输速度快; 这里表示压缩级别，可以是0到9中的任一个，级别越高，压缩就越小，节省了带宽资源，但同时也消耗CPU资源，所以一般折中为6
gzip types text/css text/xml application/javascript;      #制定压缩的类型,线上配置时尽可能配置多的压缩类型!
gzip_disable "MSIE [1-6].";       #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
gzip vary on;    #选择支持vary header；改选项可以让前端的缓存服务器缓存经过gzip压缩的页面; 这个可以不写，表示在传送数据时，给客户端说明我使用了gzip压缩

线上使用的Gzip压缩配置

[root@external-lb02 ~]# cat /data/nginx/conf/nginx.conf
........
http {
.......
    gzip  on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 9;
    gzip_types       text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json;
    gzip_disable "MSIE [1-6].";
    gzip_vary on;

}

如果不开启Gzip压缩功能(即注释掉Gzip的相关配置), 查看某个图片大小

[root@external-lb02 ~]#  ll  -h /data/web//www/test.bmp
-rw-r--r-- 1 root root 453K 3月  14 18:43 /data/web//www/test.bmp

如下可知, 文件没有被压缩,文件传输大小还是400多K

未分类

如果开启Nginx的Gzip压缩功能(即打开Gzip的相关配置), 然后再次访问test.bmp图片, 发现压缩后的该图片文件传输大小只有200多K !

未分类

通过上面测试对比, 发现Nginx开启Gzip压缩功能后, 定义的gzip type的文件在传输时的大小明显变小, 这样这会大大提高nginx访问性能.

直接用curl测试命令:

[root@fvtlb02 ~]# curl -I -H "Accept-Encoding: gzip, deflate" "http://fvtvfc-web.kevin.com/service-worker.js"
HTTP/1.1 200 OK
Server: nginx/1.12.2
Date: Mon, 26 Nov 2018 02:19:16 GMT
Content-Type: application/javascript; charset=utf-8
Connection: keep-alive
Vary: Accept-Encoding
Last-Modified: Sun, 25 Nov 2018 22:28:15 GMT
Vary: Accept-Encoding
ETag: W/"5bfb21ff-40be"
Content-Encoding: gzip

如上,response header头信息中出现"Conten_Encoding: gzip" , 就说明Nginx已开启了压缩 (在浏览器访问, 通过F12看请求的响应头部 也是一样)

Nginx的Gzip压缩功能虽然好用，但是下面两类文件资源不太建议启用此压缩功能。

1) 图片类型资源 (还有视频文件)

原因：图片如jpg、png文件本身就会有压缩，所以就算开启gzip后，压缩前和压缩后大小没有多大区别，所以开启了反而会白白的浪费资源。（可以试试将一张jpg图片压缩为zip，观察大小并没有多大的变化。虽然zip和gzip算法不一样，但是可以看出压缩图片的价值并不大）

2) 大文件资源

原因：会消耗大量的cpu资源，且不一定有明显的效果。

web网站性能优化：nginx开启GZIP压缩网页,JS,CSS

提高web网站性能优化，nginx开启GZIP压缩网页,JS,CSS,从而可以节约大量的带宽，提高传输效率，但是会消耗cpu资源，自己可以权衡一下，总体来说开启是值得的。

在nginx的nginx.conf的 http { } 里添加如下配置

nginx开启的配置：

gzipon;  #开启gzip
gzip_min_length 1024;  #低于1kb的资源不压缩，
gzip_comp_level 3; #压缩级别【1-9】，越大压缩率越高，同时消耗cpu资源也越多，建议设置在4左右。
gzip_types text/plainapplication/javascriptapplication/x-javascripttext/javascripttext/xmltext/css;  #需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片，下面会讲为什么。
gzip_disable "MSIE [1-6].";  #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
gzip_vary on;  #是否添加“Vary: Accept-Encoding”响应头

保存并重启nginx，刷新页面（为了避免缓存，请强制刷新）预览器上就能看到效果了。

火狐预览器：

未分类

谷歌预览器：

未分类

再去站长之家检查Seo:

未分类

可以看到压缩率100%,可怕，震惊！

注意几点：

（1）在gzip_http_version的默认值是1.1，就是说对HTTP/1.1协议的请求才会进行gzip压缩。
如果使用了proxy_pass进行反向代理，那么nginx和后端的upstream server之间是用HTTP/1.0协议通信的。
如果使用nginx通过反向代理做Cache Server，前端的nginx没有开启gzip，且后端的nginx上未设置gzip_http_version为1.0，那么Cache的url将不会被gzip压缩。

（2）gzip_min_length ：从上图可以看到最后一个js大小不到1K所以是不压缩的，倒数第二个js来源第三方所以也不进行压缩。
设置允许压缩的页面最小字节数，页面字节数从header头中的Content-Length中进行获取。默认值是0，不管页面多大都压缩。建议设置成大于1k的字节数，小于1k可能会越压越大。即: gzip_min_length 1024。

（3）gzip虽然好用，但是一下类型的资源不建议启用。图片类型，因为图片如jpg、png本身就会有压缩，所以就算开启gzip后，压缩前和压缩后大小没有多大区别，所以开启了反而会白白的浪费资源。

大文件，因为会消耗大量的cpu资源，且不一定有明显的效果。

配置Apache开启gzip压缩传输

开启模块

打开httpd.conf后，先将下面两行配置前面的#号去掉，这样apache就会启用这两个模块，其中mod_deflate是压缩模块，就是对要传输到客户端的代码进行gzip压缩；mod_headers模块的作用是告诉浏览器页面使用了gzip压缩，如果不开启mod_headers那么浏览器就会对gzip压缩过的页面进行下载，而无法正常显示。

LoadModule deflate_module modules/mod_deflate.so
LoadModule headers_module modules/mod_headers.so

代码

在httpd.conf中加入以下代码，可以加到任何空白地方，不了解apache的朋友，如果担心加错地方，就放到http.conf文件的最后一行，如果是虚拟服务器可以写.htaccess文件里面，然后放在项目下即可。

<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE
    SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
    SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
    SetEnvIfNoCase Request_URI .(?:pdf|mov|avi|mp3|mp4|rm)$ no-gzip dont-vary
    AddOutputFilterByType DEFLATE text/*
    AddOutputFilterByType DEFLATE application/ms* application/vnd* application/postscript application/javascript application/x-javascript
    AddOutputFilterByType DEFLATE application/x-httpd-php application/x-httpd-fastphp
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4.0[678] no-gzip
    BrowserMatch bMSIE !no-gzip !gzip-only-text/html
</IfModule>

检测配置文件

未分类

重启服务即可

未分类

开启nginx的gzip压缩功能,节省流量

开启网站的 gzip 压缩功能，通常可以高达70%，也就是说，如果你的网页有30K，压缩之后就变成9K，对于大部分网站，显然可以明显提高浏览速度（注：需要浏览器支持）。

nodejs + express

对于 nodejs + express 框架，启用方法非常简单，启用 compress() 中间件即可，通过 gzip / deflate 压缩响应数据，这个中间件应该放置在所有的中间件最前面以保证所有的返回都是被压缩的。

代码如下：

app.use(express.logger());
app.use(express.compress());
app.use(express.static(__dirname + '/html'));
app.use(express.methodOverride());
app.use(express.bodyParser());

nginx

编辑 nginx 的配置文件

sudo vi /etc/nginx/nginx.conf

在 Gzip Settings 中加入如下设置：

##
# Gzip Settings
##

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php;

1) gzip

语法：gzip on/off
默认值：off
作用域：http, server, location
说明：开启或者关闭 gzip 模块，这里使用 on 表示启动

2) gzip_min_length

语法：gzip_min_length length
默认值：gzip_min_length 0
作用域：http, server, location
说明：设置允许压缩的页面最小字节数，页面字节数从header头中的Content-Length中进行获取。默认值是0，不管页面多大都压缩。建议设置成大于1k的字节数，小于1k可能会越压越大。|

3) gzip_buffers

语法: gzip_buffers number size
默认值: gzip_buffers 4 4k/8k
作用域: http, server, location
说明：设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流。4 16k 代表以 16k 为单位，按照原始数据大小以 16k 为单位的4倍申请内存。

4) gzip_comp_level

语法: gzip_comp_level 1..9
默认值: gzip_comp_level 1
作用域: http, server, location
说明：gzip压缩比，1 压缩比最小处理速度最快，9 压缩比最大但处理最慢（传输快但比较消耗cpu）。这里设置为 5。

5) gzip_types

语法: gzip_types mime-type [mime-type …]
默认值: gzip_types text/html
作用域: http, server, location
说明：匹配MIME类型进行压缩，（无论是否指定）”text/html” 类型总是会被压缩的。这里设置为 text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php。