优化博客

简单地优化下博客的加载速度。

昨天访问博客，发现加载速度实在是不能接受，遂开始查找原因。

「不存在」的 Gravatar

所以，用国内镜像是最好的解决方案。我选择了 Cravatar 替代 Gravatar 来获取头像。

Cravatar 由于一些原因，有三级头像匹配机制，即 Cravatar->Gravatar->QQ。为了方便，我没有注册 Cravatar 帐号，这样就可以直接请求到 Gravatar 头像了。

另外，hexo 没有提供更改 Gravatar URL 的选项，所以要到 hexo-util/lib/gravatar.js 里手动修改。

hexo-util/lib/gravatar.js

'use strict';

const { createHash } = require('crypto');
const { stringify } = require('querystring');

const Cache = require('./cache');
const cache = new Cache();

function md5(str) {
  return createHash('md5').update(str).digest('hex');
}

function gravatarHelper(email, options) {
  if (typeof options === 'number') {
    options = {s: options};
  }

  const hash = cache.has(email) ? cache.get(email) : md5(email.toLowerCase());
  let str = `https://cravatar.cn/avatar/${hash}.webp`;

  const qs = stringify(options);

  if (qs) str += `?${qs}`;

  cache.set('email', hash);

  return str;
}

module.exports = gravatarHelper;

然后到主题设置里将 widgets[0].gravatar 设置为 Gravatar 邮箱即可。

使用京东图床

原来封面等图片使用的是 SMMS，但在大陆访问实在是太慢了，最近主域名还被墙了。我发现了可以用 这个 通过京东 API 上传图片，于是就将封面和头像替换了。

延迟不出意料的低，但是担心突然哪一天无法使用了。

使用 CDN

Icarus 主题默认使用 jsDelivr 作为 JavaScript 库 CDN，Google Fonts 作为字体 CDN，FontAwesome 5 作为图标 CDN。

通过 DevTools 查看，除了 jsDelivr 能相对快一点，其他两个 CDN 都有点慢。Google 发现了 GoogleFontsCN，我就在主题设置里把 providers.fontcdn 设置为 https://fonts.font.im/${ type }?family=${ fontname } 了。

在 Google 一番寻找，没找到好的字体 CDN 和图标 CDN。试过 BootCDN，但是海外用户没有良好的体验，最终发现了 字节跳动静态资源公共库。最后就把 providers.cdn 设置为 https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/${ package }/${ version }/${ filename }， providers.iconcdn 设置为 https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css ，总算是能快一点了，吹爆字节跳动。

安装插件

首先想到的是能否压缩文件以加快加载速度，然后在 GitHub 找到 Hexo-minify，但是效果不明显。

直到我发现了这个 —— hexo-filter-optimize。安装以后效果显著。

InstantClick

InstantClick 的实现方式非常简单。

InstantClick cheats by preloading links you are likely to click on.

当鼠标悬停在一个链接上时，就开始预加载，利用悬停和点击的时间差基本就可以加载完成，这时再点击进入就会显得很快。

根据其 官网 的描述，可以得知只需要将 instantclick.min.js 下载并放到 hexo-theme-icarus/source/js 文件夹里，并在 hexo-theme-icarus/layout/layout.jsx 里添加：

<script src="js/instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

然后就可以使用了。

这篇文章到这里就结束了。鉴定完毕，是一篇又短又臭的文章。