芜湖！新手村！

减少下载资源的数量

更多的文件意味着更长的加载用时与渲染用时，因此应慎重引入。以 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

在渲染负载较重的情况下（如引用了很多字体与大图），入场动画会抢占渲染其它内容所需的 CPU 与 GPU，影响渲染初期的效率，在某些低端设备上可能会引起卡顿。但对于页面较为轻量的情况，开启它可以隐藏加载时的闪烁，提高美观性。

1	enter_transitions: true

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

优化图片

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

手动降低分辨率、位深、色彩精度之类
使用工具进行无损或低损压缩
参见：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

压缩文件

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

乐特的 hexo-minify 插件

1	npm install hexo-minify --save

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

## Hexo-minify Default Config Options
minify:
  preview: false ## 本地预览时是否压缩
  exclude: ["*.min.*"]
  js:
    enable: true
    sourceMap:
      enable: false ## 生成 sourceMap
      ## 将 sourceMappingURL 插入压缩后的 js 文件，如果为 false 则需要在浏览器开发者工具中手动添加 sourceMap
      sourceMappingURL: false ## //# sourceMappingURL=xxx.js.map
    ## 详细配置: https://github.com/terser/terser#minify-options
    options: {}
  css:
    enable: true
    ## 详细配置: https://github.com/clean-css/clean-css#compatibility-modes
    options: {}
  html:
    enable: true
    ## 详细配置: https://github.com/kangax/html-minifier#options-quick-reference
    options:
      minifyJS: true # Compressed JavaScript
      minifyCSS: true # CSS Compressed
      removeComments: true # Remove the comments
      collapseWhitespace: true # Delete any extra space
      removeAttributeQuotes: true # Delete attribute quotes
  image:
    enable: true
    svg:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-svgo#imageminsvgooptionsbuffer
      options: {}
    jpg:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-jpegtran#options
      options: {}
    png:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-pngquant#options
      options: {}
    gif:
      enable: true
      ## 详细配置: https://www.npmjs.com/package/imagemin-gifsicle#options
      options: {}
    webp:
      enable: true
      ## 详细配置: https://github.com/imagemin/imagemin-webp#options
      options: {}
  font:
    enable: false
    ## 详细配置: https://github.com/Lete114/fontmin-spider#api
    options: {}