现在的位置:首页>网站SEO>正文

nginx加速之开启字体gzip压缩和缓存以及一些不能压缩的常见问题

2016年09月13日 ⁄ 共 2433字 评论 2 条

gzip压缩在我们的网站优化加速中,是一个必不可少的优化了,网上关于这一方面的资源也是非常多的,但很少有文章提现开启字体gzip压缩和缓存,一般情况下,我们不论是使用的何种建站程序,总是会加载一些程序字体的,所以部落觉得还是有必在开启字体gzip压缩和缓存,这里部落以nginx为例,一起来看看.

Nginx开启Gzip压缩大幅提高页面加载速度

首先我们需要了解一下,如何开启Gzip压缩大幅提高页面加载速度,像部落安装的军哥lnmp一健安装包,默认是已经具备这些优化设置的.如果没有进行的话,可以参考下面的内容:

Vim打开Nginx配置文件

vim /usr/local/nginx/conf/nginx.conf

2、找到如下一段,进行修改

  1. gzip on;
  2. gzip_min_length 1k;
  3. gzip_buffers 4 16k;
  4. #gzip_http_version 1.0;
  5. gzip_comp_level 2;
  6. gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  7. gzip_vary off;
  8. gzip_disable "MSIE [1-6]\.";

3、解释一下

第1行:开启Gzip

第2行:不压缩临界值,大于1K的才压缩,一般不用改

第3行:buffer,就是,嗯,算了不解释了,不用改

第4行:用了反向代理的话,末端通信是HTTP/1.0,有需求的应该也不用看我这科普文了;有这句的话注释了就行了,默认是HTTP/1.1

第5行:压缩级别,1-10,数字越大压缩的越好,时间也越长,看心情随便改吧.这里部落需要补充一下,虽说压缩数字是越大越好,但其实是很占用CPU的,所以大家见好就收吧.一般按默认设置为2即可.

第6行:进行压缩的文件类型,缺啥补啥就行了,JavaScript有两种写法,最好都写上吧,总有人抱怨js文件没有压缩,其实多写一种格式就行了

第7行:跟Squid等缓存服务有关,on的话会在Header里增加"Vary: Accept-Encoding",我不需要这玩意,自己对照情况看着办吧

第8行:IE6对Gzip不怎么友好,不给它Gzip了

接下来,我们直接wq保存退出,重新加载Nginx

/usr/local/nginx/sbin/nginx -s reload

用curl测试Gzip是否成功开启

网上这一方面的工具也有很多,大家也可以使用在线工具来查看是否压缩成功.

例如部落查看网站中的图片是否成功压缩,命令如下:

  1. curl -I -H "Accept-Encoding: gzip, deflate" "https://www.mfbuluo.com/wp-content/uploads/2016/09/360front1.jpg"

您可以将后面的地址修改为您的网站中的css文件路径或者js路径来查看.

Nginx启用Gzip压缩js无效的原因

另外,这里部落再补充一下,Nginx启用Gzip压缩js无效的原因,基本都是因为content-type的内容来同造成的.

各网站的JS类型“content-type”内容不尽相同,Nginx配置gzip是要把各种类型文件的“content-type”内容加进去才行,不加进去就不能被压缩.

当发现Nginx压缩JS没有成功时,可先查看网站JS的Header信息,如图1那样检测(地址:由此直达.),便可获得js文件的“content-type”内容.获得其“content-type”内容,再看看配置文件的gzip_types里有没有此项内容,如果没有,加入去即可解决问题.

开启字体gzip压缩

一般来说,我们只需要为 ttf、otf 和 svg 字体启用 gzip,对其他字体格式进行 gzip 压缩时效果不明显.

  1. gzip_types  font/ttf font/otf image/svg+xml

也就是将上面的代码中加入font/ttf font/otf image/svg+xml这三种格式就可以,成功修改后的格式如下:

  1. gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png font/ttf font/otf image/svg+xml;

ginx设置CSS,JS,图片等缓存

一般情况下,默认都是会设置这些主要文件的缓存的.配置如下:

  1. location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ {
  2.         access_log   off;
  3.         expires      30d;
  4. }
  5. location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
  6.     access_log   off;
  7.     expires      24h;
  8. }
  9. location ~* ^.+\.(html|htm)$ {
  10.         expires      1h;
  11. }

nginx设置字体缓存

一般情况下,默认的设置里,不会有字体缓存,我们可以加入这些设置.

Vim打开Nginx配置文件

vim /usr/local/nginx/conf/nginx.conf

在里面加入以下内容:

  1. location ~* ^.+\.(eot|ttf|otf|woff|svg)$ {
  2.         access_log   off;
  3.         expires max;
  4. }

当然,这里部落需要补充一下,默认很多字体就是压缩过的:

nginx加速之开启字体gzip压缩和缓存

大家根据自己的情况来添加这个功能吧.

评论 2 条 评论内容很精采,有内幕,而且绝对有干货

  1. 薅羊毛 2016年09月13日 11:36  @回复  Δ-49楼 回复

    用的Tengine 怎么办

  2. 我爱动感单车网 2016年09月13日 13:58  @回复  Δ-48楼 回复

    老实的说,对这些还一窍不通。

给我留言