📖 前言：为什么要优化？

你是否遇到过这些情况：

• 😤 打开博客白屏 5 秒，读者直接关掉跑了
• 😤 Lighthouse 评分一片红，自己都不敢看
• 😤 图片加载卡半天，移动端流量哗哗流走
• 😤 搜索引擎死活不收录，写了文章没人看

如果你中了任意一条，这篇文章就是为你写的。

本文将从 五个维度 系统性地优化你的 Hexo 博客，每一项都有具体的配置代码和效果对比。话不多说，开干！

📊 优化前：先做一次体检

在动手之前，我们需要摸清博客的”健康状况”。推荐以下两个工具：

💡 建议：先测一次，记下分数。等优化做完再测一次，那种成就感，懂的都懂 😎

⚡ 第一维度：加载速度优化

这是收益最大的一项。Google 的研究表明：页面加载超过 3 秒，53% 的移动端用户会直接离开。

1.1 开启 gzip / brotli 压缩

如果你的博客部署在 Nginx 服务器 上（非 GitHub Pages），开启压缩是最直接的提速手段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Nginx 配置 —— 开启 gzip
gzip on;
gzip_min_length 1k;
gzip_comp_level 6;
gzip_types text/plain text/css text/javascript
           application/json application/javascript
           application/xml text/xml image/svg+xml;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";

# 如果有 brotli 模块，进一步提升压缩比
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css text/javascript
             application/json application/javascript;

GitHub Pages 用户别担心，GitHub 默认开启了 gzip，下面还有其他方法。

1.2 压缩生成的 HTML / CSS / JS

安装 hexo-all-minifier 一键压缩所有静态资源：

1

npm install hexo-all-minifier --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

# 压缩配置
html_minifier:
  enable: true
  ignore_error: false
  silent: false

css_minifier:
  enable: true
  silent: false

js_minifier:
  enable: true
  silent: false

image_minifier:
  enable: true
  interlaced: false
  multipass: false
  optimizationLevel: 2
  pngquant: false
  progressive: false
  silent: false

1.3 利用 Service Worker 实现秒开

你的博客已经安装了 hexo-swpp，它是 Hexo 社区目前最强的 Service Worker 方案。配置好缓存策略后，二次访问几乎可以做到毫秒级加载。

在 _config.anzhiyu.yml 中找到 swpp 相关配置：

1
2
3
4
5
6

swpp:
  enable: true
  # 关键配置：
  # - 预缓存所有页面，确保离线可访问
  # - 运行时缓存图片和外部资源
  # - 设置合理的缓存过期时间

🖼️ 第二维度：图片优化

图片往往是网页体积的最大元凶。一张未经压缩的高清截图动辄几百 KB，甚至上 MB。

2.1 图片格式的选择策略

1
2
3
4
5
6

graph TD
    A[选择图片格式] --> B{需要透明背景?}
    B -->|是| C[用 WebP 或 PNG]
    B -->|否| D{照片还是图标?}
    D -->|照片| E[用 WebP 或 JPEG]
    D -->|图标/Logo| F[用 SVG]

2.2 图床选择与 CDN 加速

你的博客已经在用 GitHub + jsDelivr CDN 方案（参考你写的 PicGo 图床文章），这是目前免费方案中最优解之一。

总结一下最佳实践：

1
2
3
4
5
6
7
8

