skills.rest
nuggocto
nuggoctoCOMMUNITY
Explore all skills by this author →
Website𝕏@nuggoctoGitHub

web-perf

Audits web performance using Chrome DevTools MCP to measure Core Web Vitals and network issues.

5|Updated Jan 31, 2026
Search Tags:#mcp#chrome devtools#lighthouse#web performance#performance audit#core web vitals#page speed
One-click install
npx skills add https://github.com/nuggocto/dotfiles --skill web-perf-nuggocto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/nuggocto/dotfiles/tree/main/opencode/skills/web-perf
Command: npx skills add https://github.com/nuggocto/dotfiles --skill web-perf-nuggocto

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires chrome-devtools-mcp.

What problem does it solve? Diagnosing slow page loads and poor Lighthouse scores requires deep knowledge of performance tooling and metrics. This Skill provides a structured, five-phase audit workflow that measures Core Web Vitals, identifies render-blocking resources, and produces prioritized, quantified recommendations. ## Core Features & Use Cases - Core Web Vitals Measurement: Captures LCP, INP, CLS, FCP, TBT, and Speed Index via Chrome DevTools performance traces with reload-based cold-load analysis. - Network & Rendering Analysis: Detects render-blocking resources, network dependency chains, missing preloads, caching issues, and oversized payloads. - Codebase Analysis: Detects frameworks and bundlers (Webpack, Vite, Next.js, etc.) to find tree-shaking, polyfill, and minification opportunities. - Use Case: Ask the agent to audit your production site; it runs a performance trace, analyzes LCP breakdown and CLS culprits, inspects network requests, and returns a prioritized report with specific fixes like "compress hero.png (450KB) to WebP". ## Quick Start Ask the agent to audit the performance of your website URL and report Core Web Vitals with prioritized optimization recommendations.

Frequently Asked Questions about web-perf

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I measure Core Web Vitals for my website?▼

Run a performance trace with reload enabled to capture cold-load metrics, then analyze insights like LCPBreakdown and CLSCulprits. Good thresholds are LCP under 2.5s, INP under 200ms, and CLS under 0.1.

How to find render-blocking resources on a page?▼

List network requests filtered by Script and Stylesheet types, then check for JS/CSS in the document head without async, defer, or media attributes. The RenderBlocking insight from the performance trace also flags these directly.

What MCP server is required for Chrome DevTools performance audits?▼

The chrome-devtools MCP server is required, configured with the command npx -y chrome-devtools-mcp@latest. Without it, tools like navigate_page and performance_start_trace are unavailable and the audit cannot run.

Why does performance_analyze_insight fail with an unknown insight name?▼

Insight names vary across Chrome DevTools versions. Inspect the trace response to discover the available insightSetId and valid insight names, then retry with a name from that list.

Can I audit a third-party website without codebase access?▼

Yes, the trace, Core Web Vitals, network, and accessibility phases work on any public URL. Only the codebase analysis phase is skipped, since it requires access to build configuration files like webpack.config.js or package.json.

Related Skills

Explore More Software Engineering Skills→
WhaleylawWhaleylaw

chrome-devtools-mcp-specialist

Automate Chrome DevTools Protocol workflows for browser debugging and network capture.

Community
Advanced
Asymmetric-alAsymmetric-al
417

react-doctor

Audit React and Next.js codebases for performance, security, and correctness issues.

Official
Intermediate
qdzshqdzsh
12

core-web-vitals

Audit LCP, INP, and CLS metrics and apply image, CSS, and SSR optimizations.

Community
Advanced
legioncodeinclegioncodeinc
84

lighthouse-pagespeed-stinger

Configures Lighthouse CI and PageSpeed Insights audits with performance budgets and lab-versus-field reconciliation.

Official
Advanced