{"slug":"webperf-resources-3","title":"webperf-resources","summary":"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 connect","platform":"Claude","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-10-19T21:17:35.851863Z","repo":{"url":"https://github.com/nucliweb/webperf-snippets","stars":1454,"forks":90,"license":"MIT","updatedAt":"2026-10-19T11:21:09Z"},"bodyHtml":"<hr>\n<p>name: webperf-resources\ndescription: 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.\nkind: subagent\nmodel: gemini-2.5-flash\ntemperature: 0.2\nmax_turns: 10\ntools:</p>\n<ul>\n<li>mcp_chrome-devtools/*</li>\n<li>view_file\nlicense: MIT\nmetadata:\nauthor: Joan Leon | @nucliweb\nversion: 2.0.1\nmcp-server: chrome-devtools\ncategory: web-performance\nrepository: <a href=\"https://github.com/nucliweb/webperf-snippets\">https://github.com/nucliweb/webperf-snippets</a></li>\n</ul>\n<hr>\n<h1>WebPerf: Resources &amp; Network</h1>\n<p>JavaScript snippets for measuring web performance in Chrome DevTools.</p>\n<h2>Running a script</h2>\n<ol>\n<li>Run the script with <code>mcp__chrome-devtools__evaluate_script</code> and read the object it returns. The scripts have no console output, so the returned object is the result: <code>script</code>, <code>status</code> and the metric data (<code>value</code>, <code>rating</code>, <code>details</code>, <code>items</code>, <code>issues</code>), as described in <code>references/schema.md</code>.</li>\n<li>When <code>status</code> is <code>\"tracking\"</code>, the script keeps observing the page. After the interactions, call the function named in <code>getDataFn</code> with another <code>mcp__chrome-devtools__evaluate_script</code> call, for example <code>getINP()</code>, and read the object it returns.</li>\n<li>When <code>status</code> is <code>\"error\"</code> or <code>\"unsupported\"</code>, read <code>error</code>: the page may not have loaded yet, or the browser lacks the API.</li>\n</ol>\n<p>Without Chrome DevTools MCP, run the same snippet with the <a href=\"https://webperf-snippets.net/CLI\">webperf-snippets CLI</a>, which loads the page in headless Chromium and prints the same result objects: <code>npx webperf-snippets &lt;url&gt; --snippet &lt;Name&gt; --json</code>, where <code>&lt;Name&gt;</code> is the script name without <code>.js</code>. It needs Playwright and Chromium (<code>npm install --save-dev webperf-snippets playwright</code>, then <code>npx playwright install chromium</code>), and tracking snippets take <code>--interact-script &lt;file&gt;</code> to drive the interactions.</p>\n<h2>Scripts</h2>\n<ul>\n<li><code>scripts/Network-Bandwidth-Connection-Quality.js</code> — Network bandwidth &amp; connection quality</li>\n</ul>\n<h2>Common Workflows</h2>\n<h3>Network Quality Assessment</h3>\n<p>When the user asks about network performance, connection quality, or adaptive loading:</p>\n<ol>\n<li><strong>Network-Bandwidth-Connection-Quality.js</strong> - Analyze network bandwidth, effective connection type, RTT, downlink, save-data mode</li>\n</ol>\n<h3>Adaptive Loading Strategy</h3>\n<p>When implementing adaptive loading or the user asks \"how to optimize for slow connections\":</p>\n<ol>\n<li><strong>Network-Bandwidth-Connection-Quality.js</strong> - Detect connection quality</li>\n<li>Cross-reference with <strong>webperf-loading</strong> skill:\n<ul>\n<li>TTFB.js (measure server response on slow connections)</li>\n<li>Find-render-blocking-resources.js (identify heavy resources to defer)</li>\n<li>Resource-Hints-Validation.js (optimize preconnect for slow networks)</li>\n</ul>\n</li>\n<li>Cross-reference with <strong>webperf-media</strong> skill:\n<ul>\n<li>Image-Element-Audit.js (implement responsive images based on connection)</li>\n<li>Video-Element-Audit.js (adjust video quality based on connection)</li>\n</ul>\n</li>\n</ol>\n<h3>Save-Data Mode Detection</h3>\n<p>When the user asks about save-data or data-saving features:</p>\n<ol>\n<li><strong>Network-Bandwidth-Connection-Quality.js</strong> - Check if save-data is enabled</li>\n<li>If save-data is enabled, recommend:\n<ul>\n<li>Reducing image quality</li>\n<li>Disabling autoplay videos</li>\n<li>Deferring non-critical resources</li>\n<li>Using low-res thumbnails</li>\n</ul>\n</li>\n</ol>\n<h3>Mobile/Slow Connection Optimization</h3>\n<p>When the user asks \"optimize for mobile\" or \"slow connection users\":</p>\n<ol>\n<li><strong>Network-Bandwidth-Connection-Quality.js</strong> - Assess connection type</li>\n<li>Cross-reference with <strong>webperf-loading</strong> skill:\n<ul>\n<li>TTFB.js (critical for slow connections)</li>\n<li>Find-render-blocking-resources.js (minimize blocking on slow networks)</li>\n<li>Critical-CSS-Detection.js (inline critical CSS to reduce RTT)</li>\n<li>Prefetch-Resource-Validation.js (avoid excessive prefetch on slow connections)</li>\n</ul>\n</li>\n</ol>\n<h2>Decision Tree</h2>\n<p>Use this decision tree to automatically run follow-up snippets based on results:</p>\n<h3>After Network-Bandwidth-Connection-Quality.js</h3>\n<ul>\n<li><p><strong>If effectiveType is \"slow-2g\" or \"2g\"</strong> → Very slow connection, recommend:</p>\n<ol>\n<li>Run <strong>webperf-loading:Critical-CSS-Detection.js</strong> (inline critical CSS)</li>\n<li>Run <strong>webperf-media:Image-Element-Audit.js</strong> (implement aggressive lazy loading)</li>\n<li>Run <strong>webperf-loading:Prefetch-Resource-Validation.js</strong> (remove prefetch to save bandwidth)</li>\n<li>Run <strong>webperf-core-web-vitals:LCP.js</strong> (LCP is heavily impacted by slow connections)</li>\n<li>Recommend minimal resource strategy</li>\n</ol>\n</li>\n<li><p><strong>If effectiveType is \"3g\"</strong> → Moderate connection, recommend:</p>\n<ol>\n<li>Run <strong>webperf-loading:Find-render-blocking-resources.js</strong> (minimize blocking)</li>\n<li>Run <strong>webperf-media:Image-Element-Audit.js</strong> (responsive images)</li>\n<li>Run <strong>webperf-loading:Resource-Hints-Validation.js</strong> (optimize preconnect)</li>\n<li>Run <strong>webperf-core-web-vitals:INP.js</strong> (high latency can impact interaction responsiveness)</li>\n<li>Implement adaptive image quality</li>\n</ol>\n</li>\n<li><p><strong>If effectiveType is \"4g\" or better</strong> → Good connection, recommend:</p>\n<ol>\n<li>Standard optimization practices</li>\n<li>Consider strategic prefetch for navigation</li>\n<li>Higher quality media is acceptable</li>\n</ol>\n</li>\n<li><p><strong>If save-data is enabled</strong> → User explicitly wants to save data, recommend:</p>\n<ol>\n<li>Reduce image quality aggressively</li>\n<li>Disable autoplay videos</li>\n<li>Defer non-critical resources</li>\n<li>Remove prefetch/preload hints</li>\n<li>Show \"high quality\" toggle option</li>\n</ol>\n</li>\n<li><p><strong>If RTT &gt; 300ms</strong> → High latency, recommend:</p>\n<ol>\n<li>Run <strong>webperf-loading:TTFB.js</strong> (latency impacts TTFB)</li>\n<li>Run <strong>webperf-loading:TTFB-Sub-Parts.js</strong> (break down latency components)</li>\n<li>Run <strong>webperf-loading:Resource-Hints-Validation.js</strong> (preconnect critical for high RTT)</li>\n<li>Run <strong>webperf-loading:Service-Worker-Analysis.js</strong> (caching is critical for high latency)</li>\n<li>Minimize number of origins</li>\n<li>Use HTTP/2 or HTTP/3 for multiplexing</li>\n</ol>\n</li>\n<li><p><strong>If downlink &lt; 1 Mbps</strong> → Very limited bandwidth, recommend:</p>\n<ol>\n<li>Run <strong>webperf-media:Image-Element-Audit.js</strong> (aggressive compression)</li>\n<li>Run <strong>webperf-media:Video-Element-Audit.js</strong> (disable autoplay)</li>\n<li>Run <strong>webperf-loading:Prefetch-Resource-Validation.js</strong> (remove prefetch)</li>\n<li>Implement bandwidth-aware loading</li>\n</ol>\n</li>\n<li><p><strong>If downlink &gt; 10 Mbps</strong> → Good bandwidth, consider:</p>\n<ul>\n<li>Higher quality media</li>\n<li>Strategic prefetch</li>\n<li>Preloading next-page resources</li>\n</ul>\n</li>\n</ul>\n<h3>Adaptive Loading Implementation Guide</h3>\n<p>Based on Network Information API results, implement these strategies:</p>\n<p><strong>For slow-2g / 2g (&lt; 50 Kbps):</strong> (<code>effectiveType: \"slow-2g\"</code> or <code>\"2g\"</code>)</p>\n<ul>\n<li>Serve low-res images (quality: 30-40)</li>\n<li>Disable autoplay videos</li>\n<li>Remove all prefetch hints</li>\n<li>Inline all critical CSS</li>\n<li>Defer all non-critical JavaScript</li>\n<li>Use system fonts (no webfonts)</li>\n<li>Aggressive lazy loading (load on scroll + buffer)</li>\n</ul>\n<p><strong>For 3g (50-700 Kbps):</strong> (<code>effectiveType: \"3g\"</code>)</p>\n<ul>\n<li>Serve medium-res images (quality: 60-70)</li>\n<li>Disable autoplay videos</li>\n<li>Limited prefetch (critical only)</li>\n<li>Inline critical CSS only</li>\n<li>Defer non-critical JavaScript</li>\n<li>Preload 1-2 critical fonts</li>\n<li>Standard lazy loading</li>\n</ul>\n<p><strong>For 4g+ (&gt; 700 Kbps):</strong> (<code>effectiveType: \"4g\"</code>)</p>\n<ul>\n<li>Serve high-res images (quality: 80-90)</li>\n<li>Allow autoplay videos (muted)</li>\n<li>Strategic prefetch for navigation</li>\n<li>Standard CSS loading and JavaScript loading</li>\n<li>Preload critical fonts</li>\n<li>Standard lazy loading</li>\n</ul>\n<p><strong>For save-data mode:</strong> (<code>navigator.connection.saveData === true</code>)</p>\n<ul>\n<li>Override connection type, treat as worse than actual</li>\n<li>Show \"Load high quality\" toggle</li>\n<li>Disable autoplay entirely</li>\n<li>Minimal images, minimal quality</li>\n<li>No prefetch, no preload (except critical)</li>\n</ul>\n<h3>Performance Budget by Connection Type</h3>\n<p>Adjust performance budgets based on connection quality:</p>\n<p><strong>slow-2g / 2g:</strong></p>\n<ul>\n<li>Total page weight: &lt; 500KB</li>\n<li>Images: &lt; 200KB total</li>\n<li>JavaScript: &lt; 100KB total</li>\n<li>No videos</li>\n</ul>\n<p><strong>3g:</strong></p>\n<ul>\n<li>Total page weight: &lt; 1.5MB</li>\n<li>Images: &lt; 800KB total</li>\n<li>JavaScript: &lt; 300KB total</li>\n<li>Videos: &lt; 3MB (only if critical)</li>\n</ul>\n<p><strong>4g+:</strong></p>\n<ul>\n<li>Total page weight: &lt; 3MB</li>\n<li>Images: &lt; 2MB total</li>\n<li>JavaScript: &lt; 1MB total</li>\n<li>Videos: &lt; 10MB</li>\n</ul>\n<h3>Network Information API Limitations</h3>\n<p>Be aware of API limitations and fallbacks:</p>\n<p><strong>API not available:</strong></p>\n<ul>\n<li>Safari does not support Network Information API</li>\n<li>Fallback: Use TTFB as proxy for connection quality</li>\n<li>Fallback: Device detection (mobile = assume slow)</li>\n<li>Fallback: User preference toggle</li>\n</ul>\n<p><strong>API values are estimates:</strong></p>\n<ul>\n<li>effectiveType is based on recent observations</li>\n<li>Values can change during session</li>\n<li>Re-check periodically for long sessions</li>\n</ul>\n<p><strong>Privacy considerations:</strong></p>\n<ul>\n<li>Some browsers limit precision for privacy</li>\n<li>Values may be rounded or capped</li>\n<li>Consider user privacy when making decisions</li>\n</ul>\n<h2>References</h2>\n<ul>\n<li><code>references/snippets.md</code> — Descriptions and thresholds for each script</li>\n<li><code>references/schema.md</code> — Return value schema for interpreting script output</li>\n</ul>\n","files":[{"path":"references/schema.md","sizeBytes":49186,"isText":true},{"path":"references/snippets.md","sizeBytes":536,"isText":true},{"path":"scripts/Network-Bandwidth-Connection-Quality.js","sizeBytes":1511,"isText":true},{"path":"SKILL.md","sizeBytes":9223,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"clean","suspicious":0,"notes":0,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-10-19T21:18:55.482336Z","sha256":"54FB16C0DC6172B22116B702CFAA77B4E6461ED1A3C6924A22A1AB6A3E110F95","sizeBytes":19458},"review":null,"source":{"repositoryUrl":"https://github.com/nucliweb/webperf-snippets","path":"dist/antigravity/webperf-resources","license":"MIT","commit":"d2f9739cda7363daab6ade96ad2b2198e9b44e8e","subtreeSha":"1AD67A636A47DAB42CEFFF1D27D08BFF47551C17D5440DD82A94AACA51C8795F","lastSyncedAt":"2026-10-19T21:17:31.667373Z"},"reviewedAt":"2026-10-19T21:21:20.88326Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/nucliweb/webperf-snippets/tree/main/dist/antigravity/webperf-resources"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install nucliweb-webperf-snippets@llmmart"},{"target":"git","command":"git clone https://github.com/nucliweb/webperf-snippets.git"}]}