web-perf 是一个网页性能审计技能，依赖 Chrome DevTools MCP 进行测量与分析。使用前需先确认 MCP 工具可用：尝试调用 navigate_page 或 performance_start_trace，若不可用则说明 chrome-devtools MCP 服务器未配置，需要用户在 MCP 配置中加入： "chrome-devtools": { "type": "local", "command": ["npx", "-y", "chrome-devtools-mcp@latest"] }
主要能力与工作流分为五个阶段。阶段一：性能跟踪。先用 navigate_page(url: "<target-url>") 加载页面，再用 performance_start_trace(autoStop: true, reload: true) 录制冷加载指标。若 trace 为空或失败，先用 navigate_page 确认页面已正确加载。阶段二：Core Web Vitals 分析。通过 performance_analyze_insight(insightSetId: "...", insightName: "...") 提取指标，常见洞察名包括 LCPBreakdown（含 TTFB、资源加载、渲染延迟拆解）、CLSCulprits、RenderBlocking、DocumentLatency、NetworkRequestsDepGraph；不同 Chrome DevTools 版本的洞察名可能不同，可检查 trace 响应中的 insightSetId。参考阈值（良好/需改进/差）：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。阶段三：网络分析。用 list_network_requests(resourceTypes: ["Script", "Stylesheet", "Document", "Font", "Image"]) 检查渲染阻塞资源、网络请求链、缺失预加载、缓存问题、过大负载与未使用的 preconnect；需要请求详情时用 get_network_request(reqid: <id>)。阶段四：无障碍快照。用 take_snapshot(verbose: true) 标记缺失或重复的 ARIA ID、对比度不足、焦点陷阱、缺少可访问名称的交互元素。阶段五：代码库分析（无代码库权限的第三方站点可跳过）。检测框架与打包器（webpack.config.js、vite.config.ts、rollup.config.js、next.config.js、nuxt.config.ts、svelte.config.js、astro.config.mjs 等），检查 tree-shaking 与死代码、未使用的 JS/CSS、polyfills、压缩与最小化配置。
使用方法上，该技能强调以检索来源验证具体数字与建议（web.dev 的 vitals 文章、Chrome DevTools 性能文档、Lighthouse 评分文档），而非依赖预训练知识。它要求结论要有依据，验证后再推荐删除；量化影响，忽略 0ms 影响的改动；给出具体建议，如压缩 hero.png（450KB）为 WebP，而不是笼统的“优化图片”；并按优先级输出发现、问题与建议。
适用场景为具备 Chrome DevTools MCP 环境、需要审计自身站点或可访问代码库的开发者。限制在于该技能依赖 MCP 工具与网络访问，无法在未配置 MCP 时运行；对于无代码库权限的第三方站点，代码库分析阶段应跳过；资料中未提供具体收费、价格或平台支持信息，暂未提供。