Github Pages 访问加速

发表于 | 更新于 | 分类于
| 字数统计 2305 | 阅读时长 11 min

近来 GitHub 的服务器在国内的访问状态愈发糟糕，Pages 上托管的博客几乎到了不跨长城就打不开的地步。这迫使我不得不开始研究之前因为麻烦而迟迟没有动手的站点加载速度优化。

之前搜到的提速方案是在国内的代码托管平台 Coding 上也建一个一模一样的博客文件仓库（Coding 同样提供 Pages 功能），然后将境内外流量分别解析到Coding 和 GitHub，两个仓库保持同步——这实在是太不优雅了，换方法！

问题检测

首先要搞清是什么资源的加载失败导致了网站的访问缓慢。在不开代理的状态下，使用 Chrome 访问本站首页，按 F12 选择 Network，强制刷新网页开始加载速度监测。

Chrome F12 Network

（图为优化后的进度，优化前极其缓慢，常常卡住）从加载进度上可以看出是什么资源拖慢了加载速度。根据时间排序后，我注意到很多 js、css 文件的加载异常缓慢，有时根本加载不出来，尤其是博客的自定义字体（我用了思源黑体）。

字体托管

很早之前就考虑过默认托管在 Google 的自定义字体加载不出来，于是换成了中科大的 fonts.lug.ustc.edu.cn 。没想到现在似乎挂了，会直接重定向回 fonts.googleapis.com。于是再次搜索国内其他的托管平台，终于找到了 CSS.NET 的 https://fonts.css.network/，试了一下完美加载。

其他静态资源 CDN 地址修改

除了字体，站点还包含了大量的 js 和 css 文件，大部分都直接放在了站点目录 \assets\lib 下，也就是说加载时是直接从 GitHub 上拉取的，难怪时断时续。好在 NexT 主题提供了 Script Vendors 功能，直接修改 _config.yml 文件 vendors: 后的内容就可以了。

现在的问题是找到一个好的国内代理站点。在这篇文章的推荐下，我果断在 BootCDN.cn 搜索了几乎所有用到的 js 和 css 文件的镜像地址。注意要参考 _config.yml 的注释，保持脚本的版本一致。

以下是最终的配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
# 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: assets/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.js
  fancybox_css: https://cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.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:

  # 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: https://cdn.bootcss.com/instantsearch.js/1.5.0/instantsearch.min.js
  algolia_instant_css: https://cdn.bootcss.com/instantsearch.js/1.5.0/instantsearch.min.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.min.js
  pace_css: https://cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css

  # Internal version: 1.0.0
  # https://github.com/hustcc/canvas-nest.js
  canvas_nest: https://cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.js

现在打开网站，基本上各种动态效果和框架都已经可以快速显示了。

CDN 域名加速

然而，我发现首页大量的文章题图加载依旧缓慢。图片本身也就几十 kB，并不大，但是是直接托管在 GitHub 上的，因此载入速度堪忧。

关于图床

我也想过用图床，考虑过七牛、又拍、SM.MS，甚至想过用自己的 VPS 自建，但是要么定价策略不合适，要么访问速度不理想。事实上，我之前把博文和图片放在同一个仓库的考量也主要源于自己想要一个足够稳定，不需要时常维护的托管平台，这一点上来看 GitHub 简直完美。而即使是目前看来最理想的图床 SM.MS，其免费账户的上传也有单张图片 5MB 和格式的限制（svg 就无法上传），且长期来看平台的稳定性尚未可知。综上，我不得不考虑其他的优化方案。

腾讯云内容分发缓存

CDN 域名加速就是这样一种方案，不需要大批量移动图片位置、修改文章链接，把图片放在 GitHub 上直接使用域名访问就 OK。其原理大致是修改你的 DNS 解析配置，访问域名时商家的云服务器从 GitHub 上下载资源并缓存，然后返回给客户端，从而使得实际不需要直接访问 GitHub 那半墙不墙的服务器。

经过对比，我选择了每月有免费 10G 额度的腾讯云内容分发网络（CDN）服务。在控制台添加域名，一步步配置即可。其中，源站地址填写 Github 提供的 IP 地址：

185.199.108.153

185.199.109.153

185.199.110.153

185.199.111.153

我之前申请了 Let’s Encrypt 的域名泛解析 SSL 证书（详见《使用 Let’s Encrypt 为域名申请免费 SLL 证书》一文），所以将这里回源协议设置为“协议跟随”。创建好之后，还要去高级配置里导入证书（这里须导入全链证书，否则会提示“Https 证书链检验错误”），开启强制跳转 HTTPS。

接着，复制域名管理页面中的 CNAME 地址，然后去 DNS 解析服务提供商（我在阿里云）处修改解析设置。为了保证境外流量依然直接访问 GitHub 服务器，我设置了“境外”流量智能解析回 github.io 的网址，其他默认解析到腾讯云提供的地址上。

做完之后等待几分钟，待配置部署完成后，ping 一下域名，发现已经到 dispatch.spcdntip.com 域名上去了，CDN 加速就生效啦。用 ChinaZ 的工具测速一下：

speedtest

国内大部分地区飘绿，已经很棒了。

此外，还可以使用 17CE 这个工具进行多地测速。

另外，我后来调整了一下部分图片的路径，多次刷新发现主页的图片路径依然不更新。这是 CDN 缓存的问题。腾讯云默认除了 php 等常规动态内容刷新时间是 0 （直接回源）外，其他内容的更新时间都是 30 天。也就是说，这些内容一旦被请求过一次，之后再次访问看到的都将是腾讯云服务器第一次时的缓存版本，直到 30 天后才会更新。这对于常常需要更新的博客来说时间太长了一点。

于是，需要进入控制台的缓存配置，添加规则，把主要的一些需要实时变动更新的页面的缓存过期时间设置为 10 分钟。特别地，NexT 主题从第二页开始网址就变为 /page2，以此类推，因此需要加上一条 /page* 的通配规则。

以下是我设置的缓存配置列表，仅供参考。

cache rule

注意：列表底部的优先级大于列表顶部

更新于 2020-02-18：上述做法将使得站点大部分内容几乎不能访问到有效的缓存（几乎每次都要回源），命中率很低，不建议使用。事实上，腾讯云提供了手动刷新 CDN 缓存的方法：API 调用，具体实现方法参考我的另一篇文章《腾讯云 CDN 强制刷新 API 的使用》。

其他优化

除此之外，为了进一步提高网站打开速度，我修改 _config.yml 文件，关掉了之前追求华丽而打开的网页动画，关掉了目前暂时没什么用处的百度和 Google 分析代码，关掉了并没有人用还加载缓慢的来必力评论系统，顺便忍痛删掉了不久前心血来潮添加的看板娘……唉等有空换个优雅快速的托管方式一定再加回来……

参考链接

-------------本文结束    感谢您的阅读-------------
0%