2015.10.04 本站所做的一点优化

本篇博文主要讲一下今天我对本站所做的一些优化。

[TOC]

图片迁往七牛

以往,本站的图片一律均是存放在 imgur 平台的,然后通过外链 i.imgur.com 这个地址来解析图片。

尽管 imgur 使用了 Fastly 公司的 CDN 平台,但是国内用户并没有被分配到亚洲的节点上,而是被分配到了美国,这就导致了一定程度加载图片比较缓慢。

下面是一张超级 PING 的结果,可以看到,只有国外的用户访问会比较快,而国内的基本上都在200 PING 以上。

因此,我一张一张将我的图片从 imgur 保存下载,然后上传到七牛,最后再一篇一篇文章来修改图片的地址。

图片针对部分用户启用 WebP

什么是 WebP

WebP(发音weppy),是一种同时提供了有损压缩与无损压缩的图片文件格式 ,派生自视频编码格式VP8,是由Google在购买On2 Technologies后发展出来,以BSD授权条款发布。 WebP最初在2010年发布,目标是减少文件大小,但达到和JPEG格式相同的图片质量,希望能够减少图片文件在网络上的发送时间。 2011年11月8日,Google开始让WebP支持无损压缩和透明色的功能,而在2012年8月16日的参考实做libwebp 0.2.0中正式支持。根据Google较早的测试,WebP的无损压缩比网络上找到的PNG文件少了45%的文件大小,即使这些PNG文件在使用pngcrush和PNGOUT处理过,WebP还是可以减少28%的文件大小。

内容来自维基百科:WebP - 维基百科,自由的百科全书

支持 WebP 的浏览器

目前,支持 WebP 的浏览器并不多,如图所示

像 Firefox 、 IE 、Safari 等浏览器目前均不支持该技术,只有老大哥 Chrome 和 Opera 和 Android 等支持。

如何判断浏览器是否支持 WebP 图片

要判断一个浏览器是否支持 WebP 技术,我们可以通过判断他 header 中的 Accept 来判断。

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

如果一个浏览器支持 WebP ,那么他的 Accept 中将会有 image/webp ,反之则没有。

在七牛中将图片转换成 WebP 格式

七牛针对图片的处理有一个叫 imageView2 的图片基本处理的玩意,参考:基本处理(imageView2) | 七牛云存储

简单来说,就是在每一张图片的后面,加上 ?imageMogr2/format/webp ,那么这张图片就会自动转换成 WebP 格式。

例子:

https://imlonghao.com/1.png (原图片)
https://imlonghao.com/1.png?imageMogr2/format/webp (WebP图片)

启用 WebP

正如你现在看到的那样,本博客现在已经对 Chrome 用户等启用了 WebP 的图片。

博客程序针对这部份用户,会自动在 img 中的 src 的最后加上 ?imageMogr2/format/webp 标识

优化 JS / CSS

在这部份优化当中,讲究尽可能减少 http 的请求次数,因此,我们最好能够将 JS / CSS 等文件综合在一起。

另外,我们还可以进行代码的压缩,减少代码中不必要的注释以及空格、换行等。

另外, 我将 Google 统计的代码从之前的在 </body> 之前转移到了 </head> 之前,解决了之前在页面的最后才去请求加载这些外部 JS 所代码的页面加载慢的问题。

同时,由于我闲得蛋疼,加上 Google 统计代码以及 Disqus 的代码很久也不会更新一次,因此我将这些代码本地化了,同时也设置了在每天的0点自动去同步代码,这样就减少了对外部资源的请求。现在对外部资源的请求基本上都在页面加载完毕之后了,因此速度也有了很大的提升。


优化道路任重而道远,今后也一定会更多的小细节需要去优化的,向 imququ 看起!