/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.
license: MIT
metadata:
  author: Joan Leon | @nucliweb
  version: 2.6.3
  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.

Running a script

1. Run the script with `mcp__chrome-devtools__evaluate_script`, passing the file instead of its code: `sourcePath` with the absolute path of `scripts/<Name>.js` in this skill, and `format: "script"`, since a script runs by itself and is not a function. Read the object it returns. The scripts have no console output, so the returned object is the result: `script`, `status` and the metric data (`value`, `rating`, `details`, `items`, `issues`), as described in `references/schema.md`. 2. When `status` is `"tracking"`, the script keeps observing the page. After the interactions, call the function named in `getDataFn` with another `mcp__chrome-devtools__evaluate_script` call, as an arrow function in `function`, for example `() => getINP()`, and read the object it returns. 3. When `status` is `"error"` or `"unsupported"`, read `error`: the page may not have loaded yet, or the browser lacks the API.

`sourcePath` and `format` need Chrome DevTools MCP 1.11.0 or later, and the server only reads files inside its workspace roots: the project, the temp folder and each `--workspace=<folder>` in its arguments. When it answers `Access denied`, as it does for a skill installed outside the project, such as in `~/.claude/skills/`, read the file and pass its code in `function`, still with `format: "script"`. A `--workspace` with the real folder of the skills makes the path work; the server follows symlinks, so a link to the folder is not enough.

Without Chrome DevTools MCP, run the same snippet with the [webperf-snippets CLI](https://webperf-snippets.net/CLI), which loads the page in headless Chromium and prints the same result objects: `npx webperf-snippets <url> --snippet <Name> --json`, where `<Name>` is the script name without `.js`. It needs Playwright and Chromium (`npm install --save-dev webperf-snippets playwright`, then `npx playwright install chromium`), and tracking snippets take `--interact-script <file>` to drive the interactions.

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:

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 inter