阿里云
阿里云多端小程序中小企业获客首选
发表主题 回复主题
  • 7986阅读
  • 1回复

[解决方案]Nginx开启Gzip压缩提升页面加载速度

级别: 论坛版主
发帖
3414
云币
8980

阿里云Linux下安装Nginx服务器基础篇 5UPPk$8 `  
阿里云linux下Nginx整合Tomcat实现负载均衡集群 *WD;C0?z  
阿里云Linux下Nginx服务器整合php ~DK F%}E  
阿里云Nginx整合Tomcat实现静态文件缓存 CN-4-  
Nginx如何使用ngx_cache_purge清除缓存 ::0aY ;D2  
8~}s 3j4  
>@z d\}@W  
"h QV9 [2\  
以上都是工作中的记录。 yW[L,N7d  
====================================== KQ-,W8Q5  
OA!R5sOz"  
最近使用 echarts绘图,需要加载echarts-all.js,源码文件居然高达900KB,执行时间为3.75秒,严重影响了页面加载速度。 ]DGGcUk7  
项目环境  linux,Nginx ^P]?3U\nj  
还好Nginx 内置了Gizp 压缩。 F [r|Y-c]  
一、压缩效果 u0wn=Dg  
echarts-all.js   压缩前 900KB  压缩后 375KB,时间差距 3.75秒 缩短到  1.58秒, 大大减少了网络传输速度,当然会对服务器CPU有一定影响。 bx;yHIRb  
同时开启对  css  xml  以及部分图片格式进行压缩处理。 c{^i$  
压缩前: { ( _B  
 4c  
v/]Qq  
压缩后: zoJ_=- *s  
%3ou^mcj  
2%`^(\y  
Zlr{L]c  
a$~IQ2$|6  
"[#@;{@Gt  
二、实现方式 '" ^ B&W  
0Z@ARMCe|m  
83\ o (  
1、Vi打开Nginx配置文件 U? {'n#n 5  
vi /usr/local/nginx/conf/nginx.conf nXv 7OEpTx  
+Gk! t]dy  
y{@P 1{  
2、找到如下一段,进行修改 A Z]P+v  
gzip on; }DJ|9D^yf  
gzip_min_length 1k; J'I1,5(  
gzip_buffers 4 16k; _)OA$  
gzip_http_version 1.0; := ]sq}IN  
gzip_comp_level 2; MF f05\aDu  
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; A4~D#V  
gzip_vary off; TS\9<L9S  
gzip_disable "MSIE [1-6]\."; {E;2&d  
以上代码可以插入到 http {...}整个服务器配置里,也可以插入到虚拟主机的 server {...}或者下面的location模块内。 z0\;m{TH  
k&MlQ2'!<  
UOn!Y@  
3、解释一下 (45NZBs  
gzip NFrNm'v  
决定是否开启gzip模块 PN1(j|  
example:gzip on; 6T R8D\  
gzip_buffers fR+Ov8PCq  
设置gzip申请内存的大小,其作用是按块大小的倍数申请内存空间 IyrZez  
param2:int(k) 后面单位是k 3*CzXK>`M&  
example: gzip_buffers 4 8k; _F}IF9{?G  
gzip_comp_level d9`3EP)n  
设置gzip压缩等级,等级越底压缩速度越快文件压缩比越小,反之速度越慢文件压缩比越大 3I'M6WA  
param:1-9 }2-[Ki yv  
example:gzip_com_level 1; zAKq7'_=  
gzip_min_length 7$g*N6)Q  
当返回内容大于此值时才会使用gzip进行压缩,以K为单位,当值为0时,所有页面都进行压缩 DQ}_9?3  
param:int kS@9c _3S  
example:gzip_min_length 1000; R=][>\7]}  
gzip_http_version DBu)xr}7A  
用于识别http协议的版本,早期的浏览器不支持gzip压缩,用户会看到乱码,所以为了支持前期版本加了此选项,目前此项基本可以忽略 ;J,,f1Vw  
param: 1.0|1.1 7bgnZ]r8t  
example:gzip_http_version 1.0 1?/5A|?V4+  
gzip_proxied n;-x!Gs  
Nginx做为反向代理的时候启用, aHBByH  
param : off|expired|no-cache|no-sotre|private|no_last_modified|no_etag|auth|any] "o\6k"_c>  
expample:gzip_proxied no-cache; F'V +2,.  
off – 关闭所有的代理结果数据压缩 0C7thl{Dms  
expired – 启用压缩,如果header中包含”Expires”头信息 DBj;P|L_  
no-cache – 启用压缩,如果header中包含”Cache-Control:no-cache”头信息 a -z23$3  
no-store – 启用压缩,如果header中包含”Cache-Control:no-store”头信息 LU-#=1Q  
private – 启用压缩,如果header中包含”Cache-Control:private”头信息 C5:dO\?O  
no_last_modified – 启用压缩,如果header中包含”Last_Modified”头信息 1Y H4a|bc  
no_etag – 启用压缩,如果header中包含“ETag”头信息 ef;& Y>/  
auth – 启用压缩,如果header中包含“Authorization”头信息 %0ll4"  
any – 无条件压缩所有结果数据 {f@xA  
gzip_types NPB,q& Th  
设置需要压缩的MIME类型,非设置值不进行压缩 7$q2v=tH_  
param:text/html|application/javascript|text/css|application/xml S7Iu?R_I  
example:gzip_types text/html; ~aauW?  
对于多数以文本为主的站点来说,文本身内容占流量的绝大部分。虽然单个文本体积并不算大,但是如果数量众多的话,流量还是相当可观。启用GZIP以后,可以大幅度减少所需的流量(如上图所示,本站首页大小从28K压缩到了7K)。以下是以nginx服务器为例开启gzip的一般代码。 H#1*'e>  
gzip_vary wzNt c)~i  
跟Squid等缓存服务有关,on的话会在Header里增加"Vary: Accept-Encoding",我不需要这玩意,自己对照情况看着办吧 =\ti<  
gzip_disable 'gk81@|  
IE6对Gzip不怎么友好,不给它Gzip了 v$.JmL0^J  
Z?.p%*>`T=  
4、:wq保存退出,重新加载Nginx p5twL  
/usr/local/nginx/sbin/nginx -s reload C]\^B6l<  
5Gw!9{ke  
RAD4q"}k  
[ 此帖被小柒2012在2016-05-26 10:29重新编辑 ]
级别: 新人
发帖
6
云币
8
只看该作者 沙发  发表于: 2016-06-05
ReNginx开启Gzip压缩提升页面加载速度
谢谢分享,回头试试去
发表主题 回复主题
« 返回列表上一主题下一主题

限100 字节
如果您提交过一次失败了,可以用”恢复数据”来恢复帖子内容
 
验证问题: 44 + 45 = ?
上一个 下一个
      ×
      全新阿里云开发者社区, 去探索开发者的新世界吧!
      一站式的体验,更多的精彩!
      通过下面领域大门,一起探索新的技术世界吧~ (点击图标进入)