用途
web-perf 是一个网站性能审计技能，目标是对网站的加载与交互性能、Core Web Vitals 指标以及 Lighthouse 性能评分进行审计、诊断和优化。它适用于想要系统排查页面性能问题、定位 Core Web Vitals 不达标原因，或评估现有前端构建与资源加载策略的场景。
主要能力
该技能围绕浏览器与性能工具展开，首先会检测可用的浏览器和性能工具，确认可用能力后再执行审计。其核心分析对象包括：
- 性能 trace：导航到目标 URL 并录制冷加载性能 trace。
- Core Web Vitals：分析 LCP（最大内容绘制）、CLS（累计布局偏移）、渲染阻塞、文档延迟、网络依赖等，并识别导致布局偏移的具体元素。
- 网络分析：列出网络请求，识别渲染阻塞资源、请求链、缺失的 preload、缓存问题、过大的负载，以及未被使用的 preconnect。
- 无障碍快照：获取无障碍树快照，标记诸如缺失或重复 ARIA ID、对比度问题、焦点陷阱、缺少可访问名称的交互元素等高层级缺口。
- 代码库分析：在可访问代码库时，识别框架与打包工具（Webpack、Vite、Rollup、esbuild、Parcel、Next.js、Nuxt、SvelteKit、Astro 等），检查 tree-shaking 与死代码、未使用的 JS/CSS、polyfill、压缩与最小化配置等。
关注的关键指标阈值（良好/需改进/较差）：TTFB < 800ms / < 1.8s / > 1.8s；FCP < 1.8s / < 3s / > 3s；LCP < 2.5s / < 4s / > 4s；INP < 200ms / < 500ms / > 500ms；TBT < 200ms / < 600ms / > 600ms；CLS < 0.1 / < 0.25 / > 0.25；Speed Index < 3.4s / < 5.8s / > 5.8s。
使用方式
技能以工具调用为主线，常见操作包括：
- 加载页面：navigate_page(url: "...")
- 开始 trace：performance_start_trace(autoStop: true, reload: true)
- 分析洞察：performance_analyze_insight(insightSetId: "...", insightName: "...")
- 列出请求：list_network_requests(resourceTypes: ["Script", "Stylesheet", ...])
- 查看请求详情：get_network_request(reqid: <id>)
- 无障碍快照：take_snapshot(verbose: true)
工作流分为五个阶段：阶段一录制性能 trace；阶段二分析 Core Web Vitals（含 CLS 元凶）；阶段三网络分析；阶段四无障碍快照；阶段五代码库分析（若审计第三方网站且无代码库访问权限则跳过）。
若用户需要 Chrome DevTools MCP 设置，技能指引查阅其安装指南并使用最新包版本；仅在设置属于用户授权范围内时更改 MCP 配置，否则先询问。对于使用 command 和 args 的客户端，示例服务器条目为：
"chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@latest"] }
技能还提供了快速参考表，将任务映射到对应的工具调用，以及常见洞察名称（如 LCPBreakdown、CLSCulprits、RenderBlocking、DocumentLatency、NetworkRequestsDepGraph）。注意洞察名称可能因 Chrome DevTools 版本而异，若不匹配可从 trace 响应的 insightSetId 中查看可用洞察。
关键准则
- 以实证为准：通过检查网络请求、DOM 或代码库验证结论，再明确陈述发现。
- 建议前先验证：确认某项资源确实未被使用后再建议移除。
- 量化影响：使用洞察给出的预估节省；不要优先处理 0ms 影响的变更。
- 跳过非问题：若渲染阻塞资源预估影响为 0ms，仅记录而不建议行动。
- 具体明确：例如说“压缩 hero.png（450KB）为 WebP”，而不是“优化图片”。
- 果断排序优先级：若站点 LCP 为 200ms 且 CLS 为 0，已经很好，应直接说明。
适用场景
- 排查网站加载慢、交互卡顿等性能问题。
- 诊断 Core Web Vitals 指标不达标的具体原因（如 LCP 各阶段耗时、CLS 元素）。
- 审计网络请求与资源加载策略，寻找渲染阻塞、请求链、缓存与负载问题。
- 结合代码库检查前端构建配置与打包优化空间。
限制
资料未提供该技能的具体收费、价格、支持平台或效果承诺。部分能力依赖可用的浏览器与性能工具；若 trace 工具不可用，只能继续可用的数据源或网络分析，并说明无法采集的测量项。代码库分析阶段仅在拥有代码库访问权限时适用。具体洞察名称可能随 Chrome DevTools 版本变化。