Development
Plugin
webperf-snippets
A curated collection of JavaScript snippets to measure and debug Web Performance directly in your browser's DevTools console.
Plugin Signal80/100Strong
maintained96
capable53
documented100
adopted67
Install
$ npx -y skills add nucliweb/webperf-snippets --agent claude-code
Run the curl in your terminal, the rest in Claude Code.
Stats
1,443
Stars
86
Forks
Active
Maintenance
JavaScript
Language
MIT
License
8d ago
Last commit
4y ago
Created
Repo: nucliweb/webperf-snippets
What's inside
Skills
12/webperf-core-web-vitalsIntelligent Core Web Vitals analysis with automated workflows and decision trees. Measures LCP, CLS, INP with guided debugging that automatically determines follow-up analysis based on results. Includes workflows for LCP deep dive (5 phases), CLS investigation (loading vs/webperf-interactionIntelligent interaction performance analysis with automated workflows for INP debugging, scroll jank investigation, and main thread blocking. Includes decision trees that automatically run script attribution when long frames detected, break down input latency phases, and/webperf-loadingIntelligent 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/webperf-mediaIntelligent media optimization with automated workflows for images, videos, and SVGs. Includes decision trees that detect LCP images (triggers format/lazy-loading/priority analysis), identify layout shift risks (missing dimensions), and flag lazy loading issues (above-fold lazy/webperf-resourcesIntelligent network quality analysis with adaptive loading strategies. Detects connection type (2g/3g/4g), bandwidth, RTT, and save-data mode, then automatically triggers appropriate optimization workflows. Includes decision trees that recommend image compression for slow/webperfWeb performance measurement and debugging toolkit. Use when the user asks about web performance, wants to audit a page, or says "analyze performance", "debug lcp", "check ttfb", "measure core web vitals", "audit images", or similar.
Show all 12 skillsShow fewer
/webperf-core-web-vitalsIntelligent Core Web Vitals analysis with automated workflows and decision trees. Measures LCP, CLS, INP with guided debugging that automatically determines follow-up analysis based on results. Includes workflows for LCP deep dive (5 phases), CLS investigation (loading vs/webperf-interactionIntelligent interaction performance analysis with automated workflows for INP debugging, scroll jank investigation, and main thread blocking. Includes decision trees that automatically run script attribution when long frames detected, break down input latency phases, and/webperf-loadingIntelligent 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/webperf-mediaIntelligent media optimization with automated workflows for images, videos, and SVGs. Includes decision trees that detect LCP images (triggers format/lazy-loading/priority analysis), identify layout shift risks (missing dimensions), and flag lazy loading issues (above-fold lazy/webperf-resourcesIntelligent network quality analysis with adaptive loading strategies. Detects connection type (2g/3g/4g), bandwidth, RTT, and save-data mode, then automatically triggers appropriate optimization workflows. Includes decision trees that recommend image compression for slow/webperfWeb performance measurement and debugging toolkit. Use when the user asks about web performance, wants to audit a page, or says "analyze performance", "debug lcp", "check ttfb", "measure core web vitals", "audit images", or similar.
README
1WebPerf Snippets
A curated collection of JavaScript snippets to measure and debug Web Performance directly in your browser's DevTools console.
Start here
- Measure your first page: start with LCP, CLS, and INP.
- Investigate slow loading: continue with TTFB, FCP, and render-blocking resources.
- Debug interaction issues: use Long Animation Frames and Scroll Performance.
- Audit media-heavy pages: open Image Element Audit and Video Element Audit.
- Automate the workflow with agents: see SKILLS.md and the installation section below.
What you can measure
| 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 |
How to use
Option 1: Run in browser console
- 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
Option 2: Save as DevTools Snippet
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)
Video tutorial
https://github.com/nucliweb/webperf-snippets/assets/1307927/2987a2ca-3eef-4b73-8f6b-7b1e06b50040
Agent Skills for AI Coding Assistants
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.
Installation
Option 1: Using skills CLI (recommended)
npx skills add nucliweb/webperf-snippets
Installs 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-skills
This 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-global
This installs skills to ~/.claude/skills/ for use across any project.
Available Skills
| Skill | Snippets | Description |
|---|---|---|
webperf | 49 | Main entry point for all web performance analysis |
webperf-core-web-vitals | 7 | LCP, CLS, INP measurements with detailed breakdowns |
webperf-loading | 29 | 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 |
Intelligent Workflows & Decision Trees
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
Usage
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.
CLI
The repository includes a headless CLI (cli/) that runs WebPerf Snippets via Playwright — useful for CI pipelines and performance budgeting without copy-pasting into DevTools.
npx webperf-snippets https://web.dev --budget-lcp 2500 --budget-cls 0.1
See cli/README.md for installation, usage, and CI integration. The CLI is published to npm as webperf-snippets via a tag-based release workflow — pushing a cli-v* tag triggers the publish pipeline.
Documentation
Visit webperf-snippets.nucliweb.net for the full documentation with all snippets.
Resources
- Web Vitals - Learn about Core Web Vitals
- Chrome DevTools - Official documentation
Star History
File tree
499nucliweb/webperf-snippetsView on GitHub
.claude/
eslint-rules/
prefer-dynamic-import-with-feature-guard.js
eslint.config.cjs
hooks/
eslint-check.sh
settings.json
skills/
webperf/
webperf-core-web-vitals/
references/
schema.md
snippets.md
scripts/
CLS.js
INP.js
LCP-Image-Entropy.js
LCP-Subparts.js
LCP-Trail.js
LCP-Video-Candidate.js
LCP.js
SKILL.md
webperf-interaction/
references/
schema.md
snippets.md
scripts/
Forced-Synchronous-Layout.js
Input-Latency-Breakdown.js
Interactions.js
Layout-Shift-Loading-and-Interaction.js
Long-Animation-Frames-Helpers.js
Long-Animation-Frames-Script-Attribution.js
Long-Animation-Frames.js
LongTask.js
Scroll-Performance.js
SKILL.md
webperf-loading/
references/
schema.md
snippets.md
scripts/
Back-Forward-Cache.js
Cache-Strategy-Analysis.js
Client-Side-Redirect-Detection.js
Content-Visibility.js
Critical-CSS-Detection.js
CSS-Media-Queries-Analysis.js
Event-Processing-Time.js
FCP.js
Find-Above-The-Fold-Lazy-Loaded-Images.js
Find-Images-With-Lazy-and-Fetchpriority.js
Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js
Find-render-blocking-resources.js
First-And-Third-Party-Script-Info.js
First-And-Third-Party-Script-Timings.js
Fonts-Preloaded-Loaded-and-used-above-the-fold.js
Inline-CSS-Info-and-Size.js
Inline-Script-Info-and-Size.js
JS-Execution-Time-Breakdown.js
Prefetch-Resource-Validation.js
Priority-Hints-Audit.js
Resource-Hints-Validation.js
Resource-Hints.js
Script-Loading.js
Service-Worker-Analysis.js
SSR-Hydration-Data-Analysis.js
TTFB-Resources.js
TTFB-Sub-Parts.js
TTFB.js
Validate-Preload-Async-Defer-Scripts.js
SKILL.md
webperf-media/
references/
schema.md
snippets.md
scripts/
Image-Element-Audit.js
SVG-Embedded-Bitmap-Analysis.js
Video-Element-Audit.js
SKILL.md
webperf-resources/
references/
schema.md
snippets.md
scripts/
Network-Bandwidth-Connection-Quality.js
SKILL.md
SKILL.md
.githooks/
pre-commit
.github/
workflows/
ci.yml
publish-cli.yml
release.yml
.gitignore
assets/
Sticker-Logo.afdesign
Sticker-Logo.svg
CHANGELOG.md
CLAUDE.md
cli/
.gitignore
package.json
README.md
src/
bin.js
decision-tree.js
interactions.js
load-snippet.js
reporters/
human.js
json.js
markdown.js
runner.js
workflows/
audit.js
cwv.js
loading.js
tests/
e2e/
audit.test.js
cwv.test.js
interactions.test.js
loading.test.js
run-measurement.test.js
fixtures/
audit-green.html
audit-violations.html
index.html
interactions.json
unit/
decision-tree.test.js
interactions.test.js
reporters.test.js
viewport-presets.test.js
components/
Demo.jsx
LazyVideoPlayer.js
PageSchema.jsx
Snippet.jsx
SnippetVisualizer/
AuditRenderer.jsx
CWVRenderer.jsx
exportMarkdown.js
FontsRenderer.jsx
index.jsx
WebMCP.js
CONTRIBUTING.md
dist/
antigravity/
webperf/
webperf-core-web-vitals/
references/
schema.md
snippets.md
scripts/
CLS.js
INP.js
LCP-Image-Entropy.js
LCP-Subparts.js
LCP-Trail.js
LCP-Video-Candidate.js
LCP.js
SKILL.md
webperf-interaction/
references/
schema.md
snippets.md
scripts/
Forced-Synchronous-Layout.js
Input-Latency-Breakdown.js
Interactions.js
Layout-Shift-Loading-and-Interaction.js
Long-Animation-Frames-Helpers.js
Long-Animation-Frames-Script-Attribution.js
Long-Animation-Frames.js
LongTask.js
Scroll-Performance.js
SKILL.md
webperf-loading/
references/
schema.md
snippets.md
scripts/
Back-Forward-Cache.js
Cache-Strategy-Analysis.js
Client-Side-Redirect-Detection.js
Content-Visibility.js
Critical-CSS-Detection.js
CSS-Media-Queries-Analysis.js
Event-Processing-Time.js
FCP.js
Find-Above-The-Fold-Lazy-Loaded-Images.js
Find-Images-With-Lazy-and-Fetchpriority.js
Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js
Find-render-blocking-resources.js
First-And-Third-Party-Script-Info.js
First-And-Third-Party-Script-Timings.js
Fonts-Preloaded-Loaded-and-used-above-the-fold.js
Inline-CSS-Info-and-Size.js
Inline-Script-Info-and-Size.js
JS-Execution-Time-Breakdown.js
Prefetch-Resource-Validation.js
Priority-Hints-Audit.js
Resource-Hints-Validation.js
Resource-Hints.js
Script-Loading.js
Service-Worker-Analysis.js
SSR-Hydration-Data-Analysis.js
TTFB-Resources.js
TTFB-Sub-Parts.js
TTFB.js
Validate-Preload-Async-Defer-Scripts.js
SKILL.md
webperf-media/
references/
schema.md
snippets.md
scripts/
Image-Element-Audit.js
SVG-Embedded-Bitmap-Analysis.js
Video-Element-Audit.js
SKILL.md
webperf-resources/
references/
schema.md
snippets.md
scripts/
Network-Bandwidth-Connection-Quality.js
SKILL.md
SKILL.md
gemini/
webperf/
webperf-core-web-vitals/
scripts/
CLS.js
INP.js
LCP-Image-Entropy.js
LCP-Subparts.js
LCP-Trail.js
LCP-Video-Candidate.js
LCP.js
webperf-core-web-vitals.toml
webperf-interaction/
scripts/
Forced-Synchronous-Layout.js
Input-Latency-Breakdown.js
Interactions.js
Layout-Shift-Loading-and-Interaction.js
Long-Animation-Frames-Helpers.js
Long-Animation-Frames-Script-Attribution.js
Long-Animation-Frames.js
LongTask.js
Scroll-Performance.js
webperf-interaction.toml
webperf-loading/
scripts/
Back-Forward-Cache.js
Cache-Strategy-Analysis.js
Client-Side-Redirect-Detection.js
Content-Visibility.js
Critical-CSS-Detection.js
CSS-Media-Queries-Analysis.js
Event-Processing-Time.js
FCP.js
Find-Above-The-Fold-Lazy-Loaded-Images.js
Find-Images-With-Lazy-and-Fetchpriority.js
Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js
Find-render-blocking-resources.js
First-And-Third-Party-Script-Info.js
First-And-Third-Party-Script-Timings.js
Fonts-Preloaded-Loaded-and-used-above-the-fold.js
Inline-CSS-Info-and-Size.js
Inline-Script-Info-and-Size.js
JS-Execution-Time-Breakdown.js
Prefetch-Resource-Validation.js
Priority-Hints-Audit.js
Resource-Hints-Validation.js
Resource-Hints.js
Script-Loading.js
Service-Worker-Analysis.js
SSR-Hydration-Data-Analysis.js
TTFB-Resources.js
TTFB-Sub-Parts.js
TTFB.js
Validate-Preload-Async-Defer-Scripts.js
webperf-loading.toml
webperf-media/
scripts/
Image-Element-Audit.js
SVG-Embedded-Bitmap-Analysis.js
Video-Element-Audit.js
webperf-media.toml
webperf-resources/
scripts/
Network-Bandwidth-Connection-Quality.js
webperf-resources.toml
webperf.toml
webperf-core-web-vitals/
CLS.js
INP.js
LCP-Image-Entropy.js
LCP-Subparts.js
LCP-Trail.js
LCP-Video-Candidate.js
LCP.js
webperf-interaction/
Forced-Synchronous-Layout.js
Input-Latency-Breakdown.js
Interactions.js
Layout-Shift-Loading-and-Interaction.js
Long-Animation-Frames-Helpers.js
Long-Animation-Frames-Script-Attribution.js
Long-Animation-Frames.js
LongTask.js
Scroll-Performance.js
webperf-loading/
Back-Forward-Cache.js
Cache-Strategy-Analysis.js
Client-Side-Redirect-Detection.js
Content-Visibility.js
Critical-CSS-Detection.js
CSS-Media-Queries-Analysis.js
Event-Processing-Time.js
FCP.js
Find-Above-The-Fold-Lazy-Loaded-Images.js
Find-Images-With-Lazy-and-Fetchpriority.js
Find-non-Lazy-Loaded-Images-outside-of-the-viewport.js
Find-render-blocking-resources.js
First-And-Third-Party-Script-Info.js
First-And-Third-Party-Script-Timings.js
Fonts-Preloaded-Loaded-and-used-above-the-fold.js
Inline-CSS-Info-and-Size.js
Inline-Script-Info-and-Size.js
JS-Execution-Time-Breakdown.js
Prefetch-Resource-Validation.js
Priority-Hints-Audit.js
Resource-Hints-Validation.js
Resource-Hints.js
Script-Loading.js
Service-Worker-Analysis.js
SSR-Hydration-Data-Analysis.js
TTFB-Resources.js
TTFB-Sub-Parts.js
TTFB.js
Validate-Preload-Async-Defer-Scripts.js
webperf-media/
Image-Element-Audit.js
SVG-Embedded-Bitmap-Analysis.js
Video-Element-Audit.js
webperf-resources/
Network-Bandwidth-Connection-Quality.js
docs/
ARCHITECTURE.md
RELEASING.md
eslint.config.mjs
IMPROVEMENTS.md
lib/
snippets-registry.js
LICENSE
next-sitemap.config.js
next.config.js
package-lock.json
package.json
pages/
_app.js
_meta.json
CLI.mdx
CoreWebVitals/
_meta.json
CLS.mdx
INP.mdx
LCP-Image-Entropy.mdx
LCP-Subparts.mdx
LCP-Trail.mdx
LCP-Video-Candidate.mdx
LCP.mdx
DevTools-Overrides/
_meta.json
Fetch-XHR-Timeline.mdx
index.mdx
index.mdx
Interaction/
_meta.json
Forced-Synchronous-Layout.mdx
Input-Latency-Breakdown.mdx
Interactions.mdx
Layout-Shift-Loading-and-Interaction.mdx
Long-Animation-Frames-Helpers.mdx
Long-Animation-Frames-Script-Attribution.mdx
Long-Animation-Frames.mdx
LongTask.mdx
Scroll-Performance.mdx
Loading/
_meta.json
Back-Forward-Cache.mdx
Cache-Strategy-Analysis.mdx
Client-Side-Redirect-Detection.mdx
... 205 moreFAQ
webperf-snippets is a Claude Code plugin with 12 hand-picked skills for development work, indexed on Flowy. Install it with the command on its page. It includes webperf-core-web-vitals, webperf-interaction, webperf-loading. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is webperf-snippets?
- A curated collection of JavaScript snippets to measure and debug Web Performance directly in your browser's DevTools console.
- How do I install webperf-snippets?
- Run these in Claude Code: npx -y skills add nucliweb/webperf-snippets --agent claude-code. Then prompt normally.
- Does webperf-snippets auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is webperf-snippets free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.