把PageSpeed报告交给AI：自动生成LCP、CLS优化建议与可执行代码的完整流程

为什么人工读性能报告效率低

PageSpeed Insights 给出的报告动辄几十项审计，LCP 元素定位、CLS 偏移来源、机会项优先级混在一起。站长自己逐条读，通常要花 40 分钟以上，还容易漏掉关键项。更麻烦的是，报告只告诉你“哪个资源拖慢了 LCP”，不告诉你“这段代码在主题的哪个文件里、怎么改”。

把报告结构化后交给 AI，让它输出问题定位、改动位置、可直接粘贴的代码片段，能把处理时间压缩到 10 分钟以内。下面是一套可复用的流程。

第一步：导出可被AI读懂的性能数据

不要直接截图报告，AI 读图容易漏数据。用两种方式拿结构化结果：

• PageSpeed Insights 网页版点击“查看报告”，用浏览器插件导出 JSON，或直接调用 API：https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=你的网址&strategy=mobile。
• Lighthouse 本地跑：npx lighthouse https://你的网址 --output=json --output-path=./report.json --preset=desktop。

拿到 JSON 后，先做一次瘦身，只保留 AI 需要的字段，避免超出上下文长度：

{
  "lcp": { "element": "...", "time": 4.2, "url": "..." },
  "cls": { "score": 0.18, "shifts": ["..."] },
  "opportunities": ["render-blocking-resources", "unused-css-rules"],
  "diagnostics": ["uses-responsive-images", "font-display"]
}

如果用的是 WordPress，可以装“Lighthouse Report”类插件直接导出精简 JSON；手写脚本的话，用 Node 读取 report.json，取 audits 下 lcp、cls、opportunities 三个节点即可。

第二步：给AI一段带约束的提示词

直接把 JSON 丢给 AI 效果很差，它会泛泛而谈。提示词要固定三个约束：输出格式、代码语言、改动边界。

提示词模板：你是前端性能工程师。根据下面的 Lighthouse JSON，输出三项：1）LCP 慢的根因，精确到元素选择器；2）CLS 偏移来源，列出每个 shift 的触发节点；3）按优先级排序的优化项，每项给出可粘贴的 HTML/CSS/JS 改动，并注明改在哪个文件（主题的 header.php、style.css 或 functions.php）。不要建议更换框架或重写页面。

关键点在最后一句“不要建议更换框架”。不加这条，AI 很容易给出“迁移到 Next.js”这种无法落地的建议。另外要求它注明文件路径，否则代码片段无法直接用。

第三步：让AI输出可执行改动，而不是泛泛建议

以常见的 LCP 问题为例，AI 应输出类似下面的结构，而不是“优化图片”四个字：

1. 定位：LCP 元素是 img.hero-banner，当前 4.2s，图片 1.8MB、未压缩、未预加载。
2. 改动一：在 header.php 的 <head> 内加 <link rel="preload" as="image" href="https://www.loongpalace.com.cn/wp-content/uploads/hero.webp">。
3. 改动二：图片标签补 fetchpriority="high"，并改为 WebP，目标 200KB 以内。
4. 改动三：首屏轮播图去掉 loading="lazy"，首张图改为 loading="eager"。

CLS 部分同理，要求 AI 列出每个偏移节点的选择器和建议的 min-height 或 aspect-ratio 值。比如广告位用 .ad-slot{min-height:250px} 预留空间，字体用 font-display: swap 减少布局抖动。

第四步：上线前做一次人工校验

AI 给的代码不能直接全量粘贴，至少核对三件事：

改完用 Lighthouse 复测，重点看 LCP 是否从 4.2s 降到 2.5s 以内、CLS 是否低于 0.1。达不到就回到第二步，把新报告再喂给 AI，让它基于差异继续修。

可复用的日常管理节奏

把这套流程固化成周任务：每周一导出移动端报告，AI 解读，输出改动清单；周三在 staging 验证；周五上线并复测。三个月下来，LCP 和 CLS 的波动能控制在 10% 以内。

需要提醒的是，AI 擅长把“报告语言”翻译成“代码语言”，但它不了解你站点的业务逻辑和插件冲突。它给的是候选改动，最终判断仍要由站长完成。把 AI 当性能顾问用，而不是当自动部署工具用，这套流程才稳定。