让 AI 帮我做前端性能分析报告

前端做性能优化，两个常见痛点：

1. 报表很数据化，非技术同学看不懂
2. 每次写性能报告都很花时间：看指标 → 找问题 → 翻译成大家听得懂的结论

于是试了一件事：

我负责把数据准备好，AI 帮我写一份「结构化的性能分析报告」，我只做最后校对。

1. 输入与输出长啥样？

1.1 输入数据

主要有两部分：

1. Lighthouse JSON 报告

   • 性能得分
   • LCP / CLS / TBT / TTI 等指标
   • 各种「机会」与「诊断」信息

2. 真实用户监控数据（RUM）（可选）

   • 最近一段时间的 LCP P75、FCP P75
   • 不同地区/设备的耗时对比

1.2 期望输出

希望 AI 给我的报告包含：

1. 一段 1～2 句话的性能整体概览
2. 用人话解释关键指标的含义和当前水平
3. 列出 3～5 个主要问题（按影响排序）
4. 每个问题配上具体可执行的优化建议
5. 告诉我「先做哪几件事最划算」

2. 先做精简：给 AI 的不是原始 JSON

原始 Lighthouse JSON 体积很大，直接给模型既浪费 Token，也容易让它迷路。
所以写了一个小脚本，把它整理成简版结构：

{
  "url": "https://example.com",
  "score": 0.72,
  "metrics": {
    "LCP": 3800,
    "CLS": 0.11,
    "FID": 25,
    "TTI": 4200
  },
  "opportunities": [
    {
      "title": "减少未使用的 JavaScript",
      "estimatedSavingsMs": 800
    },
    {
      "title": "消除阻塞渲染的资源",
      "estimatedSavingsMs": 600
    }
  ],
  "diagnostics": [
    "主线程工作过多",
    "部分图片未压缩"
  ],
  "rum": {
    "LCP_p75": 4200,
    "FCP_p75": 2100,
    "sampleCount": 120000
  }
}

这样输入既足够有信息量，又相对稳定。

3. Prompt：让 AI 像一个「性能顾问」而不是老师

系统提示类似：

你是一名资深前端性能工程师。
我会给你一个页面的性能数据（来自 Lighthouse + 真实用户监控），请输出一份性能分析报告。

要求：

1. 用 1～2 句话概括整体情况
2. 用通俗语言解释 LCP、CLS 等指标的含义和当前表现
3. 按影响程度列出 3～5 个主要问题
4. 为每个问题给出可执行的优化建议
5. 分清「可以马上做」和「长期建设」两类优化

回答尽量结合具体数字，不要给太空泛的建议。

然后把上面的精简 JSON 当作用户输入。

4. 效果示例：从报表变成「能说人话」的报告

一个简化版的生成结果大概是：

• 整体来说当前页面性能得分约 72 分，主要瓶颈在于首屏内容出现较慢（LCP 偏高）；
• CLS 略高于推荐值，说明存在一定程度的布局抖动；
• 真实用户数据表明，在真实环境下 LCP 还会再慢 400ms 左右。

主要问题与建议例如：

1. 未使用的 JS 较多（预计节省约 800ms）

   • 拆分出低频功能模块，改为按需加载
   • 清理历史遗留、已经不再使用的组件和工具

2. 存在阻塞渲染的同步资源（预计节省约 600ms）

   • 把首屏不需要的第三方脚本改为 async 或 defer
   • 把大体积 CSS 拆分成「首屏关键样式 + 延迟加载样式」

3. 主线程任务过重

   • 优化初始化逻辑，拆分大任务
   • 部分逻辑可以推迟到首屏渲染之后再执行

最后再给一个优先级建议列表，方便团队排计划。

5. 如何防止「一本正经地瞎说」？

大模型有个毛病：很会编。
要减少「假分析」，主要靠两点：

1. 输入只给真实数据，不给太多模糊描述
2. 输出由人类做快速审核
   • 看它是否把数据理解错了
   • 建议是否可行、有无明显风险

实测下来，只要输入数据靠谱，再加上一轮人工校对，整体质量是可控的。

6. 融入日常流程：从一次实验到固定动作

为了让这个工具不变成「玩一次就算」，我们做了两件事：

1. 接入 CI / 定时任务

   • 对关键页面定期跑 Lighthouse
   • 自动生成 AI 分析报告，推送到监控群/周报

2. 形成「性能周报」

   • 每周总结关键页面的分数变化
   • 附带 AI 报告里的重点问题与建议
   • 方便非前端同学也能快速理解性能状态

久而久之，性能就不再是「出问题才想起来」的事情，而是一个可视、可讨论的维度。

7. 小结

让 AI 帮忙做前端性能分析，本质上是在做：

1. 我们负责把数据采集、整理好
2. AI 帮我们把数据翻译成「人看得懂的报告」
3. 再由人做判断和决策

它替代的不是工程师的能力，而是那部分重复、机械、却又很耗时间的文字工作。

如果你也想试一试，可以从一条链路开始：

• 选一个重要页面
• 导出一次 Lighthouse JSON
• 手动走一遍「精简 → 丢给大模型 → 校对」
• 感觉合适，再考虑接到自动化流水线上。