本篇博文主要讲一下今天我对本站所做的一些优化。
图片迁往七牛
以往,本站的图片一律均是存放在 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 看起!