优化 Hexo 博客的访问速度

使用 CDN 和对象存储 OSS 来优化博客的访问速度

由于我的整个博客部署在 GitHub Pages 上,从国内直接打开的访问速度是很慢的。过慢的访问速度会使得用户在访问网站的时候失去耐心,导致有些用户可能会直接关闭你的网站,这就会使得网站的用户留存率降低。说句题外话,这就是为什么很多网站在设计进度条的时候并没有反映网站的真实访问速度,而是先给你一个很快的加载动画,让会让你产生好像网站就要加载好的错觉,在一定程度上能增加用户的耐心。这种手段除了应用在微信的网页进度条上,还包括比如一些清理软件设计的清理系统进度条上,还有之前 Windows 7 在文件浏览器中的文件扫描进度条上等等 —— 好像说的有点远了。总之在这篇文章中,我会以我的 Hexo 博客为例,介绍一些优化网站访问速度的方法,这也是我在优化这个博客时使用的方法。

开始之前

在开始之前,我还是想啰嗦两句。优化网站的访问速度,其本质就是加快网站资源的下载速度。一般而言,一个网页包含的资源大概有 HTML 源代码、CSS 文件、JS 文件、XHR 请求、以及媒体资源如图片、视频、字体等。那么应该加快网站的哪些资源呢?首先,HTML 代码是用户打开网站时读取的第一个文件,而 XHR 请求通常会取决于用户每次的访问而有所不同,因此这两类文件无法被直接优化。而剩下的资源,比如 CSS 文件、JS 文件,他们以链接的形式通过 <link> 或者 <script> 标记嵌入在 HTML 中。另外,媒体资源也会通过相应的标记比如 <img><video> 嵌入其中。我们可以把这些以链接形式嵌入在 HTML 代码中的文件称之为静态资源文件,这一类文件就是我们着重需要优化的地方了。

还要补充一点的是,在国内加快 GitHub Pages 访问速度最有效的方法当然是不使用 GitHub Pages,而是使用一台国内的服务器来部署,毕竟连接国外的服务器在一开始就会带来至少 200ms 到 300ms 的延迟。 但即使你使用国内服务器进行部署,通过使用一些优化访问速度的技巧仍然会带来一定的帮助,比如可以减少服务器消耗的资源,节省流量费用等等。

CDN

CDN 是加快网站访问速度的非常常用的一个办法,你可以在 这一篇 中通过一个故事大致了解 CDN 的原理及作用。目前国内有很多运营商都提供了 CDN 的加速服务,最常见的如阿里云和腾讯云等都有 CDN 服务,其中价格也相对便宜,比如腾讯云半年 100GB 的流量包只要 20 元,阿里云一年 100GB 的流量包只要 24 元,对于一个普通的博客网站来说,除非是遭遇大规模的 DDOS 攻击,否则完全够用了。配置 CDN 服务器需要你将网站域名的 CNAME 指向 CDN 提供商的服务器,同时给源站重新设定一个域名,并在 CDN 配置界面中指向它,总的来说配置相对简单,可以参考 CDN 提供商的相关文档,再次不再赘述了。

需要注意的一点是,阿里云和腾讯云的 CDN 大都要求你的域名通过备案,所以部署在 GitHub Pages 上的网站是没办法使用它们的 CDN 服务的。但是,网站的一部分公共资源仍然是可以使用 CDN 的,比如 BootCDN 提供了各大静态的 CSS、JS、字体等各类静态资源提供了免费的 CDN 加速服务。因此你可以将你网站所使用的各类公共 JS 插件以及 CSS 等使用 BootCDN 提供的 CDN 链接替换。对于 Hexo 来说,一般情况下你可能需要修改源 Html 代码中的 <script> 标记链接才可以。然而 Hexo 的 Next 主题提供的配置文件已经预留好了这些 CDN 配置项,因此你只需要在对应的配置选项中填入 BootCDN 提供的 CDN 链接即可。你可以在 BootCDN 中找到大量的 Hexo 中需要使用的 JS 和 CSS 脚本、如 jQueryFancyboxVelocityPACE 等等。

图片压缩

如果你打开开发者工具的 Network 选项卡,刷新一次网页,然后按照 Size 的大小将所有的数据包排序,你会发现数据包最大的无非就是两类文件了,一类是 JS 脚本文件,另一类就是媒体文件,比如图片。JS 脚本的优化我们已经在 上一节 的 CDN 优化中完成了,那么如何加快图片的传输速度呢,方法无非是两种,减小文件体积,或是加快文件下载速度。对于图片来说,压缩图片大小是一个比较可行的方法。

第一,压缩图片的尺寸。在插入一张图片之前,我们最好先确认插入在网页后的图片尺寸是否合图片的原尺寸一致,在网页中图片实际大小很小的情况下,使用一张分辨率很高的图片是没有意义的,相反还会增大图片的大小,得不偿失。因此在这种情况下,我们需要先缩小图片的尺寸,这对减小图片的文件大小是很有帮助的。

第二,我们可以使用压缩图片的工具,来做到在图片质量几乎不损失的情况下大幅度的减小图片的文件大小。TinyPNG 是一个免费的图片压缩网站,可以将你的图片在几乎不损失画质的情况下减少大约 70%-80% 的文件大小,所以我们可以把网站上的所有图片都用这个网站来优化一次,你还可以自动化这个操作,比如 ImgBot 提供了自动优化每次提交时的图片文件大小。对于 Hexo 博客来说,可能也会有相关的插件可以使用,当然自己写一个自动化 TinyPNG 的 API 操作应该也不是什么难事。

对象存储

最后简单的介绍对象存储的优化方法。对象存储是近几年流行的一种存储方式,简单地说,就是每一份数据文件作为一个单独的对象来进行存储,不需要通过数据库来进行结构上的关联了。更加通俗地说,对象存储就有点类似于以前的图片外链。对象存储由一个个的存储桶构成,在你上传到存储桶之后,就可以直接通过链接来访问上传的文件了。因此通过对象存储,我们可以把网站的所有静态文件都通过对象存储来保存起来,然后通过链接来引用,对于网站中的图片来说,对象存储就是非常适合存储的对象。我们可以直接把图片全部上传到存储桶中,然后把网站中的图片链接指向存储桶中的地址就可以了。

这里还有一些细节需要注意,首先,我们可能需要给存储桶配置允许的 Referer,防止其他的网站直接使用你的存储桶的链接来引用图片,消耗你的流量,此外可能还需要配置 CORS 来允许跨域。另外,对象存储一般按照流量收费,价格一般相对便宜。腾讯云提供了每个月 50GB 的免费额度,对于小型的博客网站来说一般也够用了。

总结

以上就是关于网站速度优化的一些方法。下图是一个优化后的 Network 示例。

tweak-hexo

你可以明显的看到,在全部大于 10KB 的数据包中,只有 needmoreshare.cssmain.css 和网站的源 Html 代码是通过网站请求的,其他的数据包都来自于 CDN、对象存储,或是外部的 JS 链接。

你还可以了解更多的 Hexo 优化技巧

希望以上的网站优化技巧能给大家带来一些帮助,如果你还知道其他任何实用的优化技巧,或是对这篇文章有什么意见或建议,欢迎在下面评论留言告诉我。

评论