发布于 ，更新于 

网站速度优化指北

在开始之前，有这么一个网站：https://lynxcatthethird-person.netlify.app/html/loading.html。

这里面引入了五套字体，每套字体 3 个或 9 个字重，共计需要加载 1000～2000 个字体文件。那么，这个网页的速度与性能，会差到什么程度？

由此，我们引出本文的话题：如何优化网站速度？

减少下载资源的数量与大小

此话不必多说，但应如何做到呢？

合并文件

文件的存储与传输都是按照一定的簇（数据包）来执行的。举个例子：有 100 个小文件，大小均为 1KB，簇（数据包）大小为 4KB，则它们的总大小为 400KB，而非 100KB！这无形之中就多了 300KB。而且，更多的文件就意味着更多的连接、请求、下载次数，耗时相当可观。

合并文件的主要方法有：

  1. 将多个 CSS/JS 合并为一个
    可参见网站加载速度优化方案总结 | 山岳库博
  2. 将 CSS/JS 嵌入至 HTML 中

压缩文件

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

法一

乐特的 hexo-minify 插件

1
npm install hexo-minify --save

在博客目录下 _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
## 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: {}

法二

来源：Hexo 压缩静态文件 | Argvchs の小窝

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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

减少 CSS/JS 加载数

更多的文件意味着更长的加载用时与渲染用时（RAM 时间与 CPU 时间），因此应慎重引入。

以 Butterfly 主题为例，若您并不必需某些组件（如 abcjs），则应将其关闭。若您并不明确某些功能（如 Layload 与 Service Worker）的利与弊的大小关系，则也不应轻易启用。常见的有：

附加组件

*[附加组件]: abcjs，Mermaid，Katex/MathJax，Aplayer，美化插件（Firework 等）

这些东西并非必需，不应以多多益善为由开启。

1
2
aplayerInject:
  enable: true

(其余略去，请自行判断)

预加载

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

1
instantpage: true

懒加载

在图床速度足够快、图片足够优秀时，开启它作用并不明显，反而可能阻塞某些资源的加载（让它们卡在 “等待中”）。并且，懒加载会频繁的取消与发起资源的加载，拉长时间。

*[足够优秀]: 指体积与品质符合网页加载需求

1
2
lazyload:
  enable: false

字体

字体文件往往体积巨大，渲染起来又费时费力，不应过多引入。

启用 ServiceWorker

部分服务器是没有缓存功能的，这意味着每次访问都需要从服务器下载资源，既浪费流量，又拉长加载时间，而 ServiceWorker 就解决了这一难题。ServiceWorker 可以对缓存进行合理调度，减少内容的下载量，对于速度提升十分明显。

具体部署过程此处不多讲，请参见《小白也能用的 SW 构建插件》 | 山岳库博。

保证资源加载畅通

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

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

若确因资金、政策、网络环境等原因不能保证服务时时可用，可用 CDN 竞速、资源镜像或 IP 属地判断等技术缓解。具体按可以参见《小白也能用的 SW 构建插件》 | 山岳库博。

停用加载动画与入场动画

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

1
2
preloader:
  enable: false

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

1
enter_transitions: false

使用合适的 CDN

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

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

1
2
3
4
CDN:
  third_party_provider: custom
  version: false
  custom_format: https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}

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

1
2
3
CDN:
  option:
    busuanzi: https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js

若您的站点面向全球用户，则可选择 CDN 竞选、并发请求，IP 筛选等策略。具体按可以参见《小白也能用的 SW 构建插件》 | 山岳库博。

优化图片

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

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

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。

快来参与讨论吧