用途:该技能通过 Chrome DevTools MCP 工具审计网页性能,聚焦 Core Web Vitals、网络优化以及高层级无障碍缺口,适用于被要求审计、剖析、调试或优化页面加载性能、Lighthouse 分数或站点速度的场景。
前置条件:开始前需先调用 navigate_page 或 performance_start_trace 验证 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) 记录冷加载追踪。阶段二用 performance_analyze_insight 提取指标,常见洞察名包括 LCPBreakdown、CLSCulprits、RenderBlocking、DocumentLatency、NetworkRequestsDepGraph;洞察名可能随 Chrome DevTools 版本变化,可用追踪响应中的 insightSetId 查看可用项。阶段三用 list_network_requests(resourceTypes: ["Script", "Stylesheet", "Document", "Font", "Image"]) 列出请求,查找渲染阻塞资源、网络依赖链、缺失预加载、缓存问题、大体积负载和未使用的 preconnect,必要时用 get_network_request(reqid: <id>) 查看详情。阶段四用 take_snapshot(verbose: true) 取无障碍树快照,标记缺失或重复 ARIA ID、对比度不足、焦点陷阱或缺失焦点指示、无可访问名称的交互元素。阶段五在可访问代码库时分析框架与打包器、tree-shaking 与死代码、未使用 JS/CSS、polyfill、压缩与最小化等问题,第三方站点可跳过。
判定阈值:给出 TTFB、FCP、LCP、INP、TBT、CLS、Speed Index 的良好/需改进/较差区间。
原则与输出:先验证再建议、量化影响、跳过无影响项、具体到文件与体积、按优先级排序;输出包含 Core Web Vitals 汇总表、按影响排序的问题清单、具体可执行的建议与代码或配置片段、代码库发现。限制:依赖 chrome-devtools MCP 服务器;代码库分析需有代码访问权限;洞察名称可能因版本而异。