# ✅ 好：使用 CDN 图床
![图片](https://testingcf.jsdelivr.net/gh/New-luo/NewPic@main/imgs/xxx.webp)

# ❌ 差：直接把图片放在 source/ 下
![图片](./image.png)

# 💡 技巧：使用 WebP 格式替代 PNG/JPG
# 体积通常能减少 50%～70%

2.3 图片懒加载

Anzhiyu 主题已经内置了懒加载。确认 _config.anzhiyu.yml 中已开启：

1
2
3
4
5

# 懒加载配置
lazyload:
  enable: true
  field: post    # post / site
  placeholder:   # 占位图

在文章中引用图片时，可以用 HTML 方式手动控制：

1
2
3
4
5

<!-- 添加 loading="lazy" 属性 -->
<img src="图片URL" loading="lazy" alt="描述" />

<!-- 使用 decoding="async" 避免阻塞渲染 -->
<img src="图片URL" loading="lazy" decoding="async" alt="描述" />

🔍 第三维度：SEO 优化

代码写得再好，没人看到也是白搭。

3.1 基础 SEO 配置

首先，核对 _config.yml 中的基础信息是否填写完整：

1
2
3
4
5
6
7

# _config.yml
title: 循光而归
subtitle: 独属程序员的浪漫
description: 归途也还可爱     # ← 这句话会出现在搜索引擎结果中
keywords: Hexo, 博客, 程序员, 技术
author: 拾光
language: zh-CN

3.2 生成 sitemap

安装 sitemap 生成插件：

1

npm install hexo-generator-sitemap --save

这会自动在 public/ 下生成 sitemap.xml，然后去 Google Search Console 和 百度站长平台 提交。

3.3 每篇文章的 SEO 最佳实践

写好 Front Matter 就是在做 SEO：

1
2
3
4
5
6
7
8

---
title: Hexo 博客深度优化指南  # ← 标题含关键词，50～70 字最佳
description: >-                # ← 这个会出现在搜索结果摘要里！
  一份覆盖 Hexo 博客性能优化、SEO 提升、图片加载策略的全面实战指南
sitemap: true                   # ← 这个别忘了，控制是否被收录
tags: [Hexo, 博客优化, SEO]    # ← 标签也是关键词
categories: [Hexo]             # ← 分类有助于结构化
---

3.4 结构化数据

Anzhiyu 主题已内置了基础的 JSON-LD 结构化数据，这让搜索引擎能更好地理解你的内容，有机会在搜索结果中展示富文本卡片。

3.5 百度收录全流程

参考你之前写的 百度收录文章，总结核心流程：

1
2
3
4
5

1. 注册百度站长平台，验证网站所有权
2. 提交 sitemap.xml
3. 添加主动推送代码（或使用 hexo-baidu-url-submitter 插件）
4. 耐心等待 —— 百度收录周期通常是 1～4 周
5. 持续更新高质量原创内容，收录速度会越来越快

🔌 第四维度：插件瘦身

每多一个插件，就多一份构建负担。定期审查 package.json 是一个好习惯。

4.1 审计你的插件

在博客根目录下执行：

1
2

# 查看已安装的插件
npm ls --depth=0 | grep hexo

输出示例（你的博客）：

1
2
3
4
5
6
7

hexo-ai-summary-liushen      ← 如果不用 AI 摘要可以去掉
hexo-bilibili-bangumi        ← 追番页核心，保留 ✅
hexo-butterfly-envelope      ← 信封留言板，保留 ✅
hexo-deployer-git            ← 部署用，保留 ✅
hexo-generator-search        ← 搜索用，保留 ✅
hexo-helper-live2d           ← 看板娘，保留 ✅
hexo-wordcount               ← 字数统计，保留 ✅

4.2 懒加载 vs 全局加载

并不是每个插件都需要在所有页面上加载。以 Anzhiyu 为例：

1
2
3
4
5
6
7

# _config.anzhiyu.yml 中的 CDN 注入控制
# 只在需要的页面引入特定资源的思路：
inject:
  head:
    # 代码高亮只在文章页需要
  bottom:
    # Live2D 只在首页展示

核心原则：只在需要的页面加载需要的资源。

✨ 第五维度：用户体验微打磨

性能做好了，接下来是让用户觉得”这博客真舒服”的细节。

5.1 优化你的 404 页面

Anzhiyu 的 404 页面支持自定义。在 source/404.md 中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

---
title: 页面走丢啦 🕳️
comments: false
---

# 404 —— 你来到了知识的荒原 🏜️

很遗憾，这个页面不存在或者已经被删除。

不如试试：

- 🏠 [回到首页](/) 
- 🔍 [搜索一下](/search)
- 🎲 [随便逛逛](/random)
- 💬 [留言告诉我](/comments)

5.2 友情链接页面优化

你的友人帐页面已经有很棒的视觉效果。一个小建议：定期检查友链，把失联的站点标记出来或移走，保持页面的活跃感。

5.3 评论区引导

在每篇文章底部添加引导语，鼓励读者互动：

1
2
3
4
5

---
> 💬 **如果这篇文章对你有帮助**
> 
> 欢迎在评论区留言交流，或者分享给你的朋友。
> 你的每一次点赞和分享，都是我持续更新的动力 🚀

5.4 RSS 订阅

虽然现在 RSS 是小众需求，但它是去中心化分发的重要手段，也是独立博客的浪漫所在：

1

npm install hexo-generator-feed --save

配置后，你的读者就可以用 RSS 阅读器订阅你的博客更新了。结合 GitHub Actions，可以实现发布即推送。

📈 优化效果自查表

优化完成后，用这张表逐项复查：

💭 写在最后

博客优化的本质不是追求满分 Lighthouse 评分，而是：

让你的读者用最少的等待，获得最好的阅读体验。

很多时候，一个温暖的 404 页面、一句恰到好处的引导语，比 0.1 秒的速度提升更能打动人心。

📝 相关阅读

• 小技巧 - Github+PicGo搭建个人免费图床
• 小技巧 - 如何在百度搜索到自己的网站？
• 效率神器 - 精选在线工具与资源全收录
• hexo指令集