前言

如果一个网站打开半天加载不出来，或者加载极其之慢，那对于用户来说体验不是很好，可能还会直接 CTRL + W 走人！

所以我们可以对网站进行优化一下，最后再来套上 CDN 服务！

首先咱们先对静态资源调教一番！

静态资源压缩

可以前往 Gulp 压缩 配置

CDN 公共库

像静态资源（js、css、json、xml、img..等）这些，我们可以使用公共库进行加速

  • jsDelivr：国内外都有节点，也是本站主题 Butterfly 首选的公共库！前端常用的库也有
  • BootCDN：只有国内节点
  • cdnjs：国外的公共库，用的是 Cloudflare
  • 还有其它的，但是推荐使用 jsDelivr，可以加速我们自己的静态文件！

CDN 公共库如何使用

参考 使用 jsDelivr 加速静态文件

另外，如果是 Butterfly 主题的话，在配置文件中找到 main_css 、main、utils、local_search\algolia_js、translate，默认是采用本地加载，我们也可以使用 jsDelivr

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
# 非必要請不要修改
CDN:
  # main
  main_css: https://cdn.jsdelivr.net/gh/zjwo/zjwo.github.io/css/index.css
  # main_css: /css/index.css # 4000 用
  main: https://cdn.jsdelivr.net/gh/zjwo/zjwo.github.io/js/main.js
  utils: https://cdn.jsdelivr.net/gh/zjwo/zjwo.github.io/js/utils.js
  
  ...
  local_search: https://cdn.jsdelivr.net/gh/zjwo/zjwo.github.io/js/search/local-search.js
  
  ...
  translate: https://cdn.jsdelivr.net/gh/zjwo/zjwo.github.io/js/tw_cn.js

这样就能实现全站 CDN 啦！

但是 jsDelivr 又有缓存问题，会导致无法在第一时间更新。但是我们可以强刷呀！如果你是使用 GitHub Actions 的话，在你的 Actions 脚本最后加上如下代码，这样当我们持续部署博客的时候，又帮我们刷新了 jsd 的缓存问题！

1
2
3
4
5
6
7
8
- name: Purge JsDelivr CDN
  run: |
    # 注意替换成你的 jsd 地址
    curl https://purge.jsdelivr.net/gh/zjwo/zjwo.github.io/css/index.css
    curl https://purge.jsdelivr.net/gh/zjwo/zjwo.github.io/js/main.js
    curl https://purge.jsdelivr.net/gh/zjwo/zjwo.github.io/js/utils.js
    curl https://purge.jsdelivr.net/gh/zjwo/zjwo.github.io/js/tw_cn.js
    curl https://purge.jsdelivr.net/gh/zjwo/zjwo.github.io/js/search/local-search.js

静态资源异步加载

参考 Hexo 异步加载方案，无非就是给 js 脚本加上 defer 和 ansyc 属性来实现异步加载，例如：

1
2
3
bottom:
  - <script defer https://npm.elemecdn.com/vue@2.6.11"></script>
  - <script async src="https://cdn.jsdelivr.net/gh/zjwo/CDN/js/pyq/pyq.min.js"></script>

css 也能异步加载

最后再给网站套上 CDN 服务！

注：以下操作都必须实名认证且域名备案！

本文只讲又拍云、百度云加速、多吉云的配置方法，其它云服务厂商大同小异！

又拍云加速

免费获取每月 10 GB 存储空间 + 15 GB 流量，前提你得加入又拍云联盟。然后得到代金券（67￥/ 年）

但是又拍云从去年开始就改了规则！如图

images

首先注册又拍云，实名认证成功之后再申请加入又拍云联盟

申请又拍云联盟的步骤官网也写的很清楚，照着做就是了

images

第二步那个页脚 LOGO，如果你是 Butterfly 主题的话，可以直接在主题的配置文件找到 custom_text 并加入以下代码

1
custom_text: <a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="_blank" rel="noopener nofollow"><img style="position:relative;top:-2.5px;" src="https://cdn.jsdelivr.net/gh/caibhh/CDN/img/blog/%E5%8F%88%E6%8B%8D%E4%BA%91_logo5.webp" align="absmiddle" width="60px" height="30px">提供加速服务</a>

数天过后会有邮件通知你成功加入又拍云联盟，67￥ / 年的代金券也发放下来了，接着我们就开始创建一个 CDN 服务

进入 CDN 服务管理，点击创建服务！

images

最后点击创建

images

复制该 CNAME 值，到你的域名服务商进行解析

解析

打开 CMD PING 一下网站，CDN 生效了！

cmd

然后你兴奋的打开网站，哦吼！

哦吼

害，这是因为证书的问题啦！

进入功能配置，选择 HTTPS，添加自有证书，最后可以勾上强制 HTTPS 访问，过一会即可正常打开网站！

https

其它配置

缓存控制

  • 就开启了分段缓存和离线模式

性能优化

  • 智能压缩（GZip 和 Brotli 我都开启了，等级都为 3 级）但是要注意，当客户端同时支持 Gzip 和 Brotli 算法的情况下，Brotli 的优先级高于 Gzip。
  • 页面压缩，开启
  • 重定向跟随，开启

HTTPS

  • TLS 1.3，开启
  • 最低 TLS 版本，我选的 1.0
  • HTTP/2，开启

访问控制（重要）

  • IP 黑白名单，建议大家把以下 IP 都加入到黑名单里

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    117.136.14.181
    117.183.0.241
    171.106.203.19
    220.173.125.83
    222.217.145.185
    113.14.130.128
    222.83.150.92
    113.14.130.19
    113.14.130.73
    113.57.53.37

  • IP 访问限制，开启

    点击添加限制规则，资源路径：/*，限制策略：100 - 200 禁止 600 秒，200 - 500 禁止 3600 秒，500 以上 86400 秒

  • CC 防护，开启

    URI 匹配规则：/*，访问频率阈值：200 次，智能防护

  • WAF 保护，开启

又拍云配置成功！

百度云加速

呼，百度云加速作为中国站的 Cloudflare，免费流量 10 GB / 天，基本来说完全够用了，但是免费版的速度嘛，不是很理想！

首先注册百度账号，然后登录进入之后进行实名认证，百度的实名认证有所不同，是手持身份证进行认证的，审核成功之后，进入控制台，添加网站。

注意这里要输入主域名并切换为 CNAME 接入方式！

addsite

第二步就是添加加速域名了，最后点击保存，下一步！

images

第三步进行解析

第四步成功！

配置证书，在证书管理下的证书列表，上传证书即可

ssl

最后在安全功能中找到 HTTPS，设置为全程加密！

其它配置

CDN 加速选项，开启 IPV6 访问

然后…其实百度云加速也没什么好配置的，防护功能默认都给你开了。

有需求的可以在特定页面规则自己定制规则。

百度云加速教程就到这了！

多吉云融合 CDN

多吉云是在 W4J1e’s blog 偶然发现的，节点很多，一开始以为是多吉搜索家的呢，结果不是。

多吉云的融合 CDN 每月免费流量 20 GB，云存储 10 GB。

融合 CDN 是个啥？

简单来说就是把大厂的 CDN 节点整合到了一起，从节点的质量上来说没有太大的区别。大厂的品牌更可靠一些，融合的话好处在于如果某个大厂出问题了，可以随时切换，不会对公司的业务产生什么影响。参考 融合 CDN 是什么，跟 CDN 有什么不同？

注册登录多吉云，然后进行实名认证（支持支付宝一键认证）

说明一下，多吉云的实名认证不是强制性的，只是实名认证了有免费额度 20 GB / 月，你不想实名的话可以选择付费滴！

images

融合 CDN 的价格确实比较便宜！

认证成功之后最上方点击融合 CDN，然后添加域名

  • 加速域名：就是你要加速的域名
  • 业务类型：Web 访问、静态资源、小文件、M3U8
  • 服务地域：我选的中国境内，因为我境外解析到了 GitHub
  • 源站类型：IP \ 域名都行
  • 回源协议：看你源站是啥协议呗！
  • 回源 Host：他说可以为空，我就留空了
  • 确定添加

等待它部署五分钟之后，状态成功了，进行解析它提供的 CNAME

其它配置

基本配置

  • IPv6 访问，开启

回源设置

  • 回源跳转跟随，开启回源跟随 301、302

访问控制

  • IP 黑白名单（还是一样，建议大家把以下 IP 都加入到黑名单中）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    117.136.14.181
    117.183.0.241
    171.106.203.19
    220.173.125.83
    222.217.145.185
    113.14.130.128
    222.83.150.92
    113.14.130.19
    113.14.130.73
    113.57.53.37

  • 带宽流量封顶，这个看个人吧，我设置的 5 分钟内流量超过 5 GB 就解析回源！

性能优化

  • 开启 GZip 压缩

HTTPS 配置

  • 最后还是一样，上传证书

    ssl

    开启强制跳转 HTTPS，跳转方式 301，这肯定 301 永久啊

PING 一下瞅瞅融合 CDN 的延迟。

ping

我觉得

但也有缺点，就是每更改一个配置项，都要重新部署！另外还有如果你的站点更新了或者发布了一篇文章，都要去刷新预热一下！问了下客服，目前暂时也没什么自动刷新的脚本或者 API，但是速度是真的可以，也值得了，况且博客平时更新也不勤！

images

images

多 IP 解析

昨晚试了多种方案，在 Ping.cn 和 站长工具 都看了下，我是没看出什么区别，我是真看不出来，反正最后解析方案，我默认解析到了又拍云，移动解析百度云加速，电信解析到多吉云，如有更好的方案可以在下方评论留言，感谢！

结语

服务商免费流量HTTPS速度稳定性实名认证客服
又拍云15 GB / 月免费A稳支付宝一键认证 \ 手持身份证人工 \ 工单
百度云加速10 GB / 天免费B稳手持身份证工单 \ 机器人
多吉云20 GB / 月免费A稳支付宝一键认证 \ 手持身份证人工

又拍云计费说明

多吉云计费说明

百度云加速计算方式说明