Hexo博客优化与加速

由于博客部署在 GitHub Pages,服务器在美国,在国内部分地区访问速度比较慢而且还不是很稳定。在尝试将博客加载的google字体库切换成烧饼博客提供的加速站点后,网站响应速度有一定提升。然后就是使用了 InstantClick 和 hexo 的两个插件 hexo-service-worker、 hexo-filter-optimize 来提速,期间也接触了下 PWA,下边将分别介绍。

如果你的域名已备案,可使用国内云服务商提供的 CDN 服务,相关操作可谷歌或百度。

google字体库切换

切换步骤可参考reuixiy大佬的文章:

Google Fonts 已支持思源宋体!

烧饼博客也有相关的替换步骤:

前端 CDNJS 库及 Google Fonts、Ajax 和 Gravatar 国内加速服务

InstantClick预加载

在访问者单击链接之前,他们将鼠标悬停在该链接上。在这两个事件之间,通常会经过200毫秒至300毫秒。InstantClick会利用这段时间来预加载页面,因此单击时该页面已经存在。使用的方法也很简单:

  1. 下载InstantClick,然后保存到/themes/next/source/js/src/目录下

  下载地址

  1. 在/themes/next/layout/_layout.swig的中引入
1
2
<script type="text/javascript" src="/js/src/instantclick.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

如遇到图标加载不出来(可使用cdn)、与 FancyBox、Google Analytics 等等的兼容问题,可查看官方文档或 Google。

InstantClick 使用的是 pushState + Ajax,即 PJAX。最新版本 NexT 主题已经支持 PJAX,无需使用 InstantClick。

hexo-filter-optimize

有关使用 hexo-filter-optimize 加速的的可参考github教程。使用者都反映有一定的问题,最后我也弃用了,相关博文:

加速 Hexo 博客的方法及遇到的问题

Service Worker

hexo-offlinehexo-service-worker 插件都能让博客拥有 Service Worker 功能,能够默认的把站点中 public 内的所有静态资源包括 html 文件缓存起来,达到离线访问的效果。在开发过程中,可以通过 localhost 使用 Service Worker,但如果要在网站上部署 Service Worker,则需要在服务器上设置 HTTPS。

Service worker是除了PageSpeed,CDN这些常见的服务器和网络加速之外,通过客户端实现更好访问体验的工具。

Service Worker的控制从第二次页面访问开始,在首次加载页面时,所有资源都是从网络加载的,Service worker 在首次加载时不会获取控制网络响应,它只会在后续访问页面时起作用。使用其实现加速/离线访问,只需安装以上任意一款插件,我使用的是hexo-service-worker,安装步骤:

1
npm i hexo-service-worker --save

站点配置文件 _config.yml 添加

1
2
3
4
5
6
7
# offline config passed to sw-precache.
service_worker:
maximumFileSizeToCacheInBytes: 5242880
staticFileGlobs:
- public/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2}
stripPrefix: public
verbose: true

完成后,在Chrome 开发者工具 Application 选项 Service Workers 下,勾选 Offline (或者直接断网)即可进行离线测试。

uG506e.png

由于我的博客加的东西太多太花哨,引入的静态文件也比较多,导致在启用 Service Worker 功能后,缓存的资源文件也挺大。虽然实现了离线访问,不过速度还是有点点慢。

uG59W8.png

对于那种极简博客,离线访问效果特别棒,整个网站缓存仅几十兆,比如这位大佬:

reuixiy

其他文章可参考:

使用Service worker实现加速/离线访问静态blog网站

PWA

PWA(Progressive Web Apps) 是 Google 提出的用前沿的 Web 技术为网页提供 App 般使用体验的一系列方案。PWA 本质上是 Web App,借助一些新技术也具备了 Native App 的一些特性,兼具 Web App 和 Native App 的优点:

  1. 可靠 - 即使在不稳定的网络环境下,也能瞬间加载并展现

  2. 体验 - 快速响应,并且有平滑的动画响应用户的操作

  3. 粘性 - 像设备上的原生应用,具有沉浸式的用户体验,用户可以添加到桌面

上文已经使用 Service Worker,网站具备了离线访问功能,再结合 PWA,就可以将博客添加至手机主屏或计算机桌面,如图:

utoaHe.png

或者在 Chrome 网址栏直接点+号按钮:

utjwE6.png

请求必须都是HTTPS(可在 Chrome 开发者工具 Security 下查看),否则在这个页面不会显示安装XXX…

安装后,在 Mac 的 Chrome 应用目录下出现 Leaf’s Blog.app:

utv3Zt.png

打开的效果如下:

uH7hid.png

在 windows 桌面是 Chrome 应用目录下一个类似快捷方式的图标。手机 Chrome 中效果如下:

utxFSg.png

成功添加到手机桌面(右一):

utxKYT.png

加载页面(有 APP 的效果~):

uge6oD.png

期间如果添加不成功,则需要在手机系统设置里,为 Chrome 开启创建桌面快捷方式的权限

uJsOFe.png

以下方法均可为博客增加 PWA 功能,方法1试了N次没成功,然后使用的是方法2。

方法1

  1. 在 Hexo 博客根目录 /source/ 下,新增 manifest.json 文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"name": "北宸",
"short_name": "北宸",
"icons": [
{
"src": "/images/beichen.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/images/beichen.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"theme_color": "#2196f3",
"background_color": "#2196f3",
"display": "standalone"
}

属性 src 的值可填写 /themes/next/source/images/ 下的图片路径。

  1. 在 /themes/next/layout/_layout.swig 的 head 标签内引入
1
<link rel="manifest" href="/manifest.json">

方法2

在使用方法1后,Chrome 开发者工具 Application 下的 Manifest 一直显示:

1
no matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest

uJRBz4.png

多次 Google 无果,然后就使用了 hexo-pwa ,此插件支持 Service Worker 和 pwa ,所以只需安装此插件即可替代 hexo-offline 和 hexo-service-worker,具体步骤如下:

1
npm install --save hexo-pwa

再在站点配置文件中增加如下配置:

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
# https://github.com/lavas-project/hexo-pwa
pwa:
manifest:
path: /manifest.json
body:
name: 北宸
short_name: 北宸
description: Leaf's Blog
icons:
- src: /images/beichen.png
sizes: 192x192
type: image/png
- src: /images/beichen.png
sizes: 512x512
type: image/png
start_url: /index.html
theme_color: '#2196f3'
background_color: '#2196f3'
display: standalone
serviceWorker:
path: /sw.js
preload:
urls:
- /
posts: 5
opts:
networkTimeoutSeconds: 5
routes:
- pattern: !!js/regexp /hm.baidu.com/
strategy: networkOnly
- pattern: !!js/regexp /.*\.(js|css|jpg|jpeg|png|gif)$/
strategy: cacheFirst
- pattern: !!js/regexp /\//
strategy: networkFirst
priority: 5

有关Web App Manifest,可参考:

The Web App Manifest

也可在如下网站生成 manifest 的配置项

Web App Manifest Generator

到此,PWA配置完成,enjoy !

点击查看

本文标题:Hexo博客优化与加速

文章作者:北宸

发布时间:2019年09月29日 - 21:28:27

最后更新:2019年10月11日 - 12:24:46

原始链接:https://www.liaofuzhan.com/posts/1599400735.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------