skills.rest
Aki2022
Aki2022COMMUNITY
Explore all skills by this author →
GitHub

web-perf

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

Updated Dec 9, 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/Aki2022/skills --skill web-perf-aki2022
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/Aki2022/skills/tree/main/web-perf
Command: npx skills add https://github.com/Aki2022/skills --skill web-perf-aki2022

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 metrics, trace analysis, and network behavior. This Skill automates the full audit workflow, turning raw Chrome DevTools traces into prioritized, actionable fixes. ## Core Features & Use Cases - Core Web Vitals Measurement: Captures LCP, INP, CLS, FCP, TBT, and Speed Index via automated performance traces with reload, then rates each against current thresholds. - Network & Render Analysis: Identifies render-blocking resources, network 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 opportunities. - Use Case: Ask for an audit of your staging site and receive a prioritized report—e.g., "compress hero.png (450KB) to WebP"—with estimated impact for each fix. ## 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 measure Core Web Vitals for my website?▼

Run a performance trace with reload using Chrome DevTools MCP, then analyze insights like LCPBreakdown and CLSCulprits. This gives you LCP, CLS, FCP, TBT, and Speed Index values rated against 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 audits?▼

You need the chrome-devtools MCP server, configured with npx chrome-devtools-mcp@latest as a local command. 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 find the insightSetId and list available insights, then retry with a name from that set.

Can this audit a third-party website I don't own?▼

Yes, trace, network, and accessibility analysis work on any public URL. Only the codebase analysis phase is skipped, since it requires access to the site's source files and build configuration.

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
wyre-technologywyre-technology
39

Datto RMM Device Management

List, search, update, and monitor Datto RMM devices via the API.

Official
Intermediate
ShiplightAIShiplightAI

verify

Automate browser-based UI verification with Shiplight MCP tools.

Official
Intermediate