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配置文件详解以及优化建议指南
Sep 15 Servers
tomcat正常启动但网页却无法访问的几种解决方法
May 06 Servers
tomcat下部署jenkins的方法
May 06 Servers
nginx lua 操作 mysql
May 15 Servers
V Rising 服务器搭建图文教程
Jun 16 Servers
超越Nginx的Web服务器caddy优雅用法
Jun 21 Servers
Nginx开源可视化配置工具NginxConfig使用教程
Jun 21 Servers
Docker与K8s关系介绍不会Docker也可以使用K8s
Jun 25 Servers
nginx代理实现静态资源访问的示例代码
Jul 07 Servers
Zabbix对Kafka topic积压数据监控的问题(bug优化)
Jul 07 Servers
Nginx文件已经存在全局反向代理问题排查记录
Jul 15 Servers
Nginx如何配置多个服务域名解析共用80端口详解
Sep 23 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
eAccelerator的安装与使用详解
2013/06/13 PHP
php检测文件编码的方法示例
2014/04/25 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
php compact 通过变量创建数组
2016/11/15 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
Python生成rsa密钥对操作示例
2019/04/26 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
机器学习实战之knn算法pandas
2019/06/22 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
C语言基础笔试题
2013/04/27 面试题
路政管理专业推荐信
2013/11/11 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
处罚决定书范文
2015/06/24 职场文书