Agent skill · elithrar
web-perf
Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals and related lab metrics (FCP, LCP, INP/TBT, CLS, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed.
What it needs
About 5k tokens when loaded.
What this skill does
Web Performance Audit Audit web page performance using Chrome DevTools MCP tools. This skill focuses on Core Web Vitals, network optimization, and high-level accessibility gaps. FIRST: Verify MCP Tools Available Run this before starting. Try calling navigatepage or performancestarttrace. If unavailable, STOP—the chrome-devtools MCP server isn't configured. Ask the user to add this to their MCP config: Key Guidelines Be assertive: Verify claims by checking network requests, DOM, or codebase—then state findings definitively. Verify before recommending: Confirm something is unused before suggesting removal. Quantify impact: Use estimated savings from insights. Don't prioritize changes with 0ms impact. Account for variance: Prefer multiple traces for important conclusions, or state when findings are from a single run. Skip non-issues: If render-blocking resources have 0ms estimated impact, note but don't recommend action. Be specific: Say "compress hero.png (450KB) to WebP" not "optimize images". Prioritize ruthlessly: A site with 200ms LCP and 0 CLS is already excellent—say so. Separate mobile and desktop: Note the tested viewport/device conditions and avoid generalizing across them without evidence. Quick Reference Task Tool Call ------ ----------- Load page navigatepage(url: "...") Start trace performancestarttrace(autoStop: true, reload: true) Analyze insight performanceanalyzeinsight(insightSetId: "...", insightName: "...") List requests listnetworkrequests(resourceTypes: ["Script", "Stylesheet", ...]) Request details getnetworkrequest(reqid: <id>) A11y snapshot takesnapshot(verbose: true) Workflow Copy this checklist to track progress: Phase 1: Performance Trace 1. Navigate to the target URL: 2. Start a performance trace with reload to capture cold-load metrics: 3. Wait for trace completion, then retrieve results. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills elithrar/web-perf