用途：该技能面向应用性能优化，适用于页面加载慢（Lighthouse 分数低）、渲染慢导致交互延迟、打包体积大导致下载时间长、数据库查询慢等瓶颈场景。
主要能力与用法：
- 先测量：用 Lighthouse 命令行测量，如 npm install -g lighthouse 后运行 lighthouse https://example.com --view，也可在 CI 中输出 JSON 报告；React 项目可用 web-vitals 采集 CLS、FID、FCP、LCP、TTFB 并上报分析平台。
- React 优化：用 React.memo 避免不必要重渲染，用 useMemo/useCallback 缓存计算结果与回调，用 lazy 与 Suspense 做路由级和组件级代码分割与懒加载。
- 打包体积：用 webpack-bundle-analyzer 分析，按需引入（如 lodash/debounce 而非整个 lodash），使用动态 import 按需加载。
- 图片优化：使用 Next.js Image 组件（含 priority、placeholder、sizes），提供 WebP 格式并保留回退。
- 数据库优化：消除 N+1 查询（用 include/JOIN），用 EXPLAIN ANALYZE 定位慢查询并创建索引（含复合索引），用 Redis 做缓存。
输出为性能优化检查清单，分前端、后端、测量三部分，目标包括 Lighthouse 90+、LCP<2.5s、FID<100ms、CLS<0.1。
限制与规则：必须先测量再优化，禁止过早优化；一次只优化一处，保持可读性；持续监控并在 CI 中加入性能回归测试。版本 1.0.0，最后更新 2025-01-01，兼容 Claude、ChatGPT、Gemini。相关技能：database-schema-design、ui-components。标签：performance、optimization、React、caching、lazy-loading、web-vitals、code-quality。