网站优化:用nginx的gzip压缩静态文件,让网站访问快得飞起

技术博客 / Web   2015-07-05 14:17:21  阅读量: 6440
  优化   nginx   网站  

网站建成快一个月,大大小小的bug基本都搞定,就是有一个问题,加载css或者js似乎有些慢,因为使用响应式布局,很多div跟图片的高度要用js来计算得到,时不时会出现加载不出js,导致布局混乱的情况,所以对这一块还有优化的空间。

本网站主要使用了Bootstrap, SyntaxHighlighter, jQuery等资源,每个都有对应的css和js文件,加载这么多文件自然可能比较慢,首先搜索django的解决方案,发现有一个django_compressor插件可以用,然后搜索服务端的方案,发现nginx可以使用gzip来压缩静态文件,于是两个方案都进行了尝试。

一、使用django_compressor

直接用pip安装插件:

pip install django_compressor

在settings.py中设置:

#settings.py
COMPRESS_ENABLED = True

INSTALLED_APPS = (
    # other apps
    "compressor",
)

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'compressor.finders.CompressorFinder',)

在templates中使用相关标签:

{% load compress %}
{% compress css %}
	<link rel="stylesheet" type="text/css" href="/static/css/bootstrap/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="/static/css/style.css">
	<link rel="stylesheet" type="text/css" href="/static/css/index.css">
{% endcompress %}
...
{% load compress %}
{% compress css %}
	<link rel="stylesheet" type="text/css" href="/static/css/bootstrap/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="/static/css/style.css">
	<link rel="stylesheet" type="text/css" href="/static/css/index.css">
{% endcompress %}

部署到服务器上,可以见到上面的css和js文件都被合并:

<link rel="stylesheet" href="/static/CACHE/css/8b593308389e.css" type="text/css" />
<script type="text/javascript" src="/static/CACHE/js/03e809e27580.js"></script>

标签内所有的css和js文件都被合并成一个文件,但加载慢的情况还是时有发生,情况并没有多少改善。

查看合并后的文件大小,只比合并前的文件总和小一些,并没有太大的进行压缩,似乎只是将代码进行了合并,并没有实现真正的压缩,而且还有很多标签外的css和js文件没被处理(如SyntaxHighlighter),效果并不明显,好处就是合并这些文件,可以隐藏一些实现细节。于是寻求使用nginx的gzip来压缩静态资源。

二、使用nginx的gzip

HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能,当有人来访问这个服务器中的网站时,服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来.一般对纯文本内容可压缩到原大小的40%.这样传输就快了,效果就是你点击网址后会很快的显示出来.当然这也会增加服务器的负载. 一般服务器中都安装有这个功能模块的。

gzip的压缩页面需要浏览 器和服务器双方都支持,实际上就是服务器端压缩,传到浏览器后浏览器解压并解析。浏览器那里不需要我们担心,因为目前的巨大多数浏览器都支持解析gzip 过的页面。

可见,Gzip是一种使用资源换取传输速度的技术,消耗服务器的cpu资源来压缩网页内容,使得网页加载速度大幅提升,其使用流程如图所示:

对nginx的配置文件nginx.conf进行修改,配置gzip:

gzip on;
gzip_disable "msie6";
gzip_proxied any;
gzip_min_length 1k;
gzip_comp_level 4;
gzip_types text/plain text/css application/json application/x-javascript text/javascript text/xml image/jpeg image/png image/gif;

第一行:打开gzip。

第二行:在ie6下禁用gzip(因为兼容性有问题)。

第三行:Nginx做为反向代理的时候启用,any – 无条件压缩所有结果数据

第四行:当返回内容大于1K时才会使用gzip进行压缩,因为对1k以下资源压缩并无多大意义,反而会消耗cpu资源。

第五行:设置gzip压缩等级,等级越底压缩速度越快文件压缩比越小,反之速度越慢文件压缩比越大,这是一个使用cpu资源换取访问速度的trade-off,为了不过多消耗cpu资源,将压缩等级设置为4比较合适。

第六行:设置需要压缩的MIME类型,非设置值不进行压缩。本网站设置压缩html, css, javascript, json, xml,图片等所有类型。

设置好重启nginx,便启用了gzip功能。再次访问网站,最直观的感受就是加载速度明显变快,基本上都是秒开,证明gzip确实能够大幅提升加载速度,通过检测,可以得到压缩率如图所示:

首页:

CSS:

js:

图片:

可见,除了图片的压缩率较低外(不过外链图片已经使用七牛云存储做了预处理),页面,css,js的压缩率都达到了65%以上,自然网站的访问速度立马快得飞起!

由此,便完成了使用nginx的gzip对静态资源的压缩,大大提升了网站的访问速度。