Nginx开启Gzip压缩提升页面加载速度

admin

最近使用 echarts绘图，需要加载echarts-all.js，源码文件居然高达900KB，执行时间为3.75秒，严重影响了页面加载速度。

项目环境  linux，Nginx

还好Nginx 内置了Gizp 压缩。

一、压缩效果
echarts-all.js   压缩前 900KB  压缩后 375KB，时间差距 3.75秒 缩短到  1.58秒， 大大减少了网络传输速度，当然会对服务器CPU有一定影响。
同时开启对  css  xml  以及部分图片格式进行压缩处理。

压缩前：



压缩后：



二、实现方式

1、Vi打开Nginx配置文件
vi /usr/local/nginx/conf/nginx.conf

2、找到如下一段，进行修改
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";
以上代码可以插入到 http {...}整个服务器的配置里，也可以插入到虚拟主机的 server {...}或者下面的location模块内。

3、解释一下
gzip
决定是否开启gzip模块
example:gzip on;
gzip_buffers
设置gzip申请内存的大小,其作用是按块大小的倍数申请内存空间
param2:int(k) 后面单位是k
example: gzip_buffers 4 8k;
gzip_comp_level
设置gzip压缩等级，等级越底压缩速度越快文件压缩比越小，反之速度越慢文件压缩比越大
param:1-9
example:gzip_com_level 1;
gzip_min_length
当返回内容大于此值时才会使用gzip进行压缩,以K为单位,当值为0时，所有页面都进行压缩
param:int
example:gzip_min_length 1000;
gzip_http_version
用于识别http协议的版本，早期的浏览器不支持gzip压缩，用户会看到乱码，所以为了支持前期版本加了此选项,目前此项基本可以忽略
param: 1.0|1.1
example:gzip_http_version 1.0
gzip_proxied
Nginx做为反向代理的时候启用，
param : off|expired|no-cache|no-sotre|private|no_last_modified|no_etag|auth|any]
expample:gzip_proxied no-cache;
off – 关闭所有的代理结果数据压缩
expired – 启用压缩，如果header中包含”Expires”头信息
no-cache – 启用压缩，如果header中包含”Cache-Control:no-cache”头信息
no-store – 启用压缩，如果header中包含”Cache-Control:no-store”头信息
private – 启用压缩，如果header中包含”Cache-Control:private”头信息
no_last_modified – 启用压缩，如果header中包含”Last_Modified”头信息
no_etag – 启用压缩，如果header中包含“ETag”头信息
auth – 启用压缩，如果header中包含“Authorization”头信息
any – 无条件压缩所有结果数据
gzip_types
设置需要压缩的MIME类型,非设置值不进行压缩
param:text/html|application/javascript|text/css|application/xml
example:gzip_types text/html;
对于多数以文本为主的站点来说，文本自身内容占流量的绝大部分。虽然单个文本体积并不算大，但是如果数量众多的话，流量还是相当可观。启用GZIP以后，可以大幅度减少所需的流量(如上图所示，本站首页大小从28K压缩到了7K)。以下是以nginx服务器为例开启gzip的一般代码。
gzip_vary
跟Squid等缓存服务有关，on的话会在Header里增加"Vary: Accept-Encoding"，我不需要这玩意，自己对照情况看着办吧
gzip_disable
IE6对Gzip不怎么友好，不给它Gzip了

4、:wq保存退出，重新加载Nginx
/usr/local/nginx/sbin/nginx -s reload