mcpField
P
performance-audit

performance-audit

github.com/serkan-ozal测试与质量752 次安装33 周前更新
代码仓库

关于 performance-audit

用于分析网页性能的 Skill，适合排查页面加载、网络请求及后端延迟问题。它结合 Web Vitals、请求时序和截图，并可在 TTFB 或 API 延迟指向后端时检查 Node.js 进程。

主要功能

  1. 01分析 Web Vitals 指标
  2. 02检查 HTTP 请求与时序
  3. 03按资源类型筛选请求
  4. 04截取页面加载画面
  5. 05检查 Node.js 后端进程

适用场景

  1. 01诊断页面加载缓慢
  2. 02查找大型或耗时网络请求
  3. 03分析 TTFB 与 API 延迟
  4. 04验证性能优化前后变化

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/serkan-ozal/browser-devtools-skills --skill performance-audit

安装后在 Claude Code 中输入/performance-audit确认已加载。

详细介绍

性能审计技能

使用 Web Vitals 和网络计时指标分析网页性能。

适用场景

此技能会在以下情况启用：

  • 用户询问页面性能或速度
  • 用户想要优化加载时间
  • 用户提到页面慢、API 慢或用户体验不佳
  • 用户需要 Core Web Vitals 指标
  • 用户询问后端瓶颈或 TTFB
  • 用户询问 SEO 性能因素

功能

Web Vitals 分析
browser-devtools-cli o11y get-web-vitals
browser-devtools-cli --json o11y get-web-vitals
browser-devtools-cli --json o11y get-web-vitals --wait-ms 3000
browser-devtools-cli --json o11y get-web-vitals --include-debug
网络性能
browser-devtools-cli --json o11y get-http-requests
browser-devtools-cli --json o11y get-http-requests --resource-type script
browser-devtools-cli --json o11y get-http-requests --resource-type stylesheet
browser-devtools-cli --json o11y get-http-requests --status '{"min":400}'
视觉分析
browser-devtools-cli content take-screenshot --name "above-fold"
browser-devtools-cli content take-screenshot --name "full-page" --full-page

性能阈值

指标良好需要改进较差
LCP≤2.5s2.5-4s>4s
INP≤200ms200-500ms>500ms
CLS≤0.10.1-0.25>0.25
TTFB≤800ms800-1800ms>1800ms
FCP≤1.8s1.8-3s>3s

审计工作流

SESSION="--session-id perf-audit"

# 1. Navigate to page
browser-devtools-cli $SESSION navigation go-to --url "https://example.com"

# 2. Wait for page to settle
browser-devtools-cli $SESSION sync wait-for-network-idle

# 3. Get Web Vitals
browser-devtools-cli $SESSION --json o11y get-web-vitals --wait-ms 2000

# 4. Analyze network requests
browser-devtools-cli $SESSION --json o11y get-http-requests

# 5. Check for console errors
browser-devtools-cli $SESSION --json o11y get-console-messages --type warning

# 6. Take screenshot for reference
browser-devtools-cli $SESSION content take-screenshot --name "performance-audit"

# 7. Cleanup
browser-devtools-cli session delete perf-audit

详细分析

检查大型资源
# Filter by type (one at a time: document, stylesheet, image, script, xhr, fetch, etc.)
browser-devtools-cli --json o11y get-http-requests --resource-type script
browser-devtools-cli --json o11y get-http-requests --resource-type stylesheet
browser-devtools-cli --json o11y get-http-requests --resource-type image
检查慢速请求
browser-devtools-cli --json o11y get-http-requests
# Look for requests with high timing values

后端性能（node-devtools-cli）

当 TTFB 或 API 延迟表明存在后端瓶颈时，检查 Node.js 进程：

# Connect to API/server process
node-devtools-cli --session-id perf debug connect --pid 12345

# Tracepoint on slow handler to capture call context
node-devtools-cli --session-id perf debug put-tracepoint \
  --url-pattern "routes/heavy.ts" \
  --line-number 30

常见问题

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

最佳实践

  1. 多次运行以获得稳定结果
  2. 等待网络空闲后再测量
  3. 使用 --wait-ms 等待 LCP/CLS 稳定
  4. 检查网络请求，找出缓慢或大型资源
  5. 在不同加载阶段截图
  6. 在不同网络条件下测试（必要时进行限速）
  7. 比较优化前后的结果以验证优化效果

评论

支持 Markdown