skills.rest
SJLee-0525
SJLee-0525COMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-perf

Audits web performance using Chrome DevTools MCP traces and Core Web Vitals analysis.

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

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 to do manually. This Skill automates that workflow by driving Chrome DevTools MCP to measure Core Web Vitals, find render-blocking resources, and pinpoint concrete fixes. ## Core Features & Use Cases - Performance Tracing: Records cold-load traces and analyzes insights like LCPBreakdown, CLSCulprits, RenderBlocking, and network dependency chains. - Network & Accessibility Analysis: Lists requests to find caching issues, missing preloads, oversized bundles, and flags accessibility gaps via DOM snapshots. - Codebase Analysis: Detects the framework and bundler (Webpack, Vite, Next.js, etc.) to identify tree-shaking, polyfill, and minification opportunities. - Use Case: Ask it to audit your production URL; it returns a Core Web Vitals summary table, prioritized issues with estimated impact, and specific fixes like compressing a named hero image. ## Quick Start Audit the performance of https://example.com and give me prioritized recommendations to improve LCP and CLS.

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. Analyze results with performance_analyze_insight using insight names like LCPBreakdown and CLSCulprits.

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

LCP is good under 2.5s and poor above 4s. CLS is good under 0.1 and poor above 0.25. INP is good under 200ms and poor above 500ms. These thresholds come from web.dev Core Web Vitals documentation.

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 codebase analysis, which detects bundlers and dead code, requires access to the source repository.

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

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

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
huangzidahuangzida
2

performance-optimization

Optimizes application performance by measuring, identifying bottlenecks, and verifying improvements.

Community
Advanced
aramark-destinationsaramark-destinations

quality-audit

Audit page quality across Lighthouse, SEO, and WCAG checks.

Official
Advanced
REVREBELREVREBEL

seo-unlighthouse

Run site-wide Lighthouse audits locally with the Unlighthouse CLI.

Official
Intermediate