SuperAPI AI 工具集

web-perf

智能体与模型

查看项目

更新于 10-15 19:54

技能介绍

用途:对网页进行性能审计,测量 Core Web Vitals(LCP、INP、CLS)及 FCP、TBT、Speed Index 等补充指标,识别性能瓶颈并给出优化建议。

主要能力:通过 Chrome DevTools MCP 采集性能 trace,分析 LCP 分解、CLS 成因、渲染阻塞、文档延迟、网络依赖图等;列出网络请求并检查渲染阻塞资源、请求链、缺失预加载、缓存头、大体积负载与未使用的 preconnect;生成无障碍快照,标记 ARIA、对比度、焦点等问题;在有代码库时分析框架与打包器、tree-shaking、未使用 JS/CSS、polyfill、压缩与 source map。

使用方式:需先配置 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) 记录冷加载;performance_analyze_insight(insightSetId: "...", insightName: "...") 提取指标;list_network_requests(resourceTypes: ["Script", "Stylesheet", ...]) 与 get_network_request(reqid: <id>) 分析请求;take_snapshot(verbose: true) 获取无障碍树。

适用场景:审计自有或第三方网站性能,定位 LCP、CLS、渲染阻塞与网络链问题,结合代码库给出构建与打包优化建议。

限制:依赖 chrome-devtools MCP 服务器,未配置则无法运行;insight 名称可能随 Chrome DevTools 版本变化,需从 trace 响应确认;代码库分析仅适用于有源码访问权限的站点;具体阈值与建议应参考 web.dev、Chrome DevTools 文档与 Lighthouse 评分文档,避免依赖过时知识。