2015.10.04 本站所做的一点优化

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

图片迁往七牛

以往,本站的图片一律均是存放在 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 看起!