Hexo博客性能优化指南

前言

随着博客内容的不断丰富，网站性能可能会出现下降，影响用户体验。本文将详细介绍如何从多方面优化Hexo博客，提升加载速度、改善用户体验并减少服务器资源消耗。通过实测，这些优化措施能显著提高网站性能。

一、资源压缩优化

1. 安装hexo-all-minifier插件

1
npm install hexo-all-minifier --save

2. 配置_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
# hexo-all-minifier 资源压缩配置
all_minifier: true
html_minifier:
  enable: true
  ignore_error: false
  exclude:
css_minifier:
  enable: true
  exclude: 
    - '*.min.css'
js_minifier:
  enable: true
  mangle: true
  output:
  compress:
  exclude: 
    - '*.min.js'
image_minifier:
  enable: true
  interlaced: false
  multipass: false
  optimizationLevel: 2
  pngquant: false
  progressive: false
  webp: true

3. 压缩效果

  • HTML文件减小：约10-14%
  • CSS文件减小：21-44%
  • JavaScript文件减小：35-50%
  • 图片文件减小：3-54%

二、页面加载速度优化

1. 开启PJAX无刷新加载

安装PJAX：

1
npm install pjax --save

配置主题_config.yml：

1
2
3
4
5
# Pjax
pjax:
  enable: true
  exclude:
    # - xxxx

2. 预连接优化

在主题配置中添加：

1
2
3
4
5
6
7
8
9
10
11
preconnect:
  enable: true
  # Add a non-crossorigin to your font-domain
  non_cross_origin: true
  # Add a connection to the comment system
  comments: true
  # Other domains to preconnect
  custom:
    - https://fonts.googleapis.com
    - https://cdn.jsdelivr.net
    - https://unpkg.com

3. 脚本加载优化

1
2
3
4
5
6
7
8
9
script:
  # 延迟加载第三方脚本 (true：延迟加载，false：正常加载)
  defer: true
  # 异步加载第三方脚本 (true：异步加载，false：正常加载)
  async: true
  # 第三方脚本延迟时间 (毫秒)
  delay: 5000
  # 脚本放置位置
  position: body # head | body

三、图片优化技术

1. 响应式图片处理

安装插件：

1
npm install hexo-filter-responsive-images --save

配置_config.yml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 响应式图片配置
responsive_images:
  pattern: '**/*.+(png|jpg|jpeg)'
  sizes:
    small:
      width: 480
      fit: cover
    medium:
      width: 768
      fit: cover
    large:
      width: 1200
      fit: inside
  quality: 80

2. 图片懒加载

配置主题_config.yml：

1
2
3
4
5
6
# Lazyload
lazyload:
  enable: true
  field: site
  placeholder: /img/loading.gif
  blur: true

四、离线缓存功能

1. 安装离线缓存插件

1
npm install hexo-offline --save

2. 创建配置文件hexo-offline.config.cjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
module.exports = {
  globDirectory: "public",
  globPatterns: [
    "**/*.{js,html,css,png,jpg,jpeg,gif,svg,eot,ttf,woff,woff2}"
  ],
  swDest: "public/service-worker.js",
  maximumFileSizeToCacheInBytes: 5242880,
  runtimeCaching: [
    {
      urlPattern: new RegExp('https://cdn.jsdelivr.net/.*'),
      handler: 'CacheFirst'
    },
    {
      urlPattern: new RegExp('https://npm.elemecdn.com/.*'),
      handler: 'CacheFirst'
    }
  ]
};

五、前端性能优化

