Webperf Resources
Intelligent network quality analysis with adaptive loading strategies.
Install
npx skills add nucliweb/webperf-snippets --skill webperf-resources -g -a claude-code -y- Repository
- nucliweb/webperf-snippets1.5k
- Category
- Design
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 2,012 tokens
- Runs scripts
- Yes, review before use
What it does
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.
WebPerf: Resources & Network
JavaScript snippets for measuring web performance in Chrome DevTools.
Running a script
- Run the script with
mcp__chrome-devtools__evaluate_scriptand read the object it returns. The scripts have no console output, so the returned object is the result:script,statusand the metric data (value,rating,details,items,issues), as described inreferences/schema.md. - When
statusis"tracking", the script keeps observing the page. After the interactions, call the function named ingetDataFnwith anothermcp__chrome-devtools__evaluate_scriptcall, for examplegetINP(), and read the object it returns. - When
statusis"error"or"unsupported", readerror: the page may not have loaded yet, or the browser lacks the API.
Without Chrome DevTools MCP, run the same snippet with the webperf-snippets 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:
- 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":
