优化 Hugo 博客速度：Pjax、dynamic script、preload、minification

Fri, 18 Oct 2024 00:00:00 +0800

本文介绍了优化博客速度的几个方式：Pjax（免刷新加载页面）、dynamic script（动态插入脚本）、rel=preload（预加载）、minification（极简化）。

本博客是 Hugo 生成的静态网站，感觉访问速度还不算慢。有天我看别人的博客（大概是单页应用），发现点击链接居然没刷新网页就加载了新页面，速度非常快。那时我想：要是我的 Hugo 博客也能这么流畅就好了。我感觉把博客改成单页应用要耗费不少时间，遂作罢。

后来我发现可以用 Pjax 技术让静态网站实现免刷新加载页面。Pjax 的意思是 pushState（修改 URL）+ Ajax（asynchronous JavaScript and XML，发送请求）。通俗来说，Pjax 就是请求网页、替换内容、修改 URL，这个过程比加载整个页面更快。

搜索 Pjax 库，找到两个好几年没更新的库（MoOx/pjax、defunkt/jquery-pjax），我不想用不维护的库。我快放弃的时候发现了一个支持 Pjax 的 Hugo 主题：hugo-theme-luna，从自述文件可以看出 Pjax 是用 swup 实现的，然后我就用它了。

Pjax 免刷新加载页面 #

如果网站没有 JavaScript 代码，那直接加载 swup 就好了。

建议使用这些插件：

Head Plugin：刷新 <head> 元素的内容和 <html> 元素的 lang 属性。
Preload Plugin：光标在链接时预加载 URL，用户点击时就会内容会马上替换，还可以配置自动加载出现在可见区域的链接。
Progress Bar Plugin：加载时间较长时显示进度条。

注意要先加载插件再加载 swup。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<script src="https://unpkg.com/@swup/head-plugin@2"></script>
<script src="https://unpkg.com/@swup/preload-plugin@3"></script>
<script src="https://unpkg.com/@swup/progress-plugin@3"></script>
<script src="https://unpkg.com/swup@4"></script>

<script>
 const swup = new Swup({
 containers: ["body"], // 替换 <body> 的内容
 plugins: [
 new SwupHeadPlugin(),
 new SwupPreloadPlugin({ preloadVisibleLinks: true }), // 预加载页面可见的链接
 new SwupProgressPlugin(),
 ],
 });
</script>

我的博客用到了 3 个 JavaScript 程序：Google Analytics（流量统计）、Giscus（评论服务）、Disqus（评论服务），用了 swup 之后要考虑是否需要额外处理。

读者点击链接加载新页面后的处理：

Google Analytics：参考 Measure single-page applications | Google Analytics | Google for Developers，打开 Enhanced measurement 就可以检测页面变化了。
Giscus：加载。
Disqus：重置（reset）或者加载。

Dynamic Script 动态插入脚本 #

我写了个动态插入脚本的函数，可以设置等待时间、加载前执行的函数、async、加载后执行的函数、attribute。

 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


function loadScript({
 url,
 delay,
 onloadCallback,
 async,
 preloadCallback,
 attributes = {},
}) {
 function load() {
 if (preloadCallback) preloadCallback();

 const script = document.createElement("script");
 script.src = url;
 script.async = async;

 // Set attributes
 Object.entries(attributes).forEach(([key, value]) => {
 script.setAttribute(key, value);
 });

 if (onloadCallback) script.onload = onloadCallback;

 document.body.appendChild(script);
 }

 if (typeof delay !== "undefined") {
 setTimeout(load, delay);
 } else {
 load();
 }
}

我给 Google Analytics、Giscus、Disqus 加了 100ms 等待时间，给 swup 添加了 200ms 等待时间。

rel=preload 预加载 #

在 <link> 标签使用 rel="preload" 可以让浏览器提前下载资源（字体、图片、脚本、样式等），后面动态插入脚本时浏览器就可以马上执行下载好的脚本。

示例：

1
2
3
4
5


<head>
 <link rel="preload" as="script" href="https://unpkg.com/@swup/head-plugin@2">
 <link rel="preload" as="script" href="https://unpkg.com/@swup/preload-plugin@3">
 <link rel="preload" as="script" href="https://unpkg.com/swup@4">
</head>

preload 应该叫 predownload，因为它并不会提前加载脚本，只是提前下载。

Minification 极简化 #

这次优化博客没用到极简化，不过既然讲到优化博客了，就顺便说一下吧。极简化就是移除代码中不必要的内容（比如：空格、空行、缩进），从而减小文件大小，这样浏览器就能更快下载完网页。

Hugo 可以极简化 HTML、CSS 和 JavaScript 文件。本博客的代码用 Hugo 极简化了。举个例子，样式文件大小原本是 13.8 kB，经过极简化后是 7.4 kB（原文件的 53.6%），传输过程中再经过 Brotli 压缩后是 2.1 kB（原文件的 15.2%）。

感想 #

我已经用 swup 两三天了，非常满意，真没想到静态网站可以变成单页应用。Preload 插件能让浏览器会自动提前加载页面，读者点击链接时页面会瞬间加载，这个感觉太爽啦！

Pjax on 叶寻的博客