hexo 博客加载优化

Posted on | In | |

hexo 博客加载优化

背景

最近趁着周末折腾自己博客的时候,发现刷页面的时候会有点卡顿,感觉页面性能很低,所以开始了下面的优化,分析下来结果还不错比之前快了很多,那让我们开始吧!

Image.png

简单的来说主要以下几个部分的优化:

  • 压缩静态资源,提高访问速度
  • 图片懒加载

压缩静态资源

安装插件：

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'

图片懒加载

安装插件:

1
npm install hexo-lazyload-image --save

_config.yml 中添加以下代码:

1
2
3
4
5
# 图片懒加载
lazyload:
  enable: true
  onlypost: false
  loadingImg: /images/loading.gif
请我吃🍗