Hexo 作为基于 Node.js 的静态博客框架，其性能优化有一些特定的方法。以下是针对 Hexo 博客加载速度慢的常见原因及优化方案：

一、Hexo 自身配置优化

  1. 启用静态资源压缩
    Hexo 默认生成的文件未压缩，可通过插件优化：

安装插件：

1
2
npm install hexo-neat --save  # 压缩 HTML/CSS/JS
npm install hexo-image-slim --save  # 图片压缩

配置 _config.yml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# hexo-neat 配置

neat_enable: true
neat_html:
  enable: true
  exclude:

neat_css:
  enable: true
  exclude:
    - '*.min.css'

neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '*.min.js'
  1. 优化生成速度与文件体积
    减少不必要的生成：
    1
    2
    3
    4
    5
    6
    # _config.yml

    skip_render: 
      - '*.pdf'
      - '*.zip'
      - '*.mp4'  # 跳过大型文件生成
    禁用未使用的功能：
    1
    2
    3
    4
    5
    6
    # 关闭不需要的功能（如 RSS、sitemap）

    feed:
      enable: false
    sitemap:
      enable: false

二、主题与插件优化

  1. 更换轻量级主题
    部分 Hexo 主题（如 NexT、Butterfly）自带性能优化，可选择以下配置：

启用 CDN：在主题配置中使用第三方 CDN 加载资源（如 Google Fonts、Font Awesome）。
关闭不必要的功能：如动画效果、评论系统的实时预览等。
2. 精简插件
移除未使用的插件，仅保留必要的功能：

1
2
npm uninstall hexo-generator-feed  # 如不需要 RSS
npm uninstall hexo-generator-sitemap  # 如不需要 sitemap

三、静态资源优化

  1. 图片处理
    压缩图片：使用工具（如 ImageOptim、TinyPNG）手动压缩，或通过 hexo-image-slim 自动处理。
    使用 WebP 格式：
    1
    2
    3
    4
    5
    6
    # _config.yml

    image_slim:
      enable: true
      img_dir: images  # 图片目录
      convert_to_webp: true  # 转换为 WebP
    懒加载图片：添加插件 hexo-lazyload-image：
    1
    npm install hexo-lazyload-image --save
  2. CSS/JS 优化
    合并与压缩：使用 hexo-neat 自动合并和压缩 CSS/JS 文件。
    使用 CDN：将 jQuery、Bootstrap 等库替换为 CDN 链接，减少本地文件体积。

四、部署与缓存策略

  1. 增量部署
    使用 hexo-deployer-git 时，仅推送变更的文件：
1
hexo generate --deploy  # 生成并部署
  1. 启用 GitHub Pages 缓存
    在 source 目录下创建 .nojekyll 文件，避免 GitHub Pages 重新构建：
    1
    touch source/.nojekyll
    添加缓存头信息：
    1
    2
    # _config.yml
    meta_generator: false  # 移除默认的<meta name="generator">标签
    五、高级优化
  2. 使用云函数中转（针对国内用户）
    将 GitHub Pages 内容通过 Vercel/Netlify 等平台中转，利用其全球 CDN 节点：
    1
    2
    3
    4
    5
    6
    # 在 Vercel 配置文件 vercel.json 中添加
    {
      "rewrites": [
        { "source": "/(.*)", "destination": "https://your-github-pages-url.github.io/$1" }
      ]
    }
  3. 预加载关键资源
    在主题的模板文件中添加：
1
2
3
预览
<link rel="preload" href="/css/main.css" as="style">
<link rel="preload" href="/js/main.js" as="script">

六、性能测试与监控

  1. 使用 Lighthouse 检测
    在 Chrome 浏览器中按 F12 → Audits → 运行 Lighthouse，重点关注：

First Contentful Paint (FCP)：首屏渲染时间
Largest Contentful Paint (LCP)：最大内容渲染时间
Total Blocking Time (TBT)：主线程阻塞时间
2. 对比测试
使用 WebPageTest 对比你的博客与同类 Hexo 博客的加载速度。
检查 Network 面板，找出加载最慢的资源（如大图片、第三方脚本）。
七、常见问题排查

  1. 主题配置冲突
    某些主题的默认配置可能导致性能问题，检查主题文档中的优化建议。
  2. 本地环境与线上差异
    本地预览 (hexo server) 的速度不代表线上性能，务必部署后测试。
  3. GitHub Actions 构建超时
    若使用 GitHub Actions 自动部署，可在 .github/workflows 中增加内存配置：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v3
            with:
              fetch-depth: 0
          - name: Use Node.js
            uses: actions/setup-node@v3
            with:
              node-version: '16'
              cache: 'npm'

通过以上优化，Hexo 博客在 GitHub Pages 上的加载速度通常能提升 50% 以上。如果问题仍存在，建议提供具体的博客链接或 Lighthouse 报告，以便进一步分析。