名称： web-perf
描述： 使用 Chrome DevTools MCP 分析网页性能。测量核心 Web 指标（FCP、LCP、TBT、CLS、速度指数），识别渲染阻塞资源、网络依赖链、布局偏移、缓存问题和无障碍访问差距。当需要审计、分析、调试或优化页面加载性能、Lighthouse 分数或网站速度时使用。
使用 Chrome DevTools MCP 工具审计网页性能。此技能专注于核心 Web 指标、网络优化和高层次的无障碍访问差距。
开始前请先运行此步骤。 尝试调用 navigate_page 或 performance_start_trace。如果不可用，请停止——chrome-devtools MCP 服务器未配置。
请用户将以下内容添加到其 MCP 配置中：
"chrome-devtools": {
"type": "local",
"command": ["npx", "-y", "chrome-devtools-mcp@latest"]
}
| 任务 | 工具调用 |
|---|---|
| 加载页面 | navigate_page(url: \"...\") |
| 开始追踪 | 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) |
复制此清单以跟踪进度：
审计进度：
- [ ] 阶段 1：性能追踪（导航 + 记录）
- [ ] 阶段 2：核心 Web 指标分析（包含 CLS 元凶）
- [ ] 阶段 3：网络分析
- [ ] 阶段 4：无障碍快照
- [ ] 阶段 5：代码库分析（如果是第三方网站则跳过）
导航到目标 URL：
navigate_page(url: \"<目标-url>\")
启动性能追踪并重新加载以捕获冷加载指标：
performance_start_trace(autoStop: true, reload: true)
等待追踪完成，然后获取结果。
故障排除：
- 如果追踪返回为空或失败，请先用 navigate_page 验证页面是否正确加载。
- 如果洞察名称不匹配，请检查追踪响应以列出可用的洞察。
使用 performance_analyze_insight 提取关键指标。
注意： 洞察名称可能因 Chrome DevTools 版本而异。如果某个洞察名称无效，请检查追踪响应中的 insightSetId 以发现可用的洞察。
常见洞察名称：
| 指标 | 洞察名称 | 关注点 |
|---|---|---|
| LCP | LCPBreakdown |
最大内容绘制时间；TTFB、资源加载、渲染延迟的细分 |
| CLS | CLSCulprits |
导致布局偏移的元素（无尺寸的图片、注入的内容、字体交换） |
| 渲染阻塞 | RenderBlocking |
阻塞首次绘制的 CSS/JS |
| 文档延迟 | DocumentLatency |
服务器响应时间问题 |
| 网络依赖 | NetworkRequestsDepGraph |
延迟关键资源的请求链 |
示例：
performance_analyze_insight(insightSetId: \"<来自追踪的id>\", insightName: \"LCPBreakdown\")
关键阈值（良好/需改进/差）：
- 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
- 速度指数: < 3.4s / < 5.8s / > 5.8s
列出所有网络请求以识别优化机会：
list_network_requests(resourceTypes: [\"Script\", \"Stylesheet\", \"Document\", \"Font\", \"Image\"])
重点关注：
<head> 中没有 async/defer/media 属性的 JS/CSS。Cache-Control、ETag 或 Last-Modified 标头。获取详细请求信息：
get_network_request(reqid: <id>)
获取无障碍树快照：
take_snapshot(verbose: true)
标记高层次差距：
- 缺失或重复的 ARIA ID。
- 对比度差的元素（对照 WCAG AA 标准：普通文本 4.5:1，大文本 3:1）。
- 焦点陷阱或缺失焦点指示器。
- 交互元素缺少无障碍名称。
如果审计没有代码库访问权限的第三方网站，请跳过此阶段。
分析代码库以了解可以在何处进行改进。
搜索配置文件以识别技术栈：
| 工具 | 配置文件 |
|---|---|
| Webpack | webpack.config.js, webpack.*.js |
| Vite | vite.config.js, vite.config.ts |
| Rollup | rollup.config.js, rollup.config.mjs |
| esbuild | esbuild.config.js, 包含 esbuild 的构建脚本 |
| Parcel | .parcelrc, package.json (parcel 字段) |
| Next.js | next.config.js, next.config.mjs |
| Nuxt | nuxt.config.js, nuxt.config.ts |
| SvelteKit | svelte.config.js |
| Astro | astro.config.mjs |
同时检查 package.json 中的框架依赖项和构建脚本。
mode: 'production'、package.json 中的 sideEffects、usedExports 优化。treeshake 选项。index.js 重新导出）、整体导入的大型工具库（lodash、moment）。content 配置）。@babel/preset-env 目标和 useBuiltIns 设置。core-js 导入（通常过大）。browserslist 配置是否目标范围过广。terser、esbuild 或 swc 最小化。按以下格式呈现发现：