起因

最近搭好了自己的 Typecho 博客（lihx.de），用的是 Facile 主题（现已改名为 FCLite）。跑了一下 Google PageSpeed Insights，桌面端性能只有 76 分，CLS（累积布局偏移）高达 0.75——远超 Google 推荐的 0.1 阈值。

优化前博客首页

问题很明显：CSS 延迟加载导致页面闪跳、图片没有尺寸声明、缩略图裁剪比例和 CSS 不匹配、无障碍和安全方面也有不少欠缺。

手动修？那得翻半天代码。于是我决定试试 AI 代理的组合拳。

工具介绍

Hermes Agent — 指挥官

Hermes 是一个 AI 代理框架，可以通过飞书/Telegram/微信等多个平台交互。它就像一个项目经理：

  • 理解你的需求，拆解成子任务
  • 调用各种工具（终端、浏览器、文件编辑等）
  • 可以派出子代理并行工作
  • 跨会话记忆——下次聊起来不用重新解释上下文

OpenCode — 代码执行者

OpenCode 是一个 CLI 编程代理，专门负责写代码。Hermes 负责「想」，OpenCode 负责「做」。两者通过 ACP（Agent Communication Protocol）通信。

工作流程

整个优化过程分为几个阶段，下面逐一介绍。

第一步：诊断

先让 Hermes 用无头浏览器访问博客，跑 PageSpeed 测试，抓取所有问题：

指标优化前目标
性能得分7690+
无障碍8495+
CLS0.75<0.1
LCP未测量<2.5s

第二步：派发子代理

Hermes 识别出需要改动的文件后，直接派出 OpenCode 子代理来处理。一个典型的调用：

Hermes → delegate_task(
    goal: "修复 CLS 布局偏移：将关键CSS内联到header.php...",
    acp_command: "opencode"
)

OpenCode 收到任务后会：读取文件 → 分析代码 → 做出修改 → 验证语法 → 返回结果。

第三步：迭代验证

每完成一轮修改，Hermes 会：

  1. 用浏览器重新访问页面
  2. 检查 DOM 变化
  3. 对比改动前后的效果
  4. 如果有问题，立即让 OpenCode 修正

这个循环非常快——通常几分钟就能完成一轮「发现问题 → 修复 → 验证」。

具体改动

以下是 AI 完成的主要优化项目：

1. WebP 缩略图自动压缩

在 helpers.php 中实现了图片上传时自动生成 WebP 格式缩略图。列表页图片加载体积减少了 95% 以上。

2. 根治 CLS 布局偏移

这是最大的痛点。CLS 0.75 意味着页面加载时内容会大幅跳动。AI 做了以下改动：

  • 关键 CSS 内联：将布局相关的 flex/grid/尺寸样式从外部 CSS 移到 <style> 标签
  • 非关键 CSS 延迟加载：使用 media="print" + onload 策略，不阻塞渲染
  • 固定元素尺寸：为头像、缩略图设置固定宽高
  • 图片显式声明尺寸：<img> 标签加上 width/height 属性
  • 添加 noscript 回退：确保禁用 JS 时也能正常加载

3. 缩略图裁剪比例修正

CSS 里写了 aspect-ratio: 3/2，但 PHP 裁剪逻辑还是 1:1 正方形。AI 发现了这个不一致，修正了 helpers.php 中的裁剪函数。

4. CSS transition 优化

所有动画限制为 transform、opacity、box-shadow 等可合成属性，避免触发 layout 和 paint，减少卡顿。

5. 无障碍修复

涉及 9 个模板文件的 ARIA 属性修复：aria-label、aria-expanded、aria-current、tabindex 等。

6. 安全响应头

添加了 X-Content-Type-Options、X-Frame-Options、Referrer-Policy 等安全响应头。

7. 卡片标题截断

为 .card-title 添加 -webkit-line-clamp: 3，长标题最多显示 3 行，超出以省略号显示。

8. 主题改名 FCLite

将 Facile 主题完整复制并改名为 FCLite，更新了所有内部引用（@package、Cookie 名、后台显示名等），原版 Facile 保持不动。

9. Bug 修复

  • 移动端导航栏闪烁：删除了与 Bootstrap 冲突的自定义 navbar toggler JS
  • 点赞功能失效：补写了缺失的 AJAX 点赞请求逻辑
  • 分享二维码不生成：补写了 QRious 二维码初始化代码

优化结果

PageSpeed 优化后评分

经过一晚上的迭代，最终成绩：

指标优化前优化后变化
性能得分7685+9
无障碍8495+11
最佳实践9696—
SEO9292—
CLS0.750.30-60%
FCP—0.3s—
LCP—0.4s—
TBT—0ms—

性能分从 76 提升到 85，CLS 从 0.75 降到 0.30（仍需继续优化到 0.1 以下）。无障碍从 84 跳到 95。

GitHub 提交记录

所有改动都通过 Git 提交并推送到了 GitHub（lihaoxi001/Facile），共 14 个 commit，涉及 20+ 个文件。

对 AI 开发工作流的一些感受

好的地方

  1. 速度惊人：一晚上完成的工作量，手动做至少需要 2-3 天
  2. 不会遗漏细节：AI 会系统性地检查所有模板文件的无障碍问题，手动检查很容易漏
  3. 即时验证：每次改完代码后立即用浏览器测试，不用手动刷新
  4. 可追溯：每个改动都有 Git commit，日志清晰

需要注意的

  1. 需要明确的指令：AI 不会主动「猜」你想要什么，你需要说清楚目标和约束
  2. 上下文窗口有限：长对话后期可能「忘记」前面的内容，需要善用记忆功能
  3. 最终决策权在你：AI 会犯错，需要你把关关键决策（比如是否 force push）

推荐的工作模式

你的想法 → Hermes（分析+规划）→ OpenCode（执行+编码）→ 浏览器（验证）→ 你（确认）

这个流程对 Typecho、WordPress 等 PHP 项目的主题定制特别有效，因为改动集中在模板文件和 CSS，AI 对这类代码的理解和编辑非常可靠。

总结

AI 不会替代开发者，但它能让你从繁琐的模板修改和 CSS 调试中解放出来，专注于更重要的架构和创意决策。对于个人博客这类项目，Hermes + OpenCode 的组合已经足够成熟，值得尝试。

本文由作者和 AI 助手（Hermes Agent + OpenCode）协作完成。文中所有技术改动均经过实际验证，代码已开源在 GitHub。