优化网站访问:启用Nginx Gzip/替换国内CDN/使用InstantClick

之前我用http://pagespeed.webkaka.com/测试了一下我网站的访问速度,发现不甚理想,遂进行了一下优化,过程记录如下。

Gzip压缩

现代HTTP服务器和浏览器都会支持一个功能:HTTP服务器将页面文件压缩后再传输,浏览器接收到后解压再渲染。这个功能在当前CPU处理速度远远大于网络传输速度时特别有效,能大大减少传输文件大小。Gzip模块就是处理这个事情的。默认情况下,Nginx对HTTP文件启用了Gzip功能,我们还可以让CSS和JS也启用,进一步降低传输文件大小。

需要特殊说明的是,请不要对jpg图片启用Gzip功能,原因很简单,JPG本身就是个压缩后的图片格式,我们用7z测试一下就知道:

可以看到WinRAR压缩后,图片只少了0.2Kb,很多情况下,甚至可能压缩后的文件大于原图,因为jpg已经没有什么好压缩的了,还要附上解压信息。而且,对图片进行压缩还要让服务器承担更大的压力,显得得不偿失。

在确认我安装的Debian下的nginx-light包(https://wiki.debian.org/Nginx)包含了Gzip module后,我们直接对nginx配置文件进行编辑。在server段加入
/etc/nginx/sites-available/default

gzip on;  #启用gzip
gzip_buffers 32 4k; #设置gzip压缩时使用的缓冲区的个数以及每个缓冲区的大小
gzip_comp_level 6; #gzip的压缩级别,越大压缩率越高
gzip_min_length 200; #启用gizp压缩的响应临界值大小,仅与响应头的"Content-Length"的值进行比较,只有大于gzip_min_length的响应才会进行压缩
gzip_vary on; #表示是否添加"Vary: Accept-Encoding"响应头
gzip_types text/xml text/plain text/css application/javascript application/x-javascript application/rss+xml; #指定需要压缩的响应内容类型
gzip_disable "MSIE [1-6]\."; #对IE1-6发来的请求回复时禁用Gzip

GZip便启用完成,nginx -s reload下,再访问站点,可以在chrome控制台中看到传递来的各个文件都是Gzip压缩后的了。

替换CDN

这个没有什么好说的,我用到了JQuery/Normalizer/SyntaxHighlighter/InstantClick几个JS,我都将它们替换成了百度公共cdn库(http://cdn.code.baidu.com)的对应版本。

使用InstantClick

InstantClick实现了一个很“投机”的加速功能。简单来说,用户鼠标移动到一个超链接上到点下这个超链接需要耗时几十到几百毫秒,InstantClick就是看中了这几十几百毫秒,在用户鼠标移动到超链接之时,就立即对服务器发出这个页面的请求,如果用户真的点下了这个超链接,这时这个页面已经请求到本地了不少东西了,访问速度就会“变快”。

使用InstantClick非常简单,在页面尾部直接加入

...
<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>
</body>
</html>

就完事了,百度的CDN地址为http://apps.bdimg.com/libs/instantclick/3.0.1/instantclick.min.js

效果

在完成上述优化之前,我网站的完全加载完成速度大概是4-5s,完成后大概是1-2s,提升还是非常明显的。

参考资料

1.https://wiki.debian.org/Nginx
2.http://nginx.org/en/docs/http/ngx_http_gzip_module.html
3.http://blog.lifw.org/post/57102556
4.http://instantclick.io/


title: 优化网站访问:启用Nginx Gzip/替换国内CDN/使用InstantClick
time: 2018-05-05 20:45
tags: Nginx,Gzip,InstantClick
category: Study

标签: Nginx Gzip InstantClick

发表评论: