用又拍云CDN加速Hexo博客

辛辛苦苦搭建好博客,虽然Hexo本身是全静态网页,页面加载速度相对于动态博客程序已经是非常可观,但NexT主题调用了不少js文件,如果再加上其他的图片、音视频插件等等还是会在一定程度上造成延迟。本着折腾不止和完美主义的精神,用CDN来加速Hexo!

CDN加速的原理

这里简明扼要地解释一下CDN加速的原理:你上传到CDN加速网站(如又拍或者七牛)空间里的文件(或者网站)以镜像的形式存放到多台服务器,这些服务器分布在祖国甚至全世界各地,访问者就近读取较快的镜像,以实现快速加载的效果。举个栗子:你的文件(或网站)在上海,没有CDN,一个北京的访问者需要直接连接你在上海的服务器,有了CDN,这个北京的访问者只需要访问你的文件(网站)在北京的镜像即可。尤其是国内外的互访,CDN可使访问速度大大提升。

哪些因素会影响加载速度?

js文件

js文件就是JavaScript脚本文件,用来实现各种酷炫的动态效果。一般是加载在html页面的<head>部分,所以页面加载速度首先要考虑这一块。Hexo的js文件大致包含以下3类:

  1. 公共js
    公共js是通用型,比如实现图片放大效果的Fancybox,或者实现图片慢加载的LazyLoad等等。这些js已经开发好,直接在html里引用(存放在镜像网站上,如BootCDN)js文件链接即可实现效果。
  2. 定制页面效果js
    即NexT主题中定制的某些特效,例如实现页面响应式效果的Bootstrap,或者增强移动端滚动及动画效果的Motion等等。这些js理论上也是公共js,只不过NexT主题作者修改了代码,以适用于NexT主题。这些js文件存放在本地Hexo目录hexo\themes\next\source\js\src下。
  3. 第三方插件js
    这个不用多说了吧,Hexo默认安装了不少实用的第三方插件,比如,可直接在网页中显示数学公式的MathJax,优化SEO的Baidu-push等等。这些插件可在主题配置文件_config.yml中进行配置。相关js文件有些存放在hexo\themes\next\layout\_third-party中,有些则通过外部引用形式加载。

图片(音、视频)

如果博客文章很多,绝大部分的带宽都会消耗在这部分静态数据上。这个不多说了。

Google字体引用

很多文章中提到,由于被墙的缘故,引用Google字体会严重拖累网站,于是乎屏蔽Google字体的插件层出不穷。不过笔者测试发现,无论是Google字体中文官网,还是Google字体的引用服务器fonts.googleapis.com都没有被墙,而其速度在全球范围内都相当理想(如下图),所以完全没有必要修改Google字体的引用源,比如改成360CDN什么的。

综上,下面就开始着手对Hexo博客的js文件图片(音、视频)文件进行CDN加速。

CDN加速

公共js加速

在版本 5.0.1 之后的NexT主题,有一个方便的功能可以通过修改主题配置文件_config.yml中常用外部js的引用地址,来实现自定义CDN加速。下面是此部分的配置(在_config.yml搜索CDN即可找到),笔者已经修改成BootCDN的引用地址。关于国内靠谱的JavaScript CDN库,还是推荐BootCDN,可参考知乎的讨论

# Script Vendors.
# Set a CDN address for the vendor you want to customize.
# For example
# jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
# Be aware that you should use the same version as internal ones to avoid potential problems.
# Please use the https protocol of CDN files when you enable https on your site.
vendors:
# Internal path prefix. Please do not edit it.
_internal: lib

# Internal version: 2.1.3
jquery: https://cdn.bootcss.com/jquery/2.1.3/jquery.min.js

# Internal version: 2.1.5
# See: http://fancyapps.com/fancybox/
fancybox: https://cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.js
fancybox_css: https://cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css

# Internal version: 1.0.6
# See: https://github.com/ftlabs/fastclick
fastclick: https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js

# Internal version: 1.9.7
# See: https://github.com/tuupola/jquery_lazyload
lazyload: https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js

# Internal version: 1.2.1
# See: http://VelocityJS.org
velocity: https://cdn.bootcss.com/velocity/1.2.1/velocity.min.js

# Internal version: 1.2.1
# See: http://VelocityJS.org
velocity_ui: https://cdn.bootcss.com/velocity/1.2.1/velocity.ui.min.js

# Internal version: 0.7.9
# See: https://faisalman.github.io/ua-parser-js/
ua_parser: https://cdn.bootcss.com/UAParser.js/0.7.9/ua-parser.min.js

# Internal version: 4.6.2
# See: http://fontawesome.io/
fontawesome: https://cdn.bootcss.com/font-awesome/4.6.2/css/font-awesome.min.css

# Internal version: 1
# https://www.algolia.com
algolia_instant_js:
algolia_instant_css:

# Internal version: 1.0.2
# See: https://github.com/HubSpot/pace
# Or use direct links below:
# pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js
# pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css
pace: https://cdn.bootcss.com/pace/1.0.2/pace.js
pace_css: https://cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css

使用Chrome浏览器开发者工具->Network,按住Shift+刷新(全新加载)即可看到效果。下图显示加速的效果非常好!修改前首页加载需要10秒以上,其中尤其index.js(即JQuery.js)严重拖累了加载速度。修改之后,基本上就是——秒开!

页面效果js加速

这些js文件存放在本地,原则上把它们上传到CDN加速空间中,再修改引用源即可。但基于以下原因考虑,这里不做修改。

  • 这些js文件对加载速度影响不大;
  • 如果主题更新又会恢复到原始状态;
  • 修改引用源改动源文件较多、比较麻烦。

插件js加速

同样道理,这些js文件若是存放在Hexo本地的,需要将他们上传到CDN加速空间里;如果是外部引用,需要先将引用地址的原js文件下载下来,存放到CDN加速空间里。最后统一修改原引用地址到CDN加速空间地址。

下面以又拍云的CDN为例介绍,注册开通很简单,这里略过。需要注意不管七牛还是又拍,注册时都需要上传手持身份证的照片进行身份核验。身份认证后即可开始操作,具体操作方法请参考官方文档。简单说两句:创建的服务选择网页图片类型,然后添加操作员、密码即可,后面如有需要还可以绑定域名(需备案),https等等。

一切就绪后,下面以加速valine.js插件为例说明。Valine是一款评论插件,安装及配置请参考《使用Valine插件为Hexo博客添加评论功能》

开启并配置好Valine后,打开hexo\themes\next\layout\_third-party\comments\valine.js可以看到如下代码:

<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>

可以看出Valine的运行是依赖以上2个外部js文件,这里以加速第二个js文件为例,修改第二个js文件的源为:

<script src="//XXX.test.upcdn.net/Valine.min.js"></script> # XXX改成你的又拍云服务名

然后,把原js文件Valine.min.js、即https://unpkg.com/valine/dist/Valine.min.js下载下来,通过FTP工具(推荐FileZilla)上传到你的又拍云空间根目录里。

这样,Valine.min.js这个文件就在用又拍云进行CDN加速了。Hexo g -d查看效果吧。其他插件js的加速理论上适用上述方法,关键是第一步要找到js文件正真的源引用地址。

图片(音、视频)加速

其实如果以上的操作没有问题,图片(音、视频)的CDN加速也是同样的方法。

比如,你的文章里有本来有一张图片,图片地址为http://xxx.com/123.jpg。把这个图片上传到你的又拍云空间里,即可获得地址:http://xxx.test.upcdn.net/123.jpg,将此地址插入到文章中即可实现图片的CDN加速。而且后期还可以利用又拍云的云处理功能对图片增加缩略图、水印、防盗链,对音视频转解码,压缩等等。

如果你理解以上的原理,可以将其他任何类型(一般加速图片,音频,视频,js,css等)的静态文件的转移到CDN上,从而将你的网站优化的更好。

坚持原创分享,您的支持将鼓励我继续创作!