这两个星期天天熬夜到一两点，去学习怎么提高博客的访问速度。最终小有成果，下面我总结一下这几十天的研究内容。

一、全站加速（按照推荐等级排列）

1.1 CDN 加速

这个需要备案，如果没备案的话建议看后面的方法。

【2022.08.22】备案终于下来了。

这里我使用的是 DogeCloud CDN ，效果很不错，加速杠杠的。而且每个月都有 20 GB 的免费额度，这应该算是国内所有免费 CDN 中免费额度最高的了。
图1.1.1 DogeCloud CDN 免费流量额度

下面介绍配置方法：

  1. 注册多吉云账户。

  2. 注册完账户后记得实名认证，然后依次打开 融合CDN > 域名管理 > 添加域名，然后参考下面的图片进行配置：
    图1.1.2 配置待加速域名

  3. 添加域名(已备案，否则无法添加)后，Ping 一下这个域名，把得到的 IP 地址记录下来：
    图1.1.3 加速域名

  4. 来到域名解析供应商的控制台，把指向 GitHub Page 的域名解析规则删除，然后添加指向第三步获得的那个 IP 地址：
    图1.1.4 配置 DNS 解析

  5. 接着来到根目录下的 \source\ 文件夹，新建一个不带后缀的 CNAME 文件，文件内容即为你的域名（例如：seayj.cn）。

  6. 最后重新部署一下，耐心等待一会儿就行了（时间可能有点长，最多 10 min 的样子）。

补充配置：
建议你可以弄以下配置：

  1. 基本配置
    • IPv6 访问开启
  2. 访问控制
    • QPS 限制 30 次/秒
    • 带宽流量封顶，当月流量超过 20 GB 就解析回源到 Github
  3. 性能优化
    • 开启 GZip 压缩
    • 开启搜索引擎回源
  4. HTTPS 配置
    • 选择你上传好的证书
    • 开启强制跳转 HTTPS
    • TLS 版本全选
    • 开启 HSTS
  5. 缓存配置
    • 缓存策略改成 1 小时（不超过该时间，你的网站是不会更新内容的）

1.2 Vercel 加速

【2022.7.16】 我目前备案还没下来，所以暂时用的这个办法。目前体验感觉还不错，都说我的博客访问速度提高了不少。

下面来详细说一下这个内容。

  1. 注册账号： 首先进入 Vercel 官网，直接用 Github 登录(Github Page 用户)。

  2. 导入项目： 点击 New Project 按钮新建项目，然后导入你的 GitHub 博客项目（xxx.github.io 那个）。有可能他会自动识别，自己可以按照实际情况自己来，只要把那个项目导入就行。详情见下图。

图1.2.1 导入项目

  1. 部署网站： 在这个就有一个，记得选择 Other 模板即可，其他的都默认。最后在部署卡片上面你就可以看到 Vercel 生成的 URL ，那就是 Vercel 加速后的网址。

图1.2.2 成功发布

  1. 修改DNS： 如果你有自己的域名，需要在域名服务提供商（阿里云、GoDaddy 等）的 DNS 解析中增加一条 CNAME 记录（将你的域名指向另一个域名）。就是把原来解析到 xxx.github.io 的规则改成 Vercel 提供的域名就行（第 3 步里生成的 URL 选一个即可，记得把原来 xxx.github.io 的解析规则的删了）。

图1.2.3 修改 DNS 解析

  1. 在 Vercel 里自定义域名： 最后，在 Vercel 项目中添加你的域名即可。

图1.2.4 添加域名

然后，过一会儿在访问自己的博客，嘿嘿~
速度快到起飞~(ノω<。)ノ))☆.。

1.3 gitee、gitlub、coding 等

1.3.1 gitee

本来我就想使用 gitee 进行代码托管，但是 gitee pages 的域名是不能自定义的。要想域名自定义，需要开通 gitee pages pro ，但是作为个人用户是无法在现在开用的。这个在 gitee pages pro 的官方文档里也有说明。

图1.3.1 Gitee 说明

不过有大佬提出了解决方案：方向代理。

可惜的是，这个办法需要域名备案…额…都域名备案了，为什么不直接使用国内的 CDN 加速呢？所以，我果断放弃了 gitee pages 的方案。

1.3.2 coding

然后我就想到了大家都使用的 coding ，但是我的 coding 账号不知道出了什么问题，绑定了一个不存在的腾讯云账号，还解绑不了（真有 TX 一贯的尿性，气炸了）！

所以，coding 我也不打算使用。这类文章网上也有很多，大家可以看别的人博客，借用 coding + hexo 来建设国内的博客（适合国内访问）。

1.3.3 gitlub 等

这类代码托管仓库我没怎么用过，大家自己研究一下吧，原理都一样。找个访问快点的代码托管，开启 Page 功能就行。

二、细节加速

2.1 源文件压缩

这里推荐使用 hexo-neat 来压缩相关源代码文件。

  1. 安装插件:
1
npm install hexo-neat --save
  1. 打开根目录文件 _config.yml，添加以下配置:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#hexo-neat 优化提速插件（去掉HTML、css、js的blank字符）
neat_enable: true
neat_html:
    enable: true
    exclude:
    - '**/*.md'
neat_css:
    enable: true
    exclude:
    - '**/*.min.css'
neat_js:
    enable: true
    mangle: true
    output:
    compress:
    exclude:
    - '**/*.min.js'
    - '**/matery.js' # 注意，这个是正对 matery 主题的 BUG 修复。其他主体如何修复可能的 BUG 需要自行百度
  1. 输入以下命令即可压缩源文件：
1
hexo g

2.2 懒图加载

  1. 安装插件:
1
npm install hexo-lazyload-image --save
  1. 在根目录中的 _config.yml 文件中添加如下配置信息：
1
2
3
4
5
# 图片懒加载
lazyload:
    enable: true 
    onlypost: true  # 是否只对文章的图片做懒加载
    loadingImg: # eg ./images/loading.gif
  1. 一键部署即可看到效果。

补充:

  1. 一般情况下懒加载会和 gallery 插件会发生冲突，结果可能就是点开图片，左翻右翻都是 loading image。matery 主题的解决方案是：修改 /themes/matery/source/js 中的 matery.js 文件，在大约第108行的位置加上：
1
2
3
$(document).find('img[data-original]').each(function(){
    $(this).parent().attr("href", $(this).attr("data-original"));
});
  1. 做完这步之后，还有点小 Bug ，首页的 logo 点击会直接打开 logo 图，而不是跳到首页。伪解决方案是打开 /themes/matery/layout/_partial/header.ejs 文件，在 img 和 span 的两个头加个 div：
1
2
3
4
5
6
7
8
9
10
<div class="brand-logo">
    <a href="<%- url_for() %>" class="waves-effect waves-light">
        <div>
            <% if (theme.logo !== undefined && theme.logo.length > 0) { %>
            <img src="<%= theme.logo %>" class="logo-img" alt="LOGO">
            <% } %>
            <span class="logo-span"><%- config.title %></span>
        </div>
    </a>
</div>