用途：该技能用于按流程优化应用性能，包括提升页面加载速度、减少渲染延迟、缩小打包体积、解决数据库慢查询。
主要能力与步骤：第一步测量性能，使用 Lighthouse（npm install -g lighthouse，lighthouse https://example.com --view）和 web-vitals 获取 CLS、FID、FCP、LCP、TTFB 指标。第二步优化 React，使用 React.memo 避免不必要重渲染，useMemo、useCallback 缓存计算与回调，lazy 与 Suspense 实现路由级和组件级懒加载与代码分割。第三步优化打包体积，使用 webpack-bundle-analyzer，进行 tree shaking（如按需导入 lodash/debounce）和动态 import。第四步优化图片，使用 Next.js Image 组件（priority、placeholder、sizes 等）和 WebP 格式。第五步优化数据库，消除 N+1 查询改为 include/JOIN，用 EXPLAIN ANALYZE 定位慢查询并创建索引（含复合索引），以 Redis get/setex 做缓存。
输出为一套性能优化清单，前端涵盖重渲染、缓存、懒加载、图片、体积；后端涵盖 N+1、索引、缓存、gzip 压缩、CDN；测量目标为 Lighthouse 90+、LCP<2.5s、FID<100ms、CLS<0.1。
约束：必须先测量再优化，增量改进，持续监控；禁止在无瓶颈时过早优化，禁止为性能牺牲可读性；遵循 80/20 原则、以用户为中心、在 CI 中加入性能回归测试。
限制：资料未提供具体收费、价格、平台适用范围以外的信息，暂未提供其他实现细节。兼容平台为 Claude、ChatGPT、Gemini，当前版本 1.0.0，最后更新 2025-01-01。