performance-optimization
优化前端、后端、查询和数据库的应用性能。在存在性能要求、怀疑性能回退、需要改进 Core Web Vitals 或加载时间、需要修复 N+1 查询模式，或性能剖析发现瓶颈时使用。
技能说明addyosmani/agent-skills
优化前端、后端、查询和数据库的应用性能。在存在性能要求、怀疑性能回退、需要改进 Core Web Vitals 或加载时间、需要修复 N+1 查询模式，或性能剖析发现瓶颈时使用。
技能简介
本技能用于优化前端、后端、查询及数据库的整体应用性能。它遵循「先测量、后优化」的原则，帮助定位真实瓶颈并精准修复，避免缺乏数据支撑的过早优化。
使用场景
- 需求中明确包含性能要求（如加载时间预算、响应时间 SLA）
- 用户或监控系统报告页面/接口响应缓慢
- Core Web Vitals 指标（LCP、INP、CLS）低于目标阈值
- 怀疑代码变更引入了性能回退
- 需要处理大数据集、高流量场景，或修复 N+1 查询模式
使用方法
本技能作为 Claude Code 的 Skill 使用，在遇到上述场景时按以下工作流逐步执行：
1. MEASURE → 用真实数据建立基线
2. IDENTIFY → 找到实际瓶颈（而非主观猜测）
3. FIX → 针对特定瓶颈进行修复
4. VERIFY → 再次测量，确认效果或回退
5. GUARD → 增加监控或测试，防止性能回退
测量方式： 综合使用 Synthetic 与 RUM 两类手段。
- Synthetic（Lighthouse、DevTools Performance 面板）：条件可控、结果可复现，适合 CI 回归检测和问题隔离。
- RUM（web-vitals 库、CrUX）：采集真实用户数据，用于验证修复是否真正改善了用户体验。
性能目标参考（Core Web Vitals）：
| 指标 | 良好 | 需改进 | 较差 |
|---|---|---|---|
| LCP（最大内容绘制） | ≤ 2.5s | ≤ 4.0s | > 4.0s |
| INP（下次绘制交互） | ≤ 200ms | ≤ 500ms | > 500ms |
| CLS（累计布局偏移） | ≤ 0.1 | ≤ 0.25 | > 0.25 |
常见反模式修复：
- N+1 查询：使用
include/join合并为单次查询 - 无界数据获取：改用分页查询（
take/skip） - 图片未优化：为图片添加尺寸属性，使用合适格式与响应式加载
注意事项
没有证据表明存在性能问题时，不要进行优化。过早优化会增加代码复杂度，其维护成本往往超过性能收益。所有优化都应以测量数据为依据，修复后务必再次测量验证。