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

wuwenzen@outlook.com (wuwj) — Wed, 01 May 2024 00:00:00 +0000

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

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

于是试了一件事：

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

1. 输入与输出长啥样？

1.1 输入数据

主要有两部分：

Lighthouse JSON 报告
- 性能得分
- LCP / CLS / TBT / TTI 等指标
- 各种「机会」与「诊断」信息
真实用户监控数据（RUM）（可选）
- 最近一段时间的 LCP P75、FCP P75
- 不同地区/设备的耗时对比

1.2 期望输出

希望 AI 给我的报告包含：

一段 1～2 句话的性能整体概览
用人话解释关键指标的含义和当前水平
列出 3～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
  }
}

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

Lighthouse on Saiga

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

1. 输入与输出长啥样？

1.1 输入数据

1.2 期望输出

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