WebPerf Snippets Toolkit
A collection of 47 JavaScript snippets for measuring and debugging web performance in Chrome DevTools. Each snippet runs in the browser console and outputs structured, color-coded results.
Skills by Category
| Skill | Snippets | Use when |
|---|
| webperf-core-web-vitals | 7 | Intelligent Core Web Vitals analysis with automated workflows and decision trees |
| webperf-loading |
28 | Intelligent loading performance analysis with automated workflows for TTFB investigation (DNS/connection/server breakdown), render-blocking detection, script performance deep dive (first vs third-party attribution), font optimization, and resource hints validation |
| webperf-interaction | 8 | Intelligent interaction performance analysis with automated workflows for INP debugging, scroll jank investigation, and main thread blocking |
| webperf-media | 3 | Intelligent media optimization with automated workflows for images, videos, and SVGs |
| webperf-resources | 1 | Intelligent network quality analysis with adaptive loading strategies |
Quick Reference
| User says | Skill to use |
|---|
| "debug LCP", "slow LCP", "largest contentful paint" | webperf-core-web-vitals |
| "check CLS", "layout shifts", "visual stability" |
webperf-core-web-vitals |
| "INP", "interaction latency", "responsiveness" | webperf-core-web-vitals |
| "TTFB", "slow server", "time to first byte" | webperf-loading |
| "FCP", "first contentful paint", "render blocking" | webperf-loading |
| "font loading", "script loading", "resource hints", "service worker" | webperf-loading |
| "jank", "scroll performance", "long tasks", "animation frames", "INP debug" | webperf-interaction |
| "image audit", "lazy loading", "image optimization", "video audit" | webperf-media |
| "network quality", "bandwidth", "connection type", "save-data" | webperf-resources |
Workflow
- 1. Identify the relevant skill based on the user's question (use Quick Reference above)
- Load the skill's skill.md to see available snippets and thresholds
- Execute with Chrome DevTools MCP:
-
mcp__chrome-devtools__navigate_page → navigate to target URL
-
mcp__chrome-devtools__evaluate_script → run the snippet
-
mcp__chrome-devtools__get_console_message → read results
- 4. Interpret results using the thresholds defined in the skill
- Provide actionable recommendations based on findings
WebPerf 代码片段工具包
包含47个JavaScript代码片段的集合，用于在Chrome DevTools中测量和调试网页性能。每个代码片段在浏览器控制台中运行，并输出结构化的彩色编码结果。
按类别划分的技能
| 技能 | 代码片段数 | 使用场景 |
|---|
| webperf-核心网页指标 | 7 | 智能核心网页指标分析，包含自动化工作流和决策树 |
| webperf-加载性能 |
28 | 智能加载性能分析，包含TTFB调查自动化工作流（DNS/连接/服务器分解）、渲染阻塞检测、脚本性能深度分析（第一方与第三方归因）、字体优化和资源提示验证 |
| webperf-交互性能 | 8 | 智能交互性能分析，包含INP调试、滚动卡顿调查和主线程阻塞的自动化工作流 |
| webperf-媒体优化 | 3 | 智能媒体优化，包含图片、视频和SVG的自动化工作流 |
| webperf-资源优化 | 1 | 智能网络质量分析，包含自适应加载策略 |
快速参考
| 用户提问 | 应使用的技能 |
|---|
| 调试LCP、LCP缓慢、最大内容绘制 | webperf-核心网页指标 |
| 检查CLS、布局偏移、视觉稳定性 |
webperf-核心网页指标 |
| INP、交互延迟、响应性 | webperf-核心网页指标 |
| TTFB、服务器响应慢、首字节时间 | webperf-加载性能 |
| FCP、首次内容绘制、渲染阻塞 | webperf-加载性能 |
| 字体加载、脚本加载、资源提示、Service Worker | webperf-加载性能 |
| 卡顿、滚动性能、长任务、动画帧、INP调试 | webperf-交互性能 |
| 图片审计、懒加载、图片优化、视频审计 | webperf-媒体优化 |
| 网络质量、带宽、连接类型、节省数据 | webperf-资源优化 |
工作流程
- 1. 根据用户问题确定相关技能（参考上方快速参考表）
- 加载该技能的skill.md文件，查看可用代码片段和阈值
- 使用Chrome DevTools MCP执行：
- mcp
chrome-devtoolsnavigate_page → 导航到目标URL
- mcp
chrome-devtoolsevaluate_script → 运行代码片段
- mcp
chrome-devtoolsget
consolemessage → 读取结果
- 4. 使用技能中定义的阈值解释结果
- 根据发现提供可操作的建议
