webperf-resources

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:

1. 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":

1. Network-Bandwidth-Connection-Quality.js - Detect connection quality
2. 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)
3. 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:

1. Network-Bandwidth-Connection-Quality.js - Check if save-data is enabled
2. 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":

1. Network-Bandwidth-Connection-Quality.js - Assess connection type
2. 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: