skills.rest
leonardoacosta
leonardoacostaCOMMUNITY
Explore all skills by this author →
GitHub

web-perf

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

Updated Aug 2, 2026
Search Tags:#audit#mcp#chrome devtools#lighthouse#web performance#core web vitals#lcp
One-click install
npx skills add https://github.com/leonardoacosta/agents --skill web-perf-leonardoacosta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/leonardoacosta/agents/tree/main/skills/web-perf
Command: npx skills add https://github.com/leonardoacosta/agents --skill web-perf-leonardoacosta

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires chrome-devtools-mcp.

What problem does it solve? Diagnosing slow page loads and poor Lighthouse scores requires correlating traces, network requests, and code, which is tedious and error-prone when done manually. This Skill provides a structured five-phase audit workflow that measures Core Web Vitals, identifies render-blocking resources and layout shifts, and produces prioritized, quantified recommendations. ## Core Features & Use Cases - Performance Trace Analysis: Runs Chrome DevTools MCP traces and extracts LCP, INP, CLS, FCP, TBT, and Speed Index with good/poor thresholds. - Network & Accessibility Inspection: Detects render-blocking resources, dependency chains, caching gaps, oversized payloads, and WCAG contrast or ARIA issues. - 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 staging site; it navigates to the URL, records a cold-load trace, analyzes insights like LCPBreakdown and CLSCulprits, and returns a prioritized report with specific fixes such as compressing a 450KB hero image to WebP. ## Quick Start Ask the agent to audit the performance of your page at a given 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 audit Core Web Vitals with Chrome DevTools MCP?▼

Navigate to the target URL with navigate_page, then run performance_start_trace with reload enabled to capture cold-load metrics. Use performance_analyze_insight with names like LCPBreakdown and CLSCulprits to extract LCP, CLS, and related metrics.

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

LCP is good under 2.5 seconds, INP under 200 milliseconds, and CLS under 0.1. Values above 4 seconds, 500 milliseconds, and 0.25 respectively are rated poor and need immediate attention.

Why does the performance trace fail or return empty results?▼

Trace failures usually mean the page did not load correctly or the chrome-devtools MCP server is not configured. Verify the page loads with navigate_page first, and confirm the MCP config includes the chrome-devtools server entry.

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

Yes, Phases 1 through 4 (trace, Core Web Vitals, network, accessibility) work on any public URL. Only Phase 5, which analyzes bundler configuration and dead code, requires access to the site's source code.

How do I find render-blocking resources on my page?▼

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

Related Skills

Explore More Software Engineering Skills→
jaypatrickjaypatrick

web-performance-audit

Audit web performance with Chrome DevTools MCP tools and analyze Core Web Vitals.

Community
Advanced
Asymmetric-alAsymmetric-al
417

react-doctor

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

Official
Intermediate
microsoftmicrosoft
2.9k

applicationinsights-web-ts

Initialize Application Insights in TypeScript for web monitoring and error tracking.

Official
Intermediate
coseto6125coseto6125

seo-unlighthouse

Runs Lighthouse audits across every URL on a site via the Unlighthouse CLI.

Community
Intermediate