webperf
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseWebPerf Snippets Toolkit
WebPerf 代码片段工具包
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.
这是一套包含47个JavaScript代码片段的集合，用于在Chrome DevTools中测量和调试Web性能。每个代码片段都可在浏览器控制台中运行，并输出结构化、带颜色编码的结果。
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 |
| 功能 | 代码片段数量 | 适用场景 |
|---|---|---|
| webperf-core-web-vitals | 7 | 基于自动化工作流和决策树的智能Core Web Vitals分析 |
| webperf-loading | 28 | 智能加载性能分析，包含TTFB排查（DNS/连接/服务器细分）、渲染阻塞检测、脚本性能深度分析（第一方/第三方归属）、字体优化和资源提示验证的自动化工作流 |
| webperf-interaction | 8 | 智能交互性能分析，包含INP调试、滚动卡顿排查和主线程阻塞分析的自动化工作流 |
| webperf-media | 3 | 智能媒体优化，包含图片、视频和SVG相关的自动化工作流 |
| webperf-resources | 1 | 智能网络质量分析，配合自适应加载策略 |
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 |
| 用户话术 | 对应使用的功能 |
|---|---|
| "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
工作流程
- 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:
- → navigate to target URL
mcp__chrome-devtools__navigate_page - → run the snippet
mcp__chrome-devtools__evaluate_script - → read results
mcp__chrome-devtools__get_console_message
- Interpret results using the thresholds defined in the skill
- Provide actionable recommendations based on findings
- 根据用户的问题识别相关功能（使用上方的快速参考表）
- 加载该功能对应的skill.md文件，查看可用的代码片段和阈值标准
- 借助Chrome DevTools MCP执行：
- → 跳转至目标URL
mcp__chrome-devtools__navigate_page - → 运行代码片段
mcp__chrome-devtools__evaluate_script - → 读取运行结果
mcp__chrome-devtools__get_console_message
- 使用功能中定义的阈值解读结果
- 基于分析发现提供可落地的优化建议