mcpField
W
webperf

webperf

github.com/nucliweb测试与质量1.5k261 次安装今天更新
代码仓库

关于 webperf

这是一套用于在 Chrome DevTools 中测量和调试网页性能的 JavaScript 片段工具包。它将 56 个片段分为 Core Web Vitals、加载、交互、媒体和网络质量等类别，并提供选择与解读指引。

主要功能

  1. 0156 个性能测量片段
  2. 02覆盖五类技能领域
  3. 03提供 Chrome DevTools 执行指引
  4. 04片段返回结构化结果
  5. 05提供 CLI 运行方式

适用场景

  1. 01根据性能问题选择检查项
  2. 02审计网页加载表现
  3. 03排查交互卡顿
  4. 04检查图像与网络性能

MCP 相关

工具包通过 Chrome DevTools MCP 的页面导航和脚本评估工具运行片段，并说明如何获取结果，包括跟踪型片段的结果。

安装

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

$npx skills add https://github.com/nucliweb/webperf-snippets --skill webperf

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

详细介绍

WebPerf Snippets 工具包

包含 56 个 JavaScript 代码片段，用于在 Chrome DevTools 中测量和调试 Web 性能。每个代码片段都会在页面中运行，并返回结构化的结果对象。

快速参考

技能代码片段触发短语
webperf-core-web-vitals7“调试 LCP”、“LCP 缓慢”、“CLS”、“布局偏移”、“INP”、“交互延迟”、“响应能力”
webperf-loading34“TTFB”、“服务器缓慢”、“FCP”、“渲染阻塞”、“字体加载”、“脚本加载”、“资源提示”、“服务工作线程”
webperf-interaction10“卡顿”、“滚动性能”、“长任务”、“动画帧”、“INP 调试”
webperf-media4“图像审计”、“延迟加载”、“图像优化”、“视频审计”
webperf-resources1“网络质量”、“带宽”、“连接类型”、“save-data”

工作流

  1. 根据用户的问题确定相关技能（参见上方的“快速参考”）
  2. 加载技能的 SKILL.md，查看可用的代码片段和阈值
  3. 使用 Chrome DevTools MCP 执行：
    • mcp__chrome-devtools__navigate_page → 导航至目标 URL
    • mcp__chrome-devtools__evaluate_script → 运行代码片段并读取返回的对象，该对象即为结果（脚本不会输出到控制台）
    • status: "tracking" → 在交互完成后，再次调用 mcp__chrome-devtools__evaluate_script，并传入 getDataFn 中命名的函数
    • 如果没有 Chrome DevTools MCP，请使用 CLI 运行代码片段：npx webperf-snippets <url> --snippet <Name> --json
  4. 使用技能中定义的阈值解读结果
  5. 根据发现的问题提供可执行的建议

评论

支持 Markdown