Agent skill · data analytics · sundial-org
web-perf
Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (FCP, LCP, 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.
Why this skill is useful
Provides specific commands and workflows for analyzing web performance metrics that the AI wouldn't reliably generate on its own.
What it needs
Requires chrome-devtools-mcp installed locally. About 4k tokens when loaded. Last updated 2026-03-07. 639 stars on the source repository.
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. 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. 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. Troubleshooting: If trace returns empty or fails, verify the page loaded correctly with navigatepage first If insight names don't match, inspect the trace response to list available insights Phase 2: Core Web Vitals Analysis Use performanceanalyzeinsight to extract key metrics. Note: Insight names may vary across Chrome DevTools versions. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sundial-org/web-perf