网页性能审计

技能简介

基于Chrome DevTools MCP的网页性能审计工具，测量核心网页指标（FCP、LCP、TBT、CLS、Speed Index），识别渲染阻塞资源、网络依赖链、布局偏移、缓存问题及可访问性缺陷。

能做什么

• 采集并分析Core Web Vitals各项指标数据
• 定位导致布局偏移的具体DOM元素
• 梳理网络请求依赖链，发现关键资源加载瓶颈
• 检测未压缩、未缓存或体积过大的静态资源
• 扫描高优先级的可访问性问题

使用说明

前置检查：运行前需验证MCP工具可用性，尝试调用navigate_page或performance_start_trace。若不可用，请停止操作并配置chrome-devtools服务。

安装指令：将以下配置添加到MCP配置文件：

"chrome-devtools": {
  "type": "local",
  "command": ["npx", "-y", "chrome-devtools-mcp@latest"]
}

执行流程：

1. 调用navigate_page(url: "目标地址")加载页面
2. 执行performance_start_trace(autoStop: true, reload: true)开始性能追踪
3. 使用performance_analyze_insight分析具体指标（如LCPBreakdown、CLSCulprits等）
4. 调用list_network_requests获取网络请求详情
5. 必要时执行take_snapshot(verbose: true)获取可访问性快照

输入与输出

见下方输入与输出表格。

风险提示

• Insight名称因Chrome DevTools版本不同可能存在差异，需从trace响应中确认可用项
• 第三方站点无法执行代码库层面的深度分析
• 性能追踪依赖页面正确加载，失败时需先验证导航步骤
• 建议移除预连接前务必核实该域名是否确实无请求产生

来源信息

原始链接：https://github.com/openclaw/skills/tree/main/skills/elithrar/web-perf/SKILL.md
来源类型：GitHub仓库