Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)


Posted in Servers onFebruary 12, 2022

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压缩参数说明:

gzip on;                 #决定是否开启gzip模块,on表示开启,off表示关闭;
gzip_min_length 1k;      #设置允许压缩的页面最小字节(从header头的Content-Length中获取) ,当返回内容大于此值时才会使用gzip进行压缩,以K为单位,当值为0时,所有页面都进行压缩。建议大于1k
gzip_buffers 4 16k;      #设置gzip申请内存的大小,其作用是按块大小的倍数申请内存空间,param2:int(k) 后面单位是k。这里设置以16k为单位,按照原始数据大小以16k为单位的4倍申请内存
gzip_http_version 1.1;   #识别http协议的版本,早起浏览器可能不支持gzip自解压,用户会看到乱码
gzip_comp_level 2;       #设置gzip压缩等级,等级越底压缩速度越快文件压缩比越小,反之速度越慢文件压缩比越大;等级1-9,最小的压缩最快 但是消耗cpu
gzip_types text/plain application/x-javascript text/css application/xml;    #设置需要压缩的MIME类型,非设置值不进行压缩,即匹配压缩类型
gzip_vary on;            #启用应答头"Vary: Accept-Encoding"

gzip_proxied off;
nginx做为反向代理时启用,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_modefied(启用压缩,header头中不包含
  "Last-Modified"),no_etag(启用压缩,如果header头中不包含"Etag"头信息),auth(启用压缩,如果header头中包含"Authorization"头信息)

gzip_disable msie6;
(IE5.5和IE6 SP1使用msie6参数来禁止gzip压缩 )指定哪些不需要gzip压缩的浏览器(将和User-Agents进行匹配),依赖于PCRE库

######################################################################################################
#如下:修改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压缩设置详解(最大程度提高页面打开速度)

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

Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)

通过上面测试对比, 发现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资源,且不一定有明显的效果。

Servers 相关文章推荐
nginx配置ssl实现https的方法示例
Mar 31 Servers
扩展多台相同的Web服务器
Apr 01 Servers
学习nginx基础知识
Sep 04 Servers
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
Sep 25 Servers
Nginx配置https的实现
Nov 27 Servers
CentOS7和8下安装Maven3.8.4
Apr 07 Servers
从零开始在Centos7上部署SpringBoot项目
Apr 07 Servers
阿里云k8s服务升级时502错误 springboot项目应用
Apr 09 Servers
Tomcat项目启动失败的原因和解决办法
Apr 20 Servers
CentOS7环境下MySQL8常用命令小结
Jun 10 Servers
Tomcat 与 maven 的安装与使用教程
Jun 16 Servers
Windows Server 2012 R2服务器安装与配置的完整步骤
Jul 15 Servers
使用 Apache Dubbo 实现远程通信(微服务架构)
Nginx 反向代理解决跨域问题多种情况分析
Jan 18 #Servers
详解nginx location指令
Jan 18 #Servers
图文详解nginx日志切割的实现
Jan 18 #Servers
Nginx防盗链与服务优化配置的全过程
Jan 18 #Servers
使用 Apache 反向代理的设置技巧
NGINX 权限控制文件预览和下载的实现原理
You might like
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
php抽象类用法实例分析
2015/07/07 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
jquery插件开发方法(初学者)
2012/02/03 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
jquery实现input框获取焦点的方法
2017/02/06 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
python入门:这篇文章带你直接学会python
2018/09/14 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
用pycharm开发django项目示例代码
2019/06/13 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
python里glob模块知识点总结
2021/01/05 Python
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
什么是lambda函数
2013/09/17 面试题
自我鉴定范文300字
2013/10/01 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
保护环境建议书
2014/03/12 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
辞职信怎么写
2015/02/27 职场文书