| name | webperf-resources |
| description | Intelligent network quality analysis with adaptive loading strategies. Detects connection type (2g/3g/4g), bandwidth, RTT, and save-data mode, then automatically triggers appropriate optimization workflows. Includes decision trees that recommend image compression for slow connections, critical CSS inlining for high RTT, and save-data optimizations (disable autoplay, reduce quality). Features connection-aware performance budgets (500KB for 2g, 1.5MB for 3g, 3MB for 4g+) and adaptive loading implementation guides. Cross-skill integration with Loading (TTFB impact), Media (responsive images), and Core Web Vitals (connection impact on LCP/INP). Use when the user asks about slow connections, mobile optimization, save-data support, or adaptive loading strategies. Compatible with Chrome DevTools MCP. |
| kind | subagent |
| model | gemini-2.5-flash |
| temperature | 0.2 |
| max_turns | 10 |
| tools | ["mcp_chrome-devtools/*","view_file"] |
| license | MIT |
| metadata | {"author":"Joan Leon | @nucliweb","version":"1.2.0","mcp-server":"chrome-devtools","category":"web-performance","repository":"https://github.com/nucliweb/webperf-snippets"} |
WebPerf: Resources & Network
JavaScript snippets for measuring web performance in Chrome DevTools. Execute with mcp__chrome-devtools__evaluate_script, capture output with mcp__chrome-devtools__get_console_message.
Scripts
scripts/Network-Bandwidth-Connection-Quality.js — Network Bandwidth & Connection Quality
Common Workflows
Network Quality Assessment
When the user asks about network performance, connection quality, or adaptive loading:
- Network-Bandwidth-Connection-Quality.js - Analyze network bandwidth, effective connection type, RTT, downlink, save-data mode
Adaptive Loading Strategy
When implementing adaptive loading or the user asks "how to optimize for slow connections":
- Network-Bandwidth-Connection-Quality.js - Detect connection quality
- Cross-reference with webperf-loading skill:
- TTFB.js (measure server response on slow connections)
- Find-render-blocking-resources.js (identify heavy resources to defer)
- Resource-Hints-Validation.js (optimize preconnect for slow networks)
- Cross-reference with webperf-media skill:
- Image-Element-Audit.js (implement responsive images based on connection)
- Video-Element-Audit.js (adjust video quality based on connection)
Save-Data Mode Detection
When the user asks about save-data or data-saving features:
- Network-Bandwidth-Connection-Quality.js - Check if save-data is enabled
- If save-data is enabled, recommend:
- Reducing image quality
- Disabling autoplay videos
- Deferring non-critical resources
- Using low-res thumbnails
Mobile/Slow Connection Optimization
When the user asks "optimize for mobile" or "slow connection users":
- Network-Bandwidth-Connection-Quality.js - Assess connection type
- Cross-reference with webperf-loading skill:
- TTFB.js (critical for slow connections)
- Find-render-blocking-resources.js (minimize blocking on slow networks)
- Critical-CSS-Detection.js (inline critical CSS to reduce RTT)
- Prefetch-Resource-Validation.js (avoid excessive prefetch on slow connections)
Decision Tree
Use this decision tree to automatically run follow-up snippets based on results:
