芜湖！新手村！

减少下载资源的数量

更多的文件意味着更长的加载用时与渲染用时，因此应慎重引入。以 Butterfly 主题为例，若不必需某些组件（如 abcjs），则应将其关闭。若不明确某些功能（如 Layload）的利弊关系，则也不应轻易启用。常见的有：

功能性附加组件

附加组件包括 abcjs，Mermaid，Katex/MathJax，Aplayer，Firework 等。这些东西并非必需，不应以多多益善为由开启。

1
2
3

# eg.
aplayerInject:
  enable: false

此外，还有诸如小挂件、弹窗等，同样有一定的性能需求，可能也会对页面带来负担。

预加载

在双方网速足够快时，开启它作用并似乎不明显。但对于部署于 Github Pages 等国外平台建议开启。

1	instantpage: true

懒加载

在图床速度足够快时，开启它作用并不明显。

1 2	lazyload: enable: false

调节动画

很多朋友为了网页美观性往往会添加加载动画，但正如前面所说，只要有一条资源有问题，就会阻塞整个加载动画，致使网页迟迟显示不出有效内容。纵使是非全屏式动画（pace_css），也仿佛在提示用户 “嘿！我还没加载完呢！” 十分影响观感，建议关闭。

1 2	preloader: enable: false

在渲染负载较重的情况下，入场动画可能会影响渲染初期的效率，导致某些低端设备出现卡顿。但对于页面较为轻量的情况，开启它可以隐藏加载时的闪烁，提高美观性。

1	enter_transitions: true

优化图片

图片作为媒体的重头戏，在网页上不可或缺。随着图片体积的增大，图片所带来的负担也不容小觑。优化图片的要做的是减小体积，其方法有：

手动降低分辨率、位深、色彩精度之类
使用工具进行无损或低损压缩
参见：Butterfly 安裝文檔 (六) 進階教程 | Butterfly
将 PNG，JPG 等格式转为 WeBP 或 Avif 格式
此类图片发布日期较新，有许多新技术以及新特征（比如在保证质量不太差的前提下，最大程度压缩体积），适合网页使用
将 Gif 换用 APNG 或 MP4
Gif 不仅体积巨大，质量差，渲染还十分费力，不如直接用视频

OK 啊！入门级！

保证资源加载畅通

保证性能良好

在引用资源前，应确保来源稳定可靠。若其速度不稳定或服务时好时坏，可能会导致卡加载动画或卡白屏。

应对资源和服务进行维护、监控或选择可靠的来源，引入前应进行多地 Ping/HTTP 测试，确保多地访问通畅。

若确因资金、政策、网络环境等原因不能保证服务时时可用，可用备用 URL 或 IP 属地判断等技术缓解。具体按可以参见 hexo-swpp、 Swpp Backends 官方文档和一份新版配置文件。

使用合适的 CDN

打个比方，假如在上海收快递时，件儿从苏州还是美国发过来快？显然是苏州！CDN 也同理。市面上常用的公益 CDN（JSDelivr， UNPKG，CDNJS）等多没有大陆节点，使用此类 CDN, 数据包往往要漂洋过海从大洋彼岸发过来，速度堪忧。

以 Butterfly 为例，可在配置中将 CDN 来源设为 custom 以使用可靠的国内 CDN（如 zzko）：

1
2
3

CDN:
  third_party_provider: custom
  custom_format: https://jsd.cdn.zzko.cn/npm/${name}@${version}/${file}

若国内源无法包含所有所需文件，还可以给某资源设定单独链接。例如：

1
2
3

CDN:
  option:
    busuanzi: https://cn.vercount.one/js

若站点面向全球用户，则可选择 CDN 竞速等策略。具体按可以参见 hexo-swpp、 Swpp Backends 官方文档和一份新版配置文件。

压缩文件

HTML/JS/CSS 文件中的回车、部分空格、注释等仅起提高可读性的作用，却仍占用相当大体积，因此应将其删去。

Gulp

参见网站加载速度优化方案总结 | 山岳库博

Hexo 插件

参见 Hexo 压缩静态文件 | Argvchs の小窝

1	npm install hexo-html-minifier hexo-clean-css hexo-uglify --save

在博客目录下 _config.yml 添加如下配置：

uglify:
  mangle: true
  output:
  compress:
  exclude:
    - "*.min.js"

clean_css:
  exclude:
    - "*.min.css"

html_minifier:
  collapseBooleanAttributes: true
  collapseWhitespace: true
  ignoreCustomComments: [!!js/regexp /^\s*more/]
  removeComments: true
  removeEmptyAttributes: true
  removeScriptTypeAttributes: true
  removeStyleLinkTypeAttributes: true
  minifyJS: true
  minifyCSS: true

curbengh 的 hexo-yam 插件

1	npm install hexo-yam --save

在博客目录下 _config.yml 添加如下配置：

minify:
  enable: true
  previewServer: true
  html:
    enable: true
    exclude:
  css:
    enable: true
    exclude:
  js:
    enable: true
    exclude:
      - "*.min.js"
  svg:
    enable: true
    include:
      - "*.svg"
  gzip:
    enable: false
  brotli:
    enable: false
  xml:
    enable: false
    include:
      - "*.xml"
  json:
    enable: true
    include:
      - "*.json"
  zstd:
    enable: false