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:
After Network-Bandwidth-Connection-Quality.js
- If effectiveType is "slow-2g" or "2g" → Very slow connection, recommend:
1. Run webperf-loading:Critical-CSS-Detection.js (inline critical CSS) 2. Run webperf-media:Image-Element-Audit.js (implement aggressive lazy loading) 3. Run webperf-loading:Prefetch-Resource-Validation.js (remove prefetch to save bandwidth) 4. Run webperf-core-web-vitals:LCP.js (LCP is heavily impacted by slow connections) 5. Recommend minimal resource strategy
- If effectiveType is "3g" → Moderate connection, recommend:
1. Run webperf-loading:Find-render-blocking-resources.js (minimize blocking) 2. Run webperf-media:Image-Element-Audit.js (responsive images) 3. Run webperf-loading:Resource-Hints-Validation.js (optimize preconnect) 4. Run webperf-core-web-vitals:INP.js (high latency can impact interaction responsiveness) 5. Implement adaptive image quality
- If effectiveType is "4g" or better → Good connection, recommend:
1. Standard optimization practices 2. Consider strategic prefetch for navigation 3. Higher quality media is acceptable
- If save-data is enabled → User explicitly wants to save data, recommend:
1. Reduce image quality aggressively 2. Disable autoplay videos 3. Defer non-critical resources 4. Remove prefetch/preload hints 5. Show "high quality" toggle option
- If RTT > 300ms → High latency, recommend:
1. Run webperf-loading:TTFB.js (latency impacts TTFB) 2. Run webperf-loading:TTFB-Sub-Parts.js (break down latency components) 3. Run webperf-loading:Resource-Hints-Validation.js (preconnect critical for high RTT) 4. Run webperf-loading:Service-Worker-Analysis.js (caching is critical for high latency) 5. Minimize number of origins 6. Use HTTP/2 or HTTP/3 for multiplexing
- If downlink < 1 Mbps → Very limited bandwidth, recommend:
1. Run webperf-media:Image-Element-Audit.js (aggressive compression) 2. Run webperf-media:Video-Element-Audit.js (disable autoplay) 3. Run webperf-loading:Prefetch-Resource-Validation.js (remove prefetch) 4. Implement bandwidth-aware loading
- If downlink > 10 Mbps → Good bandwidth, consider:
- Higher quality media - Strategic prefetch - Preloading next-page resources
Adaptive Loading Implementation Guide
Based on Network Information API results, implement these strategies:
For slow-2g / 2g (< 50 Kbps): (effectiveType: "slow-2g" or "2g")
- Serve low-res images (quality: 30-40)
- Disable autoplay videos
- Remove all prefetch hints
- Inline all critical CSS
- Defer all non-critical JavaScript
- Use system fonts (no webfonts)
- Aggressive lazy loading (load on scroll + buffer)
For 3g (50-700 Kbps): (effectiveType: "3g")
- Serve medium-res images (quality: 60-70)
- Disable autoplay videos
- Limited prefetch (critical only)
- Inline critical CSS only
- Defer non-critical JavaScript
- Preload 1-2 critical fonts
- Standard lazy loading
For 4g+ (> 700 Kbps): (effectiveType: "4g")
- Serve high-res images (quality: 80-90)
- Allow autoplay videos (muted)
- Strategic prefetch for navigation
- Standard CSS loading and JavaScript loading
- Preload critical fonts
- Standard lazy loading
For save-data mode: (navigator.connection.saveData === true)
- Override connection type, treat as worse than actual
- Show "Load high quality" toggle
- Disable autoplay entirely
- Minimal images, minimal quality
- No prefetch, no preload (except critical)
Performance Budget by Connection Type
Adjust performance budgets based on connection quality:
slow-2g / 2g:
- Total page weight: < 500KB
- Images: < 200KB total
- JavaScript: < 100KB total
- No videos
3g:
- Total page weight: < 1.5MB
- Images: < 800KB total
- JavaScript: < 300KB total
- Videos: < 3MB (only if critical)
4g+:
- Total page weight: < 3MB
- Images: < 2MB total
- JavaScript: < 1MB total
- Videos: < 10MB
Network Information API Limitations
Be aware of API limitations and fallbacks:
API not available:
- Safari does not support Network Information API
- Fallback: Use TTFB as proxy for connection quality
- Fallback: Device detection (mobile = assume slow)
- Fallback: User preference toggle
API values are estimates:
- effectiveType is based on recent observations
- Values can change during session
- Re-check periodically for long sessions
Privacy considerations:
- Some browsers limit precision for privacy
- Values may be rounded or capped
- Consider user privacy when making decisions
References
references/snippets.md— Descriptions and thresholds for each scriptreferences/schema.md— Return value schema for interpreting script output