用途：审计网页加载性能，聚焦 Core Web Vitals、网络优化与高层级无障碍缺口。适用于被要求审计、剖析、调试或优化页面加载性能、Lighthouse 分数或站点速度的场景。
前置条件：需先配置 chrome-devtools MCP 服务器，否则技能无法运行。配置示例："chrome-devtools": {"type": "local", "command": ["npx", "-y", "chrome-devtools-mcp@latest"]}。开始前应尝试调用 navigate_page 或 performance_start_trace 验证工具可用。
主要能力与用法：
- 性能追踪：navigate_page(url: "...") 加载页面，performance_start_trace(autoStop: true, reload: true) 录制冷加载指标。
- Core Web Vitals 分析：用 performance_analyze_insight(insightSetId: "...", insightName: "...") 提取指标，常见洞察名包括 LCPBreakdown、CLSCulprits、RenderBlocking、DocumentLatency、NetworkRequestsDepGraph。阈值参考：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"]) 列出请求，get_network_request(reqid: <id>) 查看详情，识别渲染阻塞资源、网络依赖链、缺失预加载、缓存问题、过大负载与未使用的 preconnect。
- 无障碍快照：take_snapshot(verbose: true)，检查 ARIA ID 缺失或重复、对比度不足（WCAG AA 普通文本 4.5:1、大文本 3:1）、焦点陷阱或缺失焦点指示、交互元素无可访问名称。
- 代码库分析（第三方站点可跳过）：识别框架与打包器（Webpack、Vite、Rollup、esbuild、Parcel、Next.js、Nuxt、SvelteKit、Astro），检查 tree-shaking、死代码、未使用 JS/CSS、polyfill、压缩与混淆、生产环境 source map。
工作原则：先验证再建议，量化影响，跳过 0ms 影响的问题，建议要具体（如“将 hero.png（450KB）压缩为 WebP”），对已优秀的站点直接说明。
输出格式：Core Web Vitals 汇总表、按优先级排列的问题清单（含影响等级）、具体可执行的修复建议、代码库发现。
限制：依赖 chrome-devtools MCP 服务器；洞察名称可能因 Chrome DevTools 版本而异，需从追踪响应中确认 insightSetId 与可用洞察；无代码库访问时跳过代码库分析阶段。