Skill: nucliweb/webperf-resources (version 0.1.0)

--- 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. license: MIT metadata: author: Joan Leon | @nucliweb version: 1.0.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 [REDACTED_SECRET], capture output with [REDACTED_SECRET]. ## Scripts - `scripts/Network-Bandwidth-Connection-Quality.js` — Network Bandwidth & Connection Quality Descriptions and thresholds: `references/snippets.md` ## 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: ### 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. 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. 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:Resource-Hints-Validation.js** (preconnect critical for high RTT) 3. Minimize number of origins 4. 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 ### Cross-Skill Triggers These triggers recommend using snippets from other skills: #### From Resources to Loading Skill - **If slow connection detected (2g/3g)** → Use **webperf-loading** skill: - TTFB.js (latency is amplified on slow connections) - Critical-CSS-Detection.js (reduce RTT by inlining critical CSS) - Find-render-blocking-resources.js (minimize blocking resources) - Resource-Hints-Validation.js (preconnect is critical for high RTT) - Prefetch-Resource-Validation.js (avoid prefetch on slow connections) - **If high RTT detected (>200ms)** → Use **webperf-loading** skill: - TTFB-Sub-Parts.js (break down latency components) - Resource-Hints-Validation.js (preconnect to reduce RTT impact) - Service-Worker-Analysis.js (caching is critical for high latency) #### From Resources to Media Skill - **If slow connection or save-data detected** → Use **webperf-media** skill: - Image-Element-Audit.js (implement responsive images, aggressive compression) - Video-Element-Audit.js (disable autoplay, reduce quality) #### From Resources to Core Web Vitals Skill - **If slow connection detected** → Check Core Web Vitals impact: - Use **webperf-core-web-vitals:LCP.js** (LCP is heavily impacted by slow connections) - Use **webperf-core-web-vitals:INP.js** (high latency can impact interaction responsiveness) ### Adaptive Loading Implementation Guide Based on Network Information API results, implement these strategies: **For slow-2g / 2g (< 50 Kbps):** ```javascript // Detected by effectiveType: "slow-2g" or "2g" Strategies: - 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):** ```javascript // Detected by effectiveType: "3g" Strategies: - 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):** ```javascript // Detected by effectiveType: "4g" Strategies: - Serve high-res images (quality: 80-90) - Allow autoplay videos (muted) - Strategic prefetch for navigation - Standard CSS loading - Standard JavaScript loading - Preload critical fonts - Standard lazy loading ``` **For save-data mode:** ```javascript // Detected by navigator.connection.saveData === true Strategies: - 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 ### Real-World Scenarios **Scenario: User on 3G reports slow page load** 1. Run Network-Bandwidth-Connection-Quality.js → confirms 3g 2. Run webperf-loading:TTFB.js → high TTFB due to latency 3. Run webperf-loading:Critical-CSS-Detection.js → CSS not inlined 4. Recommendation: Inline critical CSS, implement adaptive loading **Scenario: User with save-data enabled complains about data usage** 1. Run Network-Bandwidth-Connection-Quality.js → saveData: true 2. Run webperf-media:Image-Element-Audit.js → high-res images served 3. Run webperf-media:Video-Element-Audit.js → autoplay enabled 4. Recommendation: Respect save-data, reduce quality, disable autoplay **Scenario: International users report slow LCP** 1. Run Network-Bandwidth-Connection-Quality.js → high RTT (300ms+) 2. Run webperf-core-web-vitals:LCP.js → LCP 4s+ 3. Run webperf-loading:TTFB-Sub-Parts.js → DNS + connection = 500ms 4. Recommendation: Use CDN, implement preconnect, optimize for latency **Scenario: Mobile users in rural areas** 1. Run Network-Bandwidth-Connection-Quality.js → 2g, high RTT, low downlink 2. Run webperf-loading:Find-render-blocking-resources.js → many blocking 3. Run webperf-media:Image-Element-Audit.js → all images eager-loaded 4. Recommendation: Aggressive adaptive loading, inline critical CSS, lazy load all images ### 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 ### Testing Adaptive Loading To test adaptive loading implementations: 1. Use Chrome DevTools Network Throttling 2. Run Network-Bandwidth-Connection-Quality.js at each throttling level 3. Verify adaptive strategies activate correctly 4. Measure Core Web Vitals at each connection speed 5. Adjust breakpoints and strategies based on results **Test matrix:** - Offline - slow-2g (50 Kbps, RTT 2000ms) - 2g (250 Kbps, RTT 300ms) - 3g (750 Kbps, RTT 100ms) - 4g (4 Mbps, RTT 20ms) - save-data enabled at each level ## References - `references/snippets.md` — Descriptions and thresholds for each script - `references/schema.md` — Return value schema for interpreting script output > Execute via `mcp__chrome-devtools__evaluate_script` → read with `mcp__chrome-devtools__get_console_message`.


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)