假设你刚搭建了个人博客，发现网站的访问速度实在堪忧，怎么办？解决方法无非以下几种方法：

  • 有经济实力的，考虑提升硬件性能和带宽（购买高级服务器、增大带宽）
  • 正确使用 CDN 加速源站和图片
  • 如果你的个人博客网站是动态网站（如 Wordpress），但实在没有必要必须是动态网站时，可尝试改成静态框架 [1]

如果以上的方法你都尝试过，但博客网站可能遇到页面卡顿、显示不全、功能异常（图标、评论、搜索等各种异常）等情况，比如：

  • font awesome 加载迟、卡，拖慢网页加载 [2]。
  • algolia 搜索按钮按不出来
  • Waline 评论系统不显示或评论数据无法获取 [3]
  • 网站加载条等了半天，文章图片一直都是加载中

本地调试自己的博客网站后，打开浏览器的开发者面板（F12）-> 禁用缓存 -> 点击网络选项卡 -> 刷新页面：

jsdeliver惹的祸1

你会发现一些 js 文件或 css 文件无法被加载，这些文件大多来源于 jsdelivr 的 CDN 连接（这是因为 Butterfly 主题默认 CDN 源为 jsdelivr）。

不熟悉 CDN 的小伙伴可以将其理解为，jsdelivr 里存放了大量的 js 文件或 css 文件，你的博客网站需要引入这些文件。但是由于国情，jsdelivr 结点的链接状况在国内时好时坏。

这时我们可以考虑把获取这些 js 或 css 文件的链接替换掉，或者把默认的第三方源替换掉。在你的主题配置上进行替换，这里以 Butterfly 主题为例，在主题配置文件下找到：

1
2
3
4
5
6
7
CDN:
	# The CDN provider of third party scripts (第三方 js 的 cdn 配置)
	# option: local/jsdelivr/unpkg/cdnjs/custom
	# when set it to local, you need to install hexo-butterfly-extjs
	third_party_provider: unpkg # jsdelivr/unpkg/cdnjs
	option:
		fontawesome: <替换的cdn>

关于此项配置详看 Butterfly 主题官方文档：Butterfly 安裝文檔(四) 主題配置-2 | Butterfly

以下是博主使用过的国内公共 CDN 静态资源库：

也可以把文件放在自己的使用了 CDN 的存储桶中，或博客项目资源目录里（注意看好你的钱包）。

本文参考

其他优化博客网站的好文（我没仔细看，似乎有干货）：

  1. 详看这篇文章：部署 Hexo 个人博客框架到服务器 ↩︎

  2. fontawesome 可以考虑更换图标库，请看我之前的文章 【索引】装点你的 Butterfly 博客 ↩︎

  3. 处理这个问题前请看我之前的文章：Hexo Btterfly 引入 Waline 评论系统以及常见问题解决 决]] 访问时却一切正常。这时候我们该考虑是不是 CDN 出现问题了。 ↩︎

  4. 详见 Polyfill 供应链攻击击中 100K+ 个站点 ↩︎