SOP v1.1 — Claude Code Agent
优化 PageSpeed
通过 AI Agent —
初级指南
运行 Claude Code agent 优化 WordPress 主题 Lighthouse 分数的标准流程。
包含审核关口(gate approve)、部署前的 lint 检查以及回滚机制 — 无需担心破坏线上网站。.
7 执行步骤
3 审核关口
lint FTP 前通过
🚀 Master Prompt — 直接发送给 Claude Code
1 条 prompt,agent 跑完完整流程:audit → lint → fix → gate → verify
LINT 关口: 在本地修改后,agent 必须对所有修改过的文件运行 lint/语法检查。
只有当所有 lint 检查完全通过时才允许 FTP 上传到线上。无一例外。.
分步流程
第 01 步 关闭缓存 — 审核前确认 MISS
禁用插件缓存: LiteSpeed / WP Rocket / SG Optimizer.
如果无法禁用:开启 开发模式 (Development Mode) + 清除所有缓存 + 清除 CDN。.
通过响应头确认:必须看到 X-Cache: MISS 广告管理器 cf-cache-status: MISS 后再运行 Lighthouse。.
💡 DevTools → Network 标签页 → 重新加载 → 查看文档请求的 header。如果看到 HIT,则重新清除。.
创建 FTP 用户 仅指向主题目录: /wp-content/themes/ten-theme
权限:主题内的读/写。不允许进入 /plugins, /uploads, wp-config.php.
将凭据保存到 密钥管理器 (secret manager). 。仅在 Gate 2 批准后才粘贴到 prompt 中。.
将主题克隆/下载到本地。Agent 根据批准的计划修改本地文件。.
为什么要先在本地修改? 为了在部署前捕获语法错误 — 避免因 PHP 致命错误、CSS 解析失败、JS 损坏导致 FTP 后线上页面立即白屏。.
修改完成后: 对所有修改过的文件运行 lint. 。只有在全部通过后才请求 Gate 2 + FTP。.
PHP
php -l 文件名.php
CSS
npx stylelint style.css
JS
npx eslint script.js
🚫 Lint 报错 → 修复 → 重新运行 → 通过 → 才能申请 Gate 2 批准和 FTP。.
运行 移动端 + 桌面端, ,导出 JSON 和 HTML 报告。.
如果测试环境有 HTTP 基本认证:在 Lighthouse CLI 中传递 --extra-headers 。.
将每个错误映射到 主题中导致问题的正确文件和行号 。.
📁 保存: lighthouse-before-mobile.report.jsonlighthouse-before-desktop.report.html
Agent 建议修复 仅限主题内, ,不改变界面或功能。.
不得 从外部域添加/删除 JS/CSS。仅优化主题中已有的资产。.
Agent 编写详细计划 → 停止 → 负责人/PM 批准 Gate 1 → 才开始修改。.
Agent 报告 lint 通过结果 + 补丁列表 → 负责人审核 → 批准 Gate 2。.
将远程文件备份到 /wp-content/themes/_backup/YYYY-MM-DD/ 然后再覆盖。.
上传 FTP → 验证线上 HTML 以确认部署正确。.
清除缓存,再次运行 Lighthouse 移动端 + 桌面端。.
将前后对比结果记录到 SEO_AUDIT_YYYY-MM-DD.md.
客户或 QA 批准 Gate 3。如果有性能退化 → 立即报告,不要自行回滚。.
3 个审核关口
Gate 1
批准计划
审核人:负责人 / PM
在 agent 开始修改本地代码之前
关卡 2
批准补丁列表
审核人:负责人 / PM
在 lint 通过之后 — 在通过 FTP 上线之前
关卡 3
批准结果
审查员:客户 / QA
部署之后 — 在重新测量 Lighthouse 之后
先修复什么?
1
LCP — 最大内容绘制
Hero 图片未预加载,字体阻塞渲染
紧急
2
TBT — 总阻塞时间
阻塞渲染的 JS/CSS — 这才是核心问题,而不是图片
3
CLS — 累积布局偏移
元素缺少宽度/高度,字体交换导致布局抖动
4
INP — 交互到下次绘制
长 JS 任务在用户点击/输入时减慢响应速度
注意事项: 不要让 Agent 忙于优化图片,而阻塞渲染的 JS 才是导致 TBT 高的主因。
务必阅读 Lighthouse 报告并按优先级顺序进行修复。.
分步示例提示词
提示词 1 — 审计 (Audit)
运行 针对以下 URL 的 Lighthouse 移动端和桌面端: [URL_LIVE] 导出 JSON 和 HTML 报告。
文件名: lighthouse-before-mobile.report.json, lighthouse-before-desktop.report.html 将每个错误映射到主题中的文件 /wp-content/themes/[TEN_THEME].。
按影响程度列出前 10 个问题。.
提示词 2 — 计划 (Plan - 关卡 1)
根据刚才审计的报告,编写修复计划:
– 仅在主题内修复,, 更改界面或功能
增加或删除来自外部域名的 JS/CSS
– 修复顺序:LCP → TBT → CLS → INP
– 列出将修改的每个文件、修改内容及原因
停止 — 标注“等待关卡 1 批准”并在修改任何文件前等待确认。.
提示词 3 — 本地修复 + Lint
关卡 1 已批准。在本地按计划修改文件。
修改完成后,, 运行 lint 针对所有已修改的文件:
– PHP: php -l [文件名.php] – CSS: npx stylelint [文件名.css] – JS: npx eslint [文件名.js]如果 lint 报错 → 全部修复 → 重新运行直至完全通过。
报告 lint 结果(每个文件的通过/失败情况)及待部署的补丁文件列表。. 停止 — 标注“等待关卡 2 批准”并在 FTP 之前等待确认。.
提示词 4 — FTP 部署 (关卡 2)
关卡 2 已批准。执行:备份远程文件至: /wp-content/themes/_backup/[YYYY-MM-DD]/ 2. 将通过 lint 的文件上传至 FTP: [FTP_HOST] 用户名: [FTP_USER] 3. 上传后验证线上 HTML报告已上传文件列表及回滚路径。.
提示词 5 — 验证 (Verify - 关卡 3)
清除缓存。重新为 URL 运行 Lighthouse(移动端 + 桌面端): [URL_LIVE] 记录结果至: SEO_AUDIT_[YYYY-MM-DD].md MD 文件包含:前后得分对比 · 已修复/未修复错误 · 已修改文件 · 回滚路径。
如果任何分数下降:立即报告,, 自动回滚。. 停止 — 标注“等待关卡 3 批准”。.
输出必须包含
lighthouse-before-.report.json/html
修复前的 Lighthouse 报告,包括移动端和桌面端
lighthouse-after-.report.json/html
部署后的 Lighthouse 报告,并与修复前对比
Lint 通过报告
php -l / stylelint / eslint 的结果 — 在 FTP 之前必须完全通过
SEO_AUDIT_YYYY-MM-DD.md
前后得分对比 · 已修复/未修复错误 · 已修改文件 · 回滚路径
_backup/YYYY-MM-DD/
覆盖前在主题目录内备份远程文件
出现退化时回滚
R1
确认退化
修复后 Lighthouse 得分低于修复前 → 存在退化。立即向负责人汇报,不要自行处理。.
R2
从备份恢复
按照 MD 中的列表,将 _backup/YYYY-MM-DD/ 中的文件重新上传至 FTP。.
R3
清除缓存 + 重新检查
清除缓存 + CDN,验证 X-Cache: MISS,快速运行 Lighthouse 以确认回滚成功。.
R4
Post-mortem
在 MD 中记录原因,更新计划,带着调整后的计划回到关卡 1。.

DPS.MEDIA