Nginx配置gzip:服务器开启gzip和缓存提高页面加载速度

  • 时间:2019-04-04 13:00
  • 来源:Darrenfang.com
  • 作者:Darren Fang
  • 阅读:1828
Nginx配置gzip:服务器开启gzip和缓存提高页面加载速度,nginx gzip 压缩比

nginx 是一个高性能的 Web 服务器,之前也写过一些关于 nginx 的文章。为了提高博客的响应速度,可以从设置 nginx 的 gzip 和缓存这2方面入手。为字体开启 gzip 和缓存能大大减少带宽的消耗。

开启gzip

配置

http {
    ....
    .....
    # 开启gzip
    gzip on;
    
    # 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
    gzip_min_length 1k;
    
    # gzip 压缩级别,1-10,数字越大压缩的越好,也越占用CPU时间,后面会有详细说明
    gzip_comp_level 2;
    
    # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
    # 由于jpg,jpeg,png本来就是压缩格式,再行压缩只会消耗cpu资源,帮助并不大
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/gif;
    
    # 是否在http header中添加Vary: Accept-Encoding,建议开启
    gzip_vary on;
    
    #压缩版本(默认1.1,前端如果是squid2.5请使用1.0)
    gzip_http_version 1.0;
    
    # 禁用IE 6 gzip
    gzip_disable "MSIE [1-6]\.";
    ....
}

关于具体的参数说明可以参考 nginx 的文档

gzip_comp_level 参数

关于 gzip_comp_level 的合理值,可以参考下图。来自 serverfault

Nginx配置gzip:服务器开启gzip和缓存提高页面加载速度

nginx gzip 压缩比

从图中可以看出 gzip_comp_level 大于2时效果并不是很明显。所以可以将值设置为1或者2。


开启缓存

配置

server {
    location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ { 
        access_log   off; 
        expires      30d;
    }
    
    location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
        access_log   off;
        expires      24h;
    }
    
    location ~* ^.+\.(html|htm)$ {
        expires      1h;
    }
}

关于字体其中的缓存时间可以自己根据需要修改。

关于字体

为静态资源开启缓存能够较少服务器带宽的消耗,特别是在css中使用字体时,同时配合gzip压缩能够大大减少下载字体造成的带宽影响。

设置字体缓存

需要注意的是,字体有很多格式,为所有字体格式设置缓存是很有必要的。

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

启用gzip

只需要为 ttf、otf 和 svg 字体启用 gzip,对其他字体格式进行 gzip 压缩时效果不明显。启用gzip

http {
    gzip_types  font/ttf font/otf image/svg+xml
}

各种字体类型压缩效果可以参考以下测试结果:

ttf字体压缩效果

Nginx配置gzip:服务器开启gzip和缓存提高页面加载速度

otf字体压缩效果

Nginx配置gzip:服务器开启gzip和缓存提高页面加载速度

svg字体压缩效果

Nginx配置gzip:服务器开启gzip和缓存提高页面加载速度

woff字体压缩效果

Nginx配置gzip:服务器开启gzip和缓存提高页面加载速度

可以看到对 woff 和 eot 进行 gzip 压缩效果不好。


字体总结

扩展名是否压缩Content-type
.eotapplication/vnd.ms-fontobject
.ttffont/ttf
.otffont/opentype
.wofffont/x-woff
.svgimage/svg+xml

最后所有静态文件有nginx直接读取不经过服务容器

server{
....
    ...
    #所有静态文件由nginx直接读取不经过tomcat或resin等服务容器
    location ~ .*.(htm|html|gif|jpg|jpeg|png|bmp|swf|ioc|rar|zip|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma)$
    {
        expires 15d; 
    }
    
    location ~ .*.(js|css)?$
    {
        expires 1h;
    }
}

chrome 查看:

Nginx配置gzip:服务器开启gzip和缓存提高页面加载速度

以上就是关于“Nginx配置gzip:服务器开启gzip和缓存提高页面加载速度”的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流。