Webperf Resources

Detects network conditions using Chrome's Network Information API and tells you exactly what to do about them. It checks connection type, bandwidth, RTT, and save-data preferences, then triggers different optimization workflows. If it sees 2g, it'll push you toward aggressive lazy loading and critical CSS inlining. On 3g, it recommends responsive images and prefetch optimization. It even sets performance budgets by connection type: 500KB for 2g, 1.5MB for 3g, 3MB for 4g+. The decision trees are opinionated but smart, cross-referencing other webperf skills for TTFB analysis or media optimization. Honestly most useful if you're building adaptive loading strategies or need to justify why your site feels slow on mobile networks.

skills.sh installs: 249
GitHub stars: 1.5K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add nucliweb/webperf-snippets --skill webperf-resources --agent claude-code

Installs into .claude/skills of the current project.

Files

WebPerf: Resources & Network

JavaScript snippets for measuring web performance in Chrome DevTools.

Running a script

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.
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.
When status is "error" or "unsupported", read error: the page may not have loaded yet, or the browser lacks the API.