Hexo-NexT加载性能优化

本文主要介绍Hexo-NexT主题加载性能优化。

  • 主题版本:NexT-7.1.2

注意:本文主要关注加载速度优化,不考虑因为网络问题导致的访问慢问题,由于国内访问GitHub Pages速度不佳,我们可以将博客部署到国内的VPS、Coding Pages,或者采用CDN加速,具体可以参考:

启用FastClick

FastClick是一个简单易用的库,用于消除物理点击和click在移动浏览器上触发事件之间300毫秒的延迟。目的是使您的应用程序感觉不那么迟钝和响应更快,同时避免干扰您当前的逻辑。

注意:截至2015年底,大多数移动浏览器(尤其是Chrome和Safari)不再具有300毫秒的触摸延迟,因此fastclick对新浏览器没有任何好处,并且可能会在您的应用程序中引入错误。仔细考虑您是否真的需要使用它。

我们可以直接在主题配置文件_config.yml中设置enable: true开启:

1
fastclick: true

安装依赖:

  • 方法1:启用CDN
1
2
vendors:
fastclick: https://cdn.jsdelivr.net/npm/fastclick@1/lib/fastclick.min.js

启用Quicklink预加载

近来,Google Chrome Labs 推出了 quicklink,用以实现链接资源的预加载(prefetch)。

Quicklink原理简介

当我们提到性能优化,往往都会着眼于当前用户访问的这个页面,通过压缩资源大小、删减不必要资源、加快页面解析渲染等方式提升用户的访问速度;而 quicklink 用了另一种思路:我预先帮你加载(获取)接下来最可能要用的资源,这样之后真正使用到该资源(链接)时就会感觉非常顺畅。

基本配置

NexT主题已经内置了Quicklink的支持,我们只需要在主题配置文件_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
quicklink:
enable: true

# Quicklink (quicklink.umd.js script) is loaded on demand
# Add `quicklink: true` in Front-matter of the page or post you need
# Home page and archive page can be controlled through home and archive options below
home: true
archive: true

# Default (true) will initialize quicklink after the load event fires
delay: true
# Custom a time in milliseconds by which the browser must execute prefetching
timeout: 3000
# Default (true) will enable fetch() or falls back to XHR
priority: true

# For more flexibility you can add some patterns (RegExp, Function, or Array) to ignores
# See: https://github.com/GoogleChromeLabs/quicklink#custom-ignore-patterns
# Leave ignores as empty if you don't understand what it means
# Example:
# ignores:
# - /\/api\/?/
# - uri => uri.includes('.xml')
# - (uri, el) => el.hasAttribute('noopener')
ignores:

注意:Quicklink需要安装依赖

  • 方法1:启用CDN
1
2
vendors:
quicklink: //cdn.jsdelivr.net/npm/quicklink@1/dist/quicklink.umd.js

页面静态资源压缩

我们自己添加的css和js文件为了可读性,往往会有很多换行和空格,这些对于浏览器来说是没有用的,甚至还会降低渲染页面的速度。同时,由于Markdown转成html的bug,会导致页面存在大量的空白,我们可以通过查看页面源代码发现这些大量的空白符,这也会造成页面渲染的性能问题。

因此,我们需要对页面的静态资源进行压缩,包括css、js和html等文件。

我们可以使用hexo-neat插件进行压缩。hexo-neat配置简单,无需额外命令,我们只需使用原本的调试、部署命令就可以自动完成静态资源的压缩。

安装hexo-neat插件

首先安装hexo-neat插件,在博客根目录输入:

1
npm install hexo-neat --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
# 博文压缩
neat_enable: true
# 压缩html
neat_html:
enable: true
exclude:
# 压缩css
neat_css:
enable: true
exclude:
- '**/*.min.css'
# 压缩js
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '**/*.min.js'
- '**/jquery.fancybox.pack.js'
- '**/index.js'
- '**/fireworks.js'

几个小问题

跳过压缩文件的正确配置方式

如果按照官方插件的文档说明来配置exclude,你会发现完全不起作用。这是因为配置的文件路径不对,压缩时找不到你配置的文件,自然也就无法跳过了。你需要给这些文件指定正确的路径,万能的配置方式如下:

1
2
3
4
neat_css:
enable: true
exclude:
- '**/*.min.css'

压缩html时不要跳过Markdown文件

如果跳过压缩.md文件,而你又刚好在文章中使用到了NexT自带的tab标签,那么当Hexo在生成静态页面时就会发生解析错误。这会导致使用到了tab标签的页面生成失败而无法访问。

压缩html时不要跳过.swig文件

.swig文件是模板引擎文件,简单的说Hexo可以通过这些文件来生成对应的页面。如果跳过这些文件,那么你将会发现,你的所有页面完全没有起到压缩的效果,页面源代码里依然存在着一大堆空白。

页面加载性能测试

现在我们可以测试下页面加载性能。

Google PageSpeed Insights可用于帮助分析网页加载速度瓶颈,该网站将会针对指定域名进行在线测试,并提供一份详细的页面加载分析报告,报告中还会根据页面资源加载情况给出合理的优化建议及预期优化效果,因此用户可以有的放矢的进行性能优化专项整改。

参考


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

赞赏一杯咖啡