skills.rest
jpmoya
jpmoyaCOMMUNITY
Explore all skills by this author →
GitHub

web-perf

Audit website performance, Core Web Vitals, and network requests using Chrome DevTools traces.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Diagnosing slow page loads and poor Lighthouse scores requires correlating traces, network requests, and codebase configuration, which is tedious to do manually. This Skill provides a structured five-phase audit workflow that turns raw performance data into prioritized, quantified fixes. ## Core Features & Use Cases - Performance Trace Analysis: Captures cold-load traces via Chrome DevTools MCP and extracts Core Web Vitals insights like LCP breakdowns and CLS culprits. - Network & Accessibility Review: Lists network requests to find render-blocking resources, missing preloads, and caching issues, plus flags accessibility gaps from DOM snapshots. - Codebase Analysis: Detects your framework and bundler (Webpack, Vite, Next.js, etc.) to identify tree-shaking, polyfill, and minification opportunities. - Use Case: Point it at a staging URL with a poor Lighthouse score; it runs a trace, identifies that an uncompressed 450KB hero image is delaying LCP, and recommends converting it to WebP with estimated savings. ## Quick Start Audit the performance of https://example.com and give me a prioritized list of Core Web Vitals issues with specific fixes.

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 for my website?▼

Run a performance trace with Chrome DevTools MCP using performance_start_trace with reload enabled, then analyze insights like LCPBreakdown and CLSCulprits. Compare results against thresholds: LCP under 2.5s, CLS under 0.1, and INP under 200ms are rated good.

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

List network requests filtered by Script and Stylesheet 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 identifies these with estimated time impact.

What tools measure Lighthouse performance scores?▼

Chrome DevTools MCP provides trace-based performance analysis with the same metrics Lighthouse uses, including LCP, FCP, TBT, CLS, and Speed Index. Score weights and thresholds are documented in the Chrome Lighthouse performance scoring docs.

Does this work without Chrome DevTools MCP installed?▼

Source and network analysis can still proceed, but trace-based measurements like LCP breakdowns cannot be collected without the MCP tools. Setup uses npx with the chrome-devtools-mcp package, configured in your client's MCP server settings.

Why does performance_analyze_insight fail with my insight name?▼

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

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
JoaoPedroAmaralJoaoPedroAmaral

web-performance-optimization

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

Community
Intermediate
soloamentesoloamente

performance-optimization

Diagnose web performance bottlenecks and apply targeted optimizations for Core Web Vitals.

Community
Advanced
ShiplightAIShiplightAI

verify

Automate browser-based UI verification with Shiplight MCP tools.

Official
Intermediate