SuperAPI AI 工具集

performance-audit

测试与质量

查看项目

更新于 10-16 02:01

技能介绍

Performance Audit 是一个性能审计技能,用于分析网页与后端性能,主要依据 Web Vitals、网络计时指标以及 Node.js 进程指标。

用途 该技能在以下情况激活:用户询问页面性能或速度;用户希望优化加载时间;用户提到页面慢、API 慢或用户体验差;用户需要 Core Web Vitals 指标;用户询问后端瓶颈或 TTFB;用户询问 SEO 性能因素。

主要能力

  1. Web Vitals 分析:通过 browser-devtools-cli o11y get-web-vitals 获取指标,支持 --json、--wait-ms 3000、--include-debug 等参数。
  2. 网络性能:通过 browser-devtools-cli --json o11y get-http-requests 获取 HTTP 请求,可按资源类型(如 script、stylesheet)或状态码(如 --status '{"min":400}')过滤。
  3. 视觉分析:通过 browser-devtools-cli content take-screenshot 截图,支持 --name 命名和 --full-page 整页截图。

性能阈值参考 LCP:≤2.5s 为良好,2.5-4s 需改进,>4s 为差。 INP:≤200ms 为良好,200-500ms 需改进,>500ms 为差。 CLS:≤0.1 为良好,0.1-0.25 需改进,>0.25 为差。 TTFB:≤800ms 为良好,800-1800ms 需改进,>1800ms 为差。 FCP:≤1.8s 为良好,1.8-3s 需改进,>3s 为差。

使用方式(审计工作流) 设置会话变量 SESSION="--session-id perf-audit",然后依次执行:

  1. 导航到页面:browser-devtools-cli $SESSION navigation go-to --url "https://example.com"
  2. 等待页面稳定:browser-devtools-cli $SESSION sync wait-for-network-idle
  3. 获取 Web Vitals:browser-devtools-cli $SESSION --json o11y get-web-vitals --wait-ms 2000
  4. 分析网络请求:browser-devtools-cli $SESSION --json o11y get-http-requests
  5. 检查控制台错误:browser-devtools-cli $SESSION --json o11y get-console-messages --type warning
  6. 截图参考:browser-devtools-cli $SESSION content take-screenshot --name "performance-audit"
  7. 清理:browser-devtools-cli session delete perf-audit

详细分析 检查大资源:按类型过滤(一次一种:document、stylesheet、image、script、xhr、fetch 等),例如 browser-devtools-cli --json o11y get-http-requests --resource-type script,也可替换为 stylesheet 或 image。 检查慢请求:运行 browser-devtools-cli --json o11y get-http-requests,查找计时值较高的请求。 后端性能(node-devtools-cli):当 TTFB 或 API 延迟提示后端瓶颈时,检查 Node.js 进程。连接 API/服务器进程:node-devtools-cli --session-id perf debug connect --pid 12345。在慢处理程序上设置 tracepoint 捕获调用上下文:node-devtools-cli --session-id perf debug put-tracepoint --url-pattern "routes/heavy.ts" --line-number 30。

常见问题 未优化的大图片;阻塞渲染的 CSS/JS;过多 HTTP 请求;服务器响应慢(TTFB);动态内容导致的布局偏移;未压缩资源;缺少缓存头;阻塞主线程的第三方脚本。

最佳实践 多次运行以获得一致结果;测量前等待网络空闲;使用 --wait-ms 让 LCP/CLS 稳定;检查网络请求中的慢/大资源;在不同加载阶段截图;在不同网络条件下测试(必要时限速);对比优化前后以验证效果。

限制 资料未提供该技能的安装方式、收费模式、支持平台范围及具体版本要求,这些信息暂未提供。