SuperAPI AI 工具集

web-perf

通用与其它

查看项目

更新于 10-15 22:32

技能介绍

用途:对网页做性能审计,借助 Chrome DevTools MCP 测量 Core Web Vitals(LCP、INP、CLS)及 FCP、TBT、Speed Index 等补充指标,识别性能瓶颈并给出可量化、具体的优化建议,同时可做网络请求与无障碍快照检查,并在有代码库时分析框架与打包配置。

主要能力:性能追踪与冷加载测量;Core Web Vitals 分析(如 LCPBreakdown、CLSCulprits、RenderBlocking、DocumentLatency、NetworkRequestsDepGraph);网络请求分析(渲染阻塞资源、网络链、缺失预加载、缓存、过大负载、未使用的 preconnect);无障碍快照(缺失或重复 ARIA ID、对比度、焦点、可访问名称);代码库分析(识别 Webpack、Vite、Rollup、esbuild、Parcel、Next.js、Nuxt、SvelteKit、Astro 等,检查 tree-shaking、死代码、未用 JS/CSS、polyfill、压缩与压缩源映射)。

使用方式:使用前先验证 MCP 工具可用,尝试调用 navigate_page 或 performance_start_trace;若不可用需在 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: [...]) 与 get_network_request(reqid: <id>) 查看请求;take_snapshot(verbose: true) 取无障碍快照;有代码库时再做代码库分析。常见阈值: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。

适用场景:需要审计线上或本地网页性能、排查 Core Web Vitals 问题、检查网络加载链、评估无障碍基本问题,以及在有代码库时定位构建与打包优化点。

限制:依赖 chrome-devtools MCP 服务器,未配置则无法使用;insight 名称可能随 Chrome DevTools 版本变化;无代码库访问权限时跳过代码库分析;资料未提供价格、收费、平台支持范围或具体效果保证;不要编造未列出的指标或步骤。