F12 查看阻塞原因

谷歌内核的浏览器可以按 F12 查看开发者工具，使用 网络 选项卡，查看什么文件加载时间比较长，相应处理即可。

静态文件CDN/本地化

JS 文件

实测发现很多次网页半天加载不出来是因为butterfly默认使用的jsdelivr作为静态资源CDN，而jsdelivr处于半墙状态。

如果你的服务器访问速度很快，那将JS和CSS进行本地化；如果服务器速度也不行（比如我托管在Cloudflare Page上本身就慢），那就试着更换公共CDN源，如字节、饿了么源等。

更改Butterfly主题配置文件中的CDN选项即可，可全局更改，也可独立为每个文件配置。

CDN:
  internal_provider: local
  third_party_provider: local

将third_party_provider改为local时，需要安装hexo插件 hexo-butterfly-extjs，安装的包还蛮多的。

CSS 文件

在 source 文件夹下建立 css 子文件夹，通过浏览器F12–>网络，查看网页加载了哪些CSS文件，然后逐一下载放在这个文件夹内，并将主题配置文件中相应文件路径修改为 /source/xxx.css 即可。

html文件/全站CDN

人民币玩家可上全站CDN，注意做好网站防护，避免被DDoS攻击产生大量流量费用。

像又拍云这种提供免费额度的CDN，看着白嫖完全够用，实则被DDos攻击一次可能就欠费成千上万，没必要用就不用。

关闭 Cloudflare 负优化

我的博客是托管在 Cloudflare Page 上，然后域名解析是在Cloudflare上，Cloudflare 很多优化项其实是负优化，适当关闭一些可提高网页加载速度。

比如 Cloudflare 的 gulp 压缩，这个是服务器端的压缩，本身就几百 Kb 的 html 文件，还要服务器端压缩，是不是访问的时候更慢了……如果确实需要压缩，建议在本地安装对应插件，hexo g 的时候压缩好再上传服务器。

还有各种安全设置，对于纯托管在各种 Page 上的，感觉完全没必要 😈。

图片格式转为 WebP

WebP 是谷歌推出的一种图片格式，可以提供有损压缩和无损转换。就算是无损转换，也能比 jpg、png 等格式缩小不少体积。

用 Webp Converter 离线版或在线网页都可以，直接将图片转为 WebP 再使用。

谷歌官方建议压缩率是 75%，加上格式转换本身就能压缩一部分，实际压缩率非常惊人。而且压缩后图像肉眼几乎看不出差别。

图片 TinyPNG 无损压缩

一般使用 Webp Converter 转为 webp（压缩率 50%）后，再使用 tinypng 几乎无效果了，可跳过此步骤。有高清无损原图需求时可使用该方法。

使用 TinyPNG – 智能压缩您的WebP、JPEG和PNG图片 网站，免费无损压缩图片。压缩速度非常快，每张图片就一两秒时间就压缩好了，而且可以批量压缩。压缩比例也非常高，绝对超预期的那种。而且压缩后肉眼几乎看不出来差别。

图片外链图床

图片、视频文件体型较大，全部托管在图床、代码仓库、视频网站、自建 oss 存储上，通过外链的形式引入到文章中。实现分别从网站源服务器只加载 html、js、css 这些文件，从图床服务器加载图片，而不是同一个服务器加载所有内容。

换图床时可用sublime打开_post文件夹，然后查找替换，选中正则表达式搜索，查找内容形式如下

https://s3.bmp.ovh/imgs/2025/04/05/[a-zA-Z0-9_-]+?.webp

字体压缩

如果使用的本地字体，可用Fontmin-app软件进行字体提取和压缩。

使用在线字体时如果网站提供按需生成专用链接为最好，不建议用全量字体文件（一般十几M）。

异步加载

Hexo异步加载方案 | Akilarの糖果屋

静态资源压缩

gulp插件安装和使用比较麻烦。建议换成hexo插件hexo-neat，在hexo三连时自动压缩html、js、css等静态资源。

npm install hexo-neat --save

然后hexo配置文件中添加如下代码即可，其中exclude为跳过压缩的文件/文件夹，可按需填写。

# hexo-neat静态文件压缩配置
# 博文压缩
neat_enable: true
# 压缩html，注意：不要跳过.md文件、.swig文件
neat_html:
  enable: true
  exclude:
# 压缩css  
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
# 压缩js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'
    - '**/love.js'
    - '**/comments.gitalk.js'