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配置80端口访问8080及项目名地址方法解析
Mar 31 Servers
Nginx域名转发使用场景代码实例
Mar 31 Servers
Nginx location 和 proxy_pass路径配置问题小结
Sep 04 Servers
Nginx工作模式及代理配置的使用细节
Mar 21 Servers
Vscode中SSH插件如何远程连接Linux
May 02 Servers
如何Tomcat中使用ipv6地址
May 06 Servers
服务器间如何实现文件共享
May 20 Servers
Win Server2016远程桌面如何允许多用户同时登录
Jun 10 Servers
shell进度条追踪指令执行时间的场景分析
Jun 16 Servers
Windows server 2012 NTP时间同步的实现
Jun 25 Servers
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
Aug 14 Servers
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
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
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
数控技术专业推荐信
2013/11/01 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
骨干教师申报材料
2014/12/17 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
初一军训感言
2015/08/01 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
Python os和os.path模块详情
2022/04/02 Python
排查Tomcat进程假死的问题
2022/05/06 Servers