web-performance-tuner

Web Performance Tuner 是一个专注于诊断、基准测试和修复 Web 性能问题的技能，强调以可量化的验证来确认每一次修改是否真正有效。

用途

该技能用于分析站点性能、检查 Core Web Vitals、查询 CrUX 数据、优化加载时间以及修复 Web 性能问题。

工作流

技能采用如下流程：

1. 分析（Analyze）：通过 CrUX 数据、Lighthouse、Chrome DevTools 或用户提供的具体信息来识别问题。
2. 环境准备（Setup）：确保本地开发环境存在（不明确时询问用户）。
3. 建立基准（Baseline）：在进行任何修改之前建立基准测试数据。
4. 修复（Fix）：每次只做一个细粒度的修改。
5. 验证（Validate）：重新构建、重新运行基准测试，并与基准数据对比。
6. 提交或回滚（Commit or Revert）：只有在带来可测量改进时才提交，否则丢弃并继续。
7. 重复（Repeat）：按照优先级依次处理问题，直到所有主要问题都得到处理。

数据来源

• CrUX API（真实用户字段数据，如果该站点可用）： curl "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=API_KEY"
  -d '{"url": "https://example.com"}'
• Lighthouse（本地或远程）： npx lighthouse http://localhost:3000 --output=json --output-path=./baseline.json
• Chrome DevTools Performance 面板：使用浏览器自动化捕获 trace 并分析运行时性能。Claude Code 可以控制 Chrome DevTools 进行自动分析（profiling）。

Core Web Vitals 目标

技能给出了三项核心指标的好、待改进、差三档阈值：

• LCP：好 ≤2.5s；待改进 ≤4.0s；差 >4.0s
• INP：好 ≤200ms；待改进 ≤500ms；差 >500ms
• CLS：好 ≤0.1；待改进 ≤0.25；差 >0.25

基准测试规则

• 运行 3 至 5 次以考虑波动影响，使用中位数。
• 在任何修改之前存储基准数据。
• 在提交信息中记录测试方法。

修复优先级

1. 阻塞渲染的资源
2. 过大或未优化的图片
3. 过多的 JavaScript
4. 布局偏移
5. 缓慢的服务器响应（TTFB）

重要规则

• 一次只做一个修改：隔离每个修复，以便准确测量。
• 没有改进就不提交：丢弃没有帮助的修改。
• 保持坚持：系统性地处理所有已识别的问题。

限制

该技能的具体适用平台、收费情况、价格、实际使用效果等未在资料中提供，暂未提供相关信息。