Hexo NexT 加载性能优化

发表于 更新于 分类于 阅读次数： 本文字数： 623 阅读时长 ≈ 1 分钟
Hexo NexT 加载性能优化

[TOC]

启用 Quicklink 预加载

近来，Google Chrome Labs 推出了 quicklink，用以实现链接资源的预加载（prefetch）。

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

配置

_config.next.yml 

1
2
3
4
5
6
7
8
quicklink:
  enable: true
  home: true
  archive: true
  delay: true
  timeout: 3000
  priority: true
  ignores:

注意：Quicklink 需要安装依赖。

启用 CDN

_config.next.yml 

1
2
vendors:
  quicklink: //cdn.jsdelivr.net/npm/quicklink@1/dist/quicklink.umd.js

页面加载性能测试

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

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

  • Google PageSpeed Insights