# WebPerf Snippets > Source: 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. → [Why AI audits need deterministic scripts](https://joanleon.dev/en/ai-web-performance-audits-scripts-reports/) ## Run them with an AI agent | You want to | Use | | ----------------------------------------------------- | ----------------------------------------------------------- | | Audit a URL with any agent that has a terminal | The [Copy prompt](#copy-prompt) button on each snippet page | | Let the agent drive your Chrome (login, interactions) | The [Agent Skills](#agent-skills) with Chrome DevTools MCP | | Run snippets from scripts or CI | The [CLI](#cli) | Not sure which snippet to run? Start from the symptom in [Which snippet should I use?](https://webperf-snippets.nucliweb.net/which-snippet.md). ### Copy prompt Snippet pages have a **Copy prompt** button above the code. It copies a prompt that asks any AI agent with a terminal to run that snippet with the [CLI](https://webperf-snippets.nucliweb.net/CLI.md) 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. ### Agent skills WebPerf Snippets powers a set of [Agent Skills](https://github.com/nucliweb/webperf-snippets/tree/main/.claude/skills) for autonomous performance audits. An AI agent such as [Claude Code](https://claude.ai/code) executes the snippets deterministically through [Chrome DevTools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp), the same code, every time, across sessions and models. ```bash copy npx -y skills add nucliweb/webperf-snippets ``` | Skill | What it covers | | ------------------------- | ---------------------------------------------------------- | | `webperf` | General-purpose performance audit entry point | | `webperf-core-web-vitals` | LCP, CLS, INP with guided diagnosis workflows | | `webperf-loading` | TTFB, FCP, render-blocking, fonts, scripts, resource hints | | `webperf-interaction` | INP, long tasks, scroll jank, animation frames | | `webperf-media` | Image and video audits, lazy loading, LCP media | | `webperf-resources` | Network quality, adaptive loading strategies | The skills include decision trees that automatically trigger deeper analysis when thresholds are exceeded, for example, when TTFB is slow, the agent runs TTFB sub-parts diagnostics to pinpoint whether the issue is DNS, connection, or backend latency. → [Read more about WebPerf Agent Skills](https://joanleon.dev/en/webperf-snippets-agent-skills/) ### CLI Run the same curated snippets headlessly via Playwright. Diagnose LCP regressions in CI, gate pull requests on real performance budgets, and automate the audits you already run by hand. The `--json` output is what an agent or a script reads. ```bash copy npx webperf-snippets https://web.dev --json npx webperf-snippets https://web.dev --workflow audit npx webperf-snippets https://web.dev --budget-lcp 2500 --budget-cls 0.1 ``` | Workflow | What it runs | | ----------------- | -------------------------------------------------------------------- | | `core-web-vitals` | LCP, CLS, with automatic LCP-Subparts follow-up | | `audit` | Render-blocking, resource hints, critical CSS, TTFB, scripts, images | → [CLI documentation](https://webperf-snippets.nucliweb.net/CLI.md) ## Run them in your browser Every snippet also runs by hand in the DevTools console, with the same code the agents use. ### Requirements All snippets are tested in [Google Chrome](https://google.com/chrome/). Most snippets also work in other Chromium-based browsers (Edge, Brave, Arc) and Firefox. Safari has limited Performance API support. ### Run in the console 1. Copy any snippet (click the copy button) 2. Open DevTools (`F12` or `Cmd+Option+I` / `Ctrl+Shift+I`) 3. Go to the **Console** tab 4. Paste and press `Enter` ### Save as a DevTools snippet Save frequently used snippets for quick access: 1. Open DevTools → **Sources** tab → **Snippets** panel 2. Click **+ New snippet** 3. Name it (e.g., "LCP") 4. Paste the code 5. Right-click → **Run** (or `Cmd+Enter` / `Ctrl+Enter`) ### Video tutorial ## What you can measure | Category | What it includes | | -------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **[Core Web Vitals](https://webperf-snippets.nucliweb.net/CoreWebVitals/LCP.md)** | CLS, INP, LCP, LCP Image Entropy, LCP Sub-Parts, LCP Trail, LCP Video Candidate | | **[Loading](https://webperf-snippets.nucliweb.net/Loading/TTFB.md)** | TTFB, JS Execution Time Breakdown, FCP, Back/Forward Cache, CSS Media Queries Analysis, Critical CSS Detection, SSR Hydration Data Analysis, Validate Preload on Async/Defer Scripts, Prefetch Resource Validation, Priority Hints Audit, Service Worker Analysis | | **[Interaction](https://webperf-snippets.nucliweb.net/Interaction/Long-Animation-Frames.md)** | Interactions, Input Latency Breakdown, Layout Shift, Long Animation Frames, Long Task, Scroll Performance | | **[Resources](https://webperf-snippets.nucliweb.net/Resources/Network-Bandwidth-Connection-Quality.md)** | Network Bandwidth & Connection Quality | | **[Media](https://webperf-snippets.nucliweb.net/Media/Image-Element-Audit.md)** | Image Element Audit, Video Element Audit | ## Resources - [Web Vitals](https://web.dev/articles/vitals) - Learn about Core Web Vitals - [Chrome DevTools](https://developer.chrome.com/docs/devtools/) - Official documentation - [GitHub Repository](https://github.com/nucliweb/webperf-snippets) - Star, fork, or contribute