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

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

由此,我们引出本文的话题:如何优化网站速度?

芜湖!新手村!

减少下载资源的数量

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

优化图片

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

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

OK 啊!入门级!

保证资源加载畅通

保证性能良好

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

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

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

压缩文件

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

Gulp

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

Hexo 插件

参见 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

curbengh 的 hexo-yam 插件

1
npm install hexo-yam --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
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

呜哇!黑洞!

缓存

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

具体部署过程此处不多讲,请参见 hexo-swppSwpp Backends 官方文档一份新版配置文件