在custom.js中添加性能优化代码：

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// 性能优化：预加载关键资源
document.addEventListener('DOMContentLoaded', function() {
  // 预连接到常用域
  const domains = [
    'https://cdn.jsdelivr.net',
    'https://npm.elemecdn.com'
  ];
  
  domains.forEach(domain => {
    const link = document.createElement('link');
    link.rel = 'preconnect';
    link.href = domain;
    link.crossOrigin = 'anonymous';
    document.head.appendChild(link);
  });
  
  // 延迟加载非关键资源
  function loadDeferredStyles() {
    const additionalStyles = document.querySelectorAll('link[data-deferred="true"]');
    additionalStyles.forEach(style => {
      style.setAttribute('rel', 'stylesheet');
      style.removeAttribute('data-deferred');
    });
  }
  
  // 在页面完全加载后延迟加载非关键CSS
  window.addEventListener('load', loadDeferredStyles);
  
  // 在页面闲置时预加载可能需要的页面
  if ('requestIdleCallback' in window) {
    requestIdleCallback(() => {
      const links = document.querySelectorAll('a');
      const visited = new Set();
      
      links.forEach(link => {
        const href = link.getAttribute('href');
        if (href && href.startsWith('/') && !visited.has(href) && !href.includes('#')) {
          visited.add(href);
          
          // 当用户悬停在链接上时预加载页面
          link.addEventListener('mouseenter', () => {
            const prefetchLink = document.createElement('link');
            prefetchLink.rel = 'prefetch';
            prefetchLink.href = href;
            document.head.appendChild(prefetchLink);
          }, { once: true });
        }
      });
    }, { timeout: 2000 });
  }
});

六、优化效果对比

优化前存在的问题

  • 页面加载缓慢，特别是图片多的文章
  • 页面切换需要完全刷新
  • 移动端加载速度慢
  • 网络不稳定时无法访问

优化后的效果

  • 首屏加载速度提升
  • 页面切换更加流畅（PJAX无刷新）
  • 图片加载优化，按需加载
  • 移动端体验显著提升
  • 支持离线访问

实测数据

通过本地测试，各类资源文件大小减少效果显著：

  • HTML压缩：平均减少11%
  • CSS压缩：平均减少30%
  • JS压缩：平均减少42%
  • 图像优化：平均减少15%

下面是我们博客实际优化的部分日志：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
INFO  update Optimize IMG: img/friend_404.gif [ 17.91% saved]
INFO  update Optimize IMG: img/small_libretv-interface.jpg [ 13.72% saved]
INFO  update Optimize IMG: img/medium_error-page.png [ 4.11% saved]
INFO  update Optimize IMG: img/small_error-page.png [ 3.09% saved]
INFO  update Optimize IMG: img/large_error-page.png [ 6.26% saved]
INFO  update Optimize IMG: img/small_404.jpg [ 15.48% saved]
INFO  update Optimize IMG: img/medium_libretv-interface.jpg [ 14.08% saved]
INFO  update Optimize IMG: img/large_404.jpg [ 10.04% saved]
INFO  update Optimize IMG: img/small_butterfly-icon.png [ 12.20% saved]
INFO  update Optimize IMG: img/large_libretv-interface.jpg [ 14.14% saved]
INFO  update Optimize IMG: img/error-page.png [ 0.42% saved]
INFO  update Optimize IMG: img/medium_404.jpg [ 13.28% saved]
INFO  update Optimize IMG: img/404.jpg [ 24.24% saved]
INFO  update Optimize IMG: img/libretv-interface.jpg [ 54.75% saved]
INFO  update Optimize IMG: img/medium_butterfly-icon.png [ 11.09% saved]
INFO  update Optimize IMG: img/large_butterfly-icon.png [ 10.69% saved]

JavaScript文件的优化效果：

1
2
3
INFO  update Optimize JS: D:\project\younger\themes\butterfly\source\js\utils.js [ 48.93% saved]
INFO  update Optimize JS: D:\project\younger\themes\butterfly\source\js\main.js [ 45.95% saved]
INFO  update Optimize JS: D:\project\younger\themes\butterfly\source\js\search\local-search.js [ 45.65% saved]

七、后续优化建议

  1. 使用CDN加速：考虑将静态资源部署到CDN
  2. 更进一步优化第三方脚本：审查并减少不必要的第三方脚本
  3. 采用WebP格式图片：将更多图片转换为WebP格式
  4. 实施按需加载：根据用户访问行为按需加载内容
  5. 定期清理不必要的插件：移除不使用的Hexo插件

总结

通过以上优化措施，博客网站性能得到了显著提升。这不仅改善了用户体验，也降低了服务器资源消耗。对于Hexo博客来说，性能优化是一个持续的过程，建议定期检查网站性能，及时进行必要的优化调整。

希望本文的优化方法对大家的Hexo博客优化有所帮助！