skills.rest
MauricioDMO
MauricioDMOCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-perf

Audits web performance using Chrome DevTools MCP to measure Core Web Vitals and identify optimization opportunities.

Updated Oct 30, 2025
Search Tags:#mcp#chrome devtools#lighthouse#web performance#performance audit#core web vitals#page speed
One-click install
npx skills add https://github.com/MauricioDMO/config --skill web-perf-mauriciodmo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/MauricioDMO/config/tree/main/opencode/skills/web-perf
Command: npx skills add https://github.com/MauricioDMO/config --skill web-perf-mauriciodmo

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, traces network behavior, and pinpoints concrete fixes with quantified impact. ## 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 & Render Analysis: Identifies render-blocking resources, dependency chains, missing preloads, caching issues, and oversized payloads. - Codebase Analysis: Detects frameworks and bundlers (Webpack, Vite, Next.js, etc.) to surface tree-shaking, polyfill, and minification opportunities. - Use Case: A developer notices their landing page has a poor Lighthouse score. They run this Skill to trace the page load, discover a 450KB unoptimized hero image blocking LCP, and receive a specific recommendation to convert it to WebP with estimated savings. ## Quick Start Ask the AI to audit the performance of your website URL and report Core Web Vitals with prioritized 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?▼

Use the chrome-devtools MCP server to navigate to your URL and start a performance trace with reload enabled. Then analyze insights like LCPBreakdown and CLSCulprits to get metric values rated against good, needs-improvement, and poor thresholds.

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

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

What MCP server is needed for Chrome DevTools performance tracing?▼

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

What are good thresholds for LCP, CLS, and INP?▼

LCP is good under 2.5 seconds, CLS is good under 0.1, and INP is good under 200 milliseconds. Values between the good and poor boundaries are rated needs-improvement, such as LCP between 2.5 and 4 seconds.

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

Yes, the performance trace, Core Web Vitals, network analysis, and accessibility snapshot phases all work on any public URL. Only the codebase analysis phase, which detects bundlers and dead code, is skipped without repository access.

Why does performance_analyze_insight fail with an unknown insight name?▼

Insight names vary across Chrome DevTools versions, so a hardcoded name may not exist in your trace. Inspect the trace response to list the available insightSetId and insight names, then retry with a name from that list.

Related Skills

Explore More Software Engineering Skills→
ConsiliencyConsiliency
8

chrome-devtools-debugging

Debug web applications via Chrome DevTools Protocol with console and network inspection.

Official
Advanced
JoaoPedroAmaralJoaoPedroAmaral

web-performance-optimization

Audit websites with Lighthouse and WebPageTest to optimize Core Web Vitals.

Community
Intermediate
liauw-medialiauw-media
3

lighthouse-performance-optimization

Run Lighthouse audits through MCP to identify website performance bottlenecks.

Community
Advanced
legioncodeinclegioncodeinc
84

lighthouse-pagespeed-stinger

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

Official
Advanced