这个 Skill 能做什么，适合哪些场景？
这是 agent-skills 仓库中的独立性能优化技能，面向存在性能要求、性能回归或实际慢速问题的软件项目。它要求先建立基线并定位真实瓶颈，再实施修复、重新测量并添加防回归措施。内容覆盖 Core Web Vitals、前后端性能分析、N+1 查询、分页、图片优化、React 重渲染、代码分割和缓存。它适合需要可量化性能改进的工程团队，不适合在没有问题证据时进行预防性微优化。
指导代理使用 Lighthouse、Chrome DevTools Performance 面板、Chrome DevTools MCP、web-vitals、CrUX、APM、数据库查询日志和简单计时建立性能基线；根据页面加载、交互、导航或 API 症状定位瓶颈；检查网络瀑布、长任务、组件渲染、查询、索引、连接池、内存、CPU、缓存和外部依赖；提出或实现分页、查询合并、响应式图片、懒加载、代码分割、缓存等修复；使用 bundlesize 和 Lighthouse CI 检查预算，并按清单验证前后测量、Core Web Vitals、查询、构建、测试和监控结果。
- 前端团队发现 LCP、INP 或 CLS 未达到目标，需要用测量数据定位图片、资源、JavaScript 或布局问题时。
- 后端开发者发现 API 响应变慢，需要检查 N+1 查询、缺失索引、缓存、连接池或 CPU 问题时。
- 产品正在处理大型数据集或高流量功能，需要加入分页、性能预算和持续验证时。
- 团队怀疑最近的代码变更引入性能回归，需要建立前后基线并增加 CI 或监控防护时。
如何安装这个 Skill？
- 不要在没有基线、代表性流量和回滚方案的情况下应用缓存、拆包、预加载或数据库改动。
- 示例中的工具、框架、阈值和依赖需要结合项目版本、地区网络和真实用户数据重新验证。
- 技能引用了未随给定材料提供的 references/performance-checklist.md；使用前应确认该文件存在且内容与本技能一致。
- Shell / 命令行
- 网络访问
- 本地文件系统
- MCP Server
Node.jsweb-vitalsLighthouse CIbundlesizeChrome DevTools MCP
使用 skills CLI 安装该单项技能：
npx skills add addyosmani/agent-skills --skill performance-optimization
也可以先浏览仓库中的技能：
npx skills add addyosmani/agent-skills --list
README 还记录了 Claude Code、Cursor、Antigravity CLI、Gemini CLI、Windsurf、OpenCode、GitHub Copilot、Kiro 和 Codex 的集合安装方式；本技能的单项安装示例仅明确给出了上述 skills CLI 命令。
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/addyosmani/agent-skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/performance-optimization" ~/.claude/skills/
rm -rf "$tmp"根据源仓库地址和 Skill 路径自动生成，只复制这个 Skill 的文件夹。如果上文有作者提供的安装方式，请优先按作者说明操作；想只在当前项目中使用，把 ~/.claude/skills 换成项目里的 .claude/skills。
如何使用这个 Skill？
安装后，把下面任意一句发给 Agent 即可触发：
- 分析这个页面的 LCP 和 INP，先建立基线，定位瓶颈，实施修复并提供前后测量结果。
- 测量 → 定位 → 修复 → 验证 → 守护
在存在性能要求、用户报告慢速、Core Web Vitals 未达标、疑似回归，或需要处理大型数据集和高流量时触发。例如："分析这个页面的 LCP 和 INP，先建立基线，定位瓶颈，实施修复并提供前后测量结果。"技能要求遵循“测量 → 定位 → 修复 → 验证 → 守护”流程；没有问题证据时不应触发优化。
这个 Skill 有哪些优点和局限？
- 覆盖前端、后端、查询和数据库等多个性能场景。
- 提供明确的 Core Web Vitals 阈值、性能预算和验证清单。
- 包含 N+1 查询、分页、图片、React、代码分割和缓存等具体反模式与示例。
- 强调真实用户数据与合成测试结合，并要求提供前后测量结果。
- 没有提供完整的性能检查清单正文，需另行加载 references/performance-checklist.md。
- 示例依赖具体工具和生态，如 Lighthouse、web-vitals、React、数据库客户端、bundlesize 和 Lighthouse CI，未说明所有项目的适配方式。
- 源材料没有提供测试套件、基准数据或不同平台上的实测结果。
- 性能预算和示例阈值需要结合项目实际情况验证，不能视为所有应用的通用标准。
这个 Skill 与同类方案有什么区别？
与相关 Skills 并排比较；分数均按同一 FSRS 标准得出。
| Skill | FS 评分 | Star 数 | 最近更新 | License |
|---|---|---|---|---|
| 性能优化工程技能 本页 | 54 · 谨慎使用 | ★ 107k | 13 天前 | MIT |
| 网页性能审计 | 43 · 不推荐 | ★ 3.1k | 12 天前 | Apache-2.0 |
| React Native TV 应用审查指南 | 54 · 谨慎使用 | ★ 1.7k | 18 天前 | MIT |
| TileGym cuTile 内核性能优化 ✓ NVIDIA · 官方 | 44 · 不推荐 | ★ 3.6k | 12 天前 | Apache-2.0 |
| React Native 性能优化指南 | 60 · 推荐 | ★ 1.7k | 18 天前 | MIT |
README 明确将该仓库与 Superpowers 和 Matt Pocock's skills 作为比较对象，并指向 docs/comparison.md；但给定材料没有提供该比较文档的具体结论。
FollowSkills 如何评估这个 Skill？
技能明确要求先测量、再优化，并包含验证与回归防护，未见恶意行为、凭据窃取或破坏性默认操作；但未说明最小权限、用户确认、敏感性能数据处理、外部数据流、变更回滚或依赖安全，因此扣分。
工作流和分支诊断路径总体自洽，示例覆盖前端、后端、数据库与常见反模式；但依赖 Lighthouse、web-vitals、APM、npx 工具及项目框架，缺少安装前提、异常输入处理、失败反馈和技能专属测试。静态评估不超过10分，且证据不足以支持更高分。
触发条件、适用场景和“不应使用”的前置证据要求较清楚，覆盖页面、交互、API 和数据库性能问题；但输入格式、输出边界、非适用范围和环境要求仍不完整，未提供中文支持或中国大陆网络可达性说明，因此扣分。
文档结构清晰，包含概览、触发条件、渐进式工作流、示例、性能预算、反模式、红旗和验证清单；仓库提供 MIT 许可证、维护者信息和 CI 安装校验。但该技能没有版本、变更记录、专属依赖说明、故障排查或明确更新责任路径，且引用的参考文件未在给定材料中提供，因此扣分。
测量—定位—修复—复测—防回归流程以及 N+1、分页、图片、React 重渲染、拆包和缓存示例可直接指导常见性能任务；但效果依赖具体项目、工具和真实数据，未提供该技能的代表性实测结果或与替代方案的比较。静态评估最多7分，且输出仍需人工验证，因此扣分。
技能包含明确的测量指标、阈值和验证清单；仓库 CI 会校验技能内容、安装流程和评估脚本。但给定的测试样例与本技能无关，未见性能技能专属测试、实际运行结果或独立交叉证据。静态评估最多5分，因此扣分。
点击维度查看打分理由
证据充分度：低 — 主要依赖静态检查、作者材料或有限演示；适合发现线索，不适合做高风险决策。
查看完整评分方法 →