skills.rest
mintuz
mintuzCOMMUNITY
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.

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

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 industry-standard thresholds. - Network & Render Analysis: Identifies render-blocking resources, dependency chains, missing preloads, caching issues, and oversized payloads. - Codebase Analysis: Detects your framework and bundler (Webpack, Vite, Next.js, etc.) to find tree-shaking, polyfill, and minification improvements. - Use Case: Ask the agent to audit your staging site before launch; it runs a performance trace, flags a 450KB hero image blocking LCP, and recommends compressing it to WebP with estimated savings. ## Quick Start Audit the performance of https://example.com and give me a prioritized list of fixes with estimated impact.

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 using the chrome-devtools MCP server, then analyze insights like LCPBreakdown and CLSCulprits. The audit measures LCP, INP, CLS, FCP, TBT, and Speed Index against standard good/needs-improvement/poor thresholds.

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 head without async, defer, or media attributes. The RenderBlocking insight from a performance trace also flags these with estimated time impact.

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

The chrome-devtools MCP server is required, configured by adding a local server entry running npx -y chrome-devtools-mcp@latest to your MCP config. Without it, trace and network tools are unavailable.

Why does performance_start_trace return empty results?▼

Empty traces usually mean the page did not load correctly before recording started. Navigate to the target URL first with navigate_page, then start the trace with autoStop and reload enabled to capture cold-load metrics.

Can this audit sites without codebase access?▼

Yes, the trace, Core Web Vitals, network, and accessibility phases work on any public URL. Only the codebase analysis phase, which inspects bundler configs and tree-shaking setup, is skipped for third-party sites.

Related Skills

Explore More Software Engineering Skills→
claughinghouseclaughinghouse

web-perf

Analyze Core Web Vitals and network issues via Chrome DevTools MCP.

Community
Advanced
JoaoPedroAmaralJoaoPedroAmaral

web-performance-optimization

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

Community
Intermediate
elihuvillarauselihuvillaraus
2

ux-researcher

Analyze user behavior and conduct usability testing for design insights.

Community
Advanced
Community-AccessCommunity-Access
387

lighthouse-bridge

Parse Lighthouse CI reports and track accessibility score regressions.

Official
Advanced