WebPerf Snippets

Tested JavaScript snippets that measure and debug web performance. Your AI agent runs them for you, or you run them yourself in DevTools: the same code every time.

AI agents are good at interpreting performance data and unreliable when they write measurement code on the fly. WebPerf Snippets keeps both apart: the measurement is fixed code, tested in CI, that returns structured data, and the agent reasons about the result. The same snippets run in the console, the CLI, the DevTools extension and the Agent Skills, and every one returns an object that follows a single contract (snippets/SCHEMA.md).

→ Why AI audits need deterministic scripts

Run them with an AI agent

You want to	Use
Audit a URL with any agent that has a terminal	The Copy prompt to measure button on each snippet page
Give an agent the snippets as tools	The MCP server
Let the agent drive your Chrome (login, interactions)	The Agent Skills with Chrome DevTools MCP
Run snippets from scripts or CI	The CLI
Give an agent the whole documentation	llms.txt (details)

Not sure which snippet to run? Start from the symptom in Which snippet should I use?

Copy prompt to measure

Snippet pages have a Copy prompt to measure button above the code. It copies a prompt that asks any AI agent with a terminal to run that snippet with the CLI on the URL you give it, and to report the value, the cause and the issues. The agent runs the published snippet instead of rewriting it or estimating the result.

MCP server

The CLI includes an MCP server: an agent in any MCP client (Claude Code, Cursor, VS Code, Gemini CLI) calls the snippets and the workflows as tools, on a headless Chromium, and reads the object each one returns. It is listed in the MCP Registry as io.github.nucliweb/webperf-snippets.

claude mcp add webperf -- npx -y webperf-snippets mcp

In Claude Code, the webperf plugin installs the same server:

/plugin install webperf --marketplace nucliweb/webperf-snippets

See the MCP server documentation for other clients, the tools, the resources and prompts, and the CrUX key.

Agent skills

The snippets are packaged as Agent Skills for Claude Code, Cursor, OpenCode, Gemini CLI, VS Code extensions and other compatible agents. With Chrome DevTools MCP, the agent runs the snippets in your browser and reads the object they return.

npx skills add nucliweb/webperf-snippets

This installs the skills from the GitHub repository into ~/.claude/skills/. To install them from a clone instead:

git clone https://github.com/nucliweb/webperf-snippets.git
cd webperf-snippets
npm run install-skills   # into .claude/skills/ of the current project
npm run install-global   # into ~/.claude/skills/, for every project

The skills pass each script to Chrome DevTools MCP by path, and the server only reads files inside its workspace roots. For skills outside the project, such as in ~/.claude/skills/, add --workspace to the arguments of the server, with the real folder of the skills and not a symlink to it:

"args": ["-y", "chrome-devtools-mcp@latest", "--workspace=/absolute/path/to/skills"]

Without it the skills still work: the server answers Access denied and the agent sends the code of the script instead, at the cost of one failed call in each session.

Skill	Snippets	What it covers
webperf	57	Main entry point for all web performance analysis
webperf-core-web-vitals	7	LCP, CLS, INP measurements with detailed breakdowns
webperf-loading	35	TTFB, FCP, script and font analysis, resource hints, service workers
webperf-interaction	10	Long tasks, animation frames, scroll jank, INP debugging
webperf-media	4	Image and video audits, lazy loading validation, SVG analysis
webperf-resources	1	Network bandwidth, connection quality, adaptive loading

This is the beginning of the README. Read the rest at the original. Read the full README ↗