Audits web performance via Chrome DevTools MCP: Core Web Vitals (LCP, CLS), render-blocking resources, network chains, layout shifts, caching, accessibility gaps. For page load optimization and Lighthouse scores.
npx claudepluginhub fcakyon/claude-codex-settings --plugin web-performance-skillsThis skill uses the workspace's default tool permissions.
Your knowledge of web performance metrics, thresholds, and tooling APIs may be outdated. **Prefer retrieval over pre-training** when citing specific numbers or recommendations.
Analyzes Core Web Vitals (LCP, INP, CLS) and web metrics using Chrome DevTools MCP: render-blocking resources, network chains, layout shifts, caching, accessibility gaps. For page speed audits and Lighthouse optimization.
Audits web page performance using Chrome DevTools MCP: measures Core Web Vitals (FCP, LCP, TBT, CLS, Speed Index), identifies render-blocking resources, network chains, layout shifts, caching issues, accessibility gaps. Invoke for load audits, Lighthouse scores, site speed optimization.
Guides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools. Use this skill whenever the user asks about LCP performance, slow page loads, Core Web Vitals optimization, or wants to understand why their page's main content takes too long to appear. Also use when the user mentions "largest contentful paint", "page load speed", "CWV", or wants to improve how fast their hero image or main content renders.
Share bugs, ideas, or general feedback.
Your knowledge of web performance metrics, thresholds, and tooling APIs may be outdated. Prefer retrieval over pre-training when citing specific numbers or recommendations.
| Source | How to retrieve | Use for |
|---|---|---|
| web.dev | https://web.dev/articles/vitals | Core Web Vitals thresholds, definitions |
| Chrome DevTools docs | https://developer.chrome.com/docs/devtools/performance | Tooling APIs, trace analysis |
| Lighthouse scoring | https://developer.chrome.com/docs/lighthouse/performance/performance-scoring | Score weights, metric thresholds |
Run this before starting. Try calling navigate_page or performance_start_trace. If unavailable, STOP—the chrome-devtools MCP server isn't configured.
Ask the user to add this to their MCP config:
"chrome-devtools": {
"type": "local",
"command": ["npx", "-y", "chrome-devtools-mcp@latest"]
}
| Task | Tool Call |
|---|---|
| Load page | navigate_page(url: "...") |
| Start trace | performance_start_trace(autoStop: true, reload: true) |
| Analyze insight | performance_analyze_insight(insightSetId: "...", insightName: "...") |
| List requests | list_network_requests(resourceTypes: ["Script", "Stylesheet", ...]) |
| Request details | get_network_request(reqid: <id>) |
| A11y snapshot | take_snapshot(verbose: true) |
Copy this checklist to track progress:
Audit Progress:
- [ ] Phase 1: Performance trace (navigate + record)
- [ ] Phase 2: Core Web Vitals analysis (includes CLS culprits)
- [ ] Phase 3: Network analysis
- [ ] Phase 4: Accessibility snapshot
- [ ] Phase 5: Codebase analysis (skip if third-party site)
Navigate to the target URL:
navigate_page(url: "<target-url>")
Start a performance trace with reload to capture cold-load metrics:
performance_start_trace(autoStop: true, reload: true)
Wait for trace completion, then retrieve results.
Troubleshooting:
navigate_page firstUse performance_analyze_insight to extract key metrics.
Note: Insight names may vary across Chrome DevTools versions. If an insight name doesn't work, check the insightSetId from the trace response to discover available insights.
Common insight names:
| Metric | Insight Name | What to Look For |
|---|---|---|
| LCP | LCPBreakdown | Time to largest contentful paint; breakdown of TTFB, resource load, render delay |
| CLS | CLSCulprits | Elements causing layout shifts (images without dimensions, injected content, font swaps) |
| Render Blocking | RenderBlocking | CSS/JS blocking first paint |
| Document Latency | DocumentLatency | Server response time issues |
| Network Dependencies | NetworkRequestsDepGraph | Request chains delaying critical resources |
Example:
performance_analyze_insight(insightSetId: "<id-from-trace>", insightName: "LCPBreakdown")
Key thresholds (good/needs-improvement/poor):
List all network requests to identify optimization opportunities:
list_network_requests(resourceTypes: ["Script", "Stylesheet", "Document", "Font", "Image"])
Look for:
<head> without async/defer/media attributesCache-Control, ETag, or Last-Modified headersFor detailed request info:
get_network_request(reqid: <id>)
Take an accessibility tree snapshot:
take_snapshot(verbose: true)
Flag high-level gaps:
Skip if auditing a third-party site without codebase access.
Analyze the codebase to understand where improvements can be made.
Search for configuration files to identify the stack:
| Tool | Config Files |
|---|---|
| Webpack | webpack.config.js, webpack.*.js |
| Vite | vite.config.js, vite.config.ts |
| Rollup | rollup.config.js, rollup.config.mjs |
| esbuild | esbuild.config.js, build scripts with esbuild |
| Parcel | .parcelrc, package.json (parcel field) |
| Next.js | next.config.js, next.config.mjs |
| Nuxt | nuxt.config.js, nuxt.config.ts |
| SvelteKit | svelte.config.js |
| Astro | astro.config.mjs |
Also check package.json for framework dependencies and build scripts.
mode: 'production', sideEffects in package.json, usedExports optimizationtreeshake optionsindex.js re-exports), large utility libraries imported wholesale (lodash, moment)content config)@babel/preset-env targets and useBuiltIns settingcore-js imports (often oversized)browserslist config for overly broad targetingterser, esbuild, or swc minificationPresent findings as: