性能优化最常见的失败长得都一样:一周花在抠 5ms 的后端,前端却有 3 秒 render-blocking CSS 没人动;或者加了三层缓存却不写失效,最后上线的不是”更快”而是”数据 stale”。下面这套 Prompt 强制反过来——先测量、点名最影响用户的瓶颈、再用最小改动去推那一个指标。还包含一道前后对比题,把”装作没事”的回退抓出来;以及一个对最近 5 个性能 PR 的微优化检测题,专门挑”加了复杂度但没有度量收益”的那种。性能问题其实是正确性 bug 时,配合 Bug 审计 Prompt 一起用。
这套 Prompt 适合用在哪
- 前端性能审计
- 后端延迟优化
- 数据库查询调优
- bundle 体积减小
- Core Web Vitals
1. 瓶颈识别
下面是我的性能数据({Lighthouse / APM / 慢查询})。请定位 top 3 瓶颈。每条:发生在哪、对用户的影响估计、最小修复、修复的副作用。
{粘贴}
2. LCP 优化
我的 LCP 是 {X} 秒,目标 {Y}。下面是 HTML / critical CSS / 图片加载。请诊断:(a) LCP 元素是什么;(b) 谁阻塞它渲染;(c) 到达 {Y} 的最小改动集。
{粘贴}
3. CLS 修复
我的 CLS = {X},目标 <0.1。下面是首屏 HTML 与 CSS。找出抖动元素、原因(图片无尺寸 / 字体替换 / 后注入内容),并提议修复。
{粘贴}
4. 慢查询识别
下面是慢查询日志 + EXPLAIN。逐条 top 5:(a) 为什么慢;(b) 缺什么索引或重写查询;(c) 预期提升;(d) 修复风险。
{粘贴}
5. N+1 查询识别
下面是单次请求的 ORM 查询日志。请找 N+1:哪个循环触发多少子查询、应 eager-load 什么、可批量化什么。给 ORM 语法的修复。
{粘贴}
6. JS bundle 减重
下面是 webpack / vite 包分析。列 top 5 体积大户:(a) 是否 tree-shakable;(b) 是否有更轻替代;(c) 是否可懒加载;(d) 预估省的 kB。
{粘贴}
7. 阻塞资源修复
我的页面有 {N} 个阻塞资源。下面是 HTML head。请提议:(a) 哪个内联;(b) 哪个 defer / async;(c) 哪个 preload;(d) 哪个删除。说明顺序原因。
{粘贴}
8. 服务端响应时间优化
我的 TTFB = {X}ms,目标 <{Y}ms。下面是后端 handler。请走一遍:(a) 首字节前做了什么;(b) 哪些可并行 / 移出关键路径;(c) 缓存什么。
{粘贴}
9. 内存泄漏定位
我的 {Node / 浏览器} 应用内存持续增长。下面是 heap 快照 / profiler。请识别泄漏:(a) 什么被持有;(b) 为什么持有;(c) 应修的闭包 / 监听器 / 缓存。
{粘贴}
10. 缓存策略设计
我的 {端点 / 页面} 有 {N} req/s。下面是响应形状 + 可缓存约束。请设计缓存策略:edge / CDN / 应用 / DB 各层;失效触发;命中率目标。
{粘贴}
11. 图片优化审计
下面是页面上 10 张图的当前尺寸 / 格式 / 显示宽度。每张给:(a) 目标格式(AVIF / WebP);(b) 目标宽度与 srcset;(c) 加载策略;(d) 预估省的字节。
{粘贴}
12. Web Vitals 前后对比
下面是改动前 Web Vitals 与改动后。请告诉我:(a) 真正变好的是什么;(b) 反而变差的;(c) 是噪声还是信号;(d) 上线 vs 回滚。
13. 微优化检测
下面是我最近的性能 PR({粘贴 5 个})。逐个问:(a) 有没有改前 / 改后度量;(b) 瓶颈真存在吗;(c) 用户可见的实际收益;(d) 哪些应被回滚为"加复杂度没收益"。
容易踩的坑
- 不测量就优化——猜瓶颈最浪费 sprint
- 抠 5ms 后端,3 秒 render-blocking 前端没人动
- 加缓存不写失效,最后上线的是”数据 stale” bug,不是性能修复
- 首屏图片被懒加载,LCP 反而变差
- 为 0.1% 提升把可读性写烂,之后没人回滚
- 没改前 / 改后度量,“性能工作”就只能停留在故事层面,没法证明