webperf

Web 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.

Jump to install

Repository: nucliweb/webperf-snippets
Last source activity: April 30, 2026 at 09:14
Detected SKILL.md language: English
Stars: 1,443
Forks: 86

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/nucliweb/webperf-snippets --skill webperf

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

webperf-core-web-vitals

Intelligent 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 interaction), INP debugging (latency breakdown + attribution), and cross-skill integration with loading, interaction, and media skills. Use when the user asks about Core Web Vitals, LCP optimization, layout shifts, or interaction responsiveness. Compatible with Chrome DevTools MCP.

2026-06-13

webperf-interaction

Intelligent 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 correlate layout shifts with interactions. Features workflows for complete interaction audit, third-party script impact analysis, and animation performance debugging. Cross-skill integration with Core Web Vitals (INP/CLS correlation) and Loading (script execution analysis). Use when the user asks about slow interactions, janky scrolling, unresponsive pages, or INP optimization. Compatible with Chrome DevTools MCP.

2026-06-13

webperf-loading

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.

2026-06-13

View all from this repository

name	webperf
description	Web 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.
context	fork
license	MIT
metadata	{"author":"Joan Leon \| @nucliweb","version":"1.2.0","mcp-server":"chrome-devtools","category":"web-performance","repository":"https://github.com/nucliweb/webperf-snippets"}

WebPerf Snippets Toolkit

A collection of 49 JavaScript snippets for measuring and debugging web performance in Chrome DevTools. Each snippet runs in the browser console and outputs structured, color-coded results.

Quick Reference

Skill	Snippets	Trigger phrases
webperf-core-web-vitals	7	"debug LCP", "slow LCP", "CLS", "layout shifts", "INP", "interaction latency", "responsiveness"
webperf-loading	29	"TTFB", "slow server", "FCP", "render blocking", "font loading", "script loading", "resource hints", "service worker"
webperf-interaction	9	"jank", "scroll performance", "long tasks", "animation frames", "INP debug"
webperf-media	3	"image audit", "lazy loading", "image optimization", "video audit"
webperf-resources	1	"network quality", "bandwidth", "connection type", "save-data"

Workflow

Identify the relevant skill based on the user's question (see Quick Reference above)
Load the skill's skill.md to see available snippets and thresholds
Execute with Chrome DevTools MCP:
- mcp__chrome-devtools__navigate_page → navigate to target URL
- mcp__chrome-devtools__evaluate_script → run the snippet
- mcp__chrome-devtools__get_console_message → read results
Interpret results using the thresholds defined in the skill
Provide actionable recommendations based on findings

webperf

Source facts

Install options

Review the source files

More from this repository

WebPerf Snippets Toolkit

Quick Reference

Workflow

More from this repository

WebPerf Snippets Toolkit

Quick Reference

Workflow