Tooluck logoTooluck
SKILL.md

webperf-loading

Agent skill fromnucliweb/webperf-snippets

Intelligent loading performance analysis with automated workflows for TTFB investigation (DNS/connection/server breakdown), render-blocking detection, script performance deep dive (first vs third-party attribution), font optimization, and resource hints validation. Includes decision trees that automatically analyze TTFB sub-parts when slow, detect script loading anti-patterns (async/defer/preload conflicts), identify render-blocking resources, and validate resource hints usage. Features workflows for complete loading audit (6 phases), backend performance investigation, and priority optimization. Cross-skill integration with Core Web Vitals (LCP resource loading), Interaction (script execution blocking), and Media (lazy loading strategy). Use when the user asks about TTFB, FCP, render-blocking, slow loading, font performance, script optimization, or resource hints. Compatible with Chrome DevTools MCP.

How to install webperf-loading

install webperf-loading
# install the webperf-snippets pack with the skills CLI
npx skills add nucliweb/webperf-snippets

# or add only this skill to Claude Code: copy the folder

skills/webperf-loading/

# into

~/.claude/skills/webperf-loading/ (all projects)

.claude/skills/webperf-loading/ (one project)

skills/webperf-loading/SKILL.md

MITFull file
1# WebPerf: Loading Performance
2
3JavaScript snippets for measuring web performance in Chrome DevTools.
4
5## Running a script
6
71. 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`.
82. 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.
93. When `status` is `"error"` or `"unsupported"`, read `error`: the page may not have loaded yet, or the browser lacks the API.
10…

Excerpt shown under the repository's MIT license.

More skills in webperf-snippets

Keep exploring

Similar skill repositories

thedotmack /

claude-mem
116k

Persistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future sessions. Works with Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode + More

CCCXGHGM+135 skills

Newsletter

Join the Community

Subscribe to our newsletter for the latest news and updates