A curated collection of JavaScript snippets to measure and debug Web Performance directly in your browser's DevTools console.
| Category | What it includes |
|---|---|
| Core Web Vitals | LCP, CLS, INP - the metrics that impact SEO and user experience |
| Loading | TTFB, resource hints, scripts, fonts, images, render-blocking resources |
| Interaction | Long Animation Frames, event timing, responsiveness |
- Copy any snippet from webperf-snippets.nucliweb.net
- Open DevTools (
F12orCmd+Option+I/Ctrl+Shift+I) - Go to the Console tab
- Paste and press
Enter
Save frequently used snippets for quick access:
- Open DevTools → Sources tab → Snippets panel
- Click + New snippet
- Name it (e.g., "LCP")
- Paste the code
- Right-click → Run (or
Cmd+Enter/Ctrl+Enter)
Snippet.mp4
WebPerf Snippets can be used as Agent Skills with AI coding assistants like Claude Code, Cursor, OpenCode, Gemini CLI, and more for automated performance analysis.
Option 1: Using skills CLI (recommended)
npx skills add nucliweb/webperf-snippetsInstalls directly from GitHub repository to ~/.claude/skills/.
Option 2: Install locally (project-specific)
git clone https://github.com/nucliweb/webperf-snippets.git
cd webperf-snippets
npm run install-skillsThis installs skills to .claude/skills/ in your project directory.
Option 3: Install globally (for contributors)
git clone https://github.com/nucliweb/webperf-snippets.git
cd webperf-snippets
npm run install-globalThis installs skills to ~/.claude/skills/ for use across any project.
| Skill | Snippets | Description |
|---|---|---|
webperf |
47 | Main entry point for all web performance analysis |
webperf-core-web-vitals |
7 | LCP, CLS, INP measurements with detailed breakdowns |
webperf-loading |
28 | TTFB, FCP, script/font analysis, resource hints, service workers |
webperf-interaction |
8 | Long tasks, animation frames, scroll jank, INP debugging |
webperf-media |
3 | Image/video audits, lazy loading validation, SVG analysis |
webperf-resources |
1 | Network bandwidth, connection quality, adaptive loading |
Skills include built-in workflows and decision trees that enable autonomous performance analysis:
Workflows - Predefined sequences for common scenarios:
- Complete loading audit (6 snippets)
- Server performance investigation (4 snippets)
- Font loading optimization (3 snippets)
- Script performance deep dive (6 snippets)
- And more...
Decision Trees - Conditional logic based on results:
- If TTFB > 600ms → automatically run TTFB-Sub-Parts.js
- If FCP > 1.8s → run render-blocking resource analysis
- If many third-party scripts detected → analyze timing and impact
- And 15+ more intelligent triggers
Example interaction:
User: "Analyze loading performance"
Agent:
1. Runs TTFB.js → detects 750ms (slow)
2. Follows decision tree → runs TTFB-Sub-Parts.js
3. Identifies DNS + server time issues
4. Runs Service-Worker-Analysis.js
5. Provides consolidated report with specific fixes
Skills activate automatically when matched:
Audit this page for Core Web Vitals
Analyze loading performance
Check for image optimization issues
Debug slow LCP
Why is my TTFB so high?
Skills are compatible with Chrome DevTools MCP for automated browser-based performance auditing.
Supported agents: Claude Code, Cursor, OpenCode, Gemini CLI, VS Code extensions, and many more.
Visit webperf-snippets.nucliweb.net for the full documentation with all snippets.
- Web Vitals - Learn about Core Web Vitals
- Chrome DevTools - Official documentation
