web-perf

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

Updated Nov 23, 2024
One-click install
npx skills add https://github.com/tokisakiyuu/dotfiles --skill web-perf-tokisakiyuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/tokisakiyuu/dotfiles/tree/main/home/dot_claude/skills/web-perf
Command: npx skills add https://github.com/tokisakiyuu/dotfiles --skill web-perf-tokisakiyuu

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 and error-prone when done manually. This Skill automates the audit workflow so you get prioritized, quantified findings instead of guesswork. ## Core Features & Use Cases - Core Web Vitals Measurement: Captures LCP, INP, CLS, FCP, TBT, and Speed Index via Chrome DevTools performance traces with good/needs-improvement/poor ratings. - Network & Render Analysis: Detects 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.) and flags tree-shaking, polyfill, minification, and dead-code issues. - Use Case: Ask it to audit your staging site; it runs a trace, reports that the hero image delays LCP by 1.2s and a render-blocking script adds 400ms, then recommends specific fixes with estimated savings. ## Quick Start Audit the performance of https://example.com and tell me the top issues affecting my Core Web Vitals.

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 for my website?▼

Run a performance trace with Chrome DevTools MCP using performance_start_trace, then analyze insights like LCPBreakdown and CLSCulprits. The audit reports each metric against standard thresholds such as LCP under 2.5s and CLS under 0.1.

How to find render-blocking resources on a page?▼

List network requests filtered by Script and Stylesheet types, then check for resources in the head without async, defer, or media attributes. The RenderBlocking insight from the trace also quantifies their estimated impact in milliseconds.

What MCP server is needed for Chrome DevTools performance tracing?▼

The chrome-devtools MCP server is required, configured with the command npx -y chrome-devtools-mcp@latest. Without it, trace and network tools like navigate_page and performance_start_trace are unavailable.

Why does performance_start_trace return empty results?▼

Empty traces usually mean the page did not load correctly before recording started. Verify the page loads with navigate_page first, and check the trace response for the insightSetId to discover which insight names are available.

Can this audit a third-party site without codebase access?▼

Yes, trace, network, and accessibility analysis work on any public URL. Only the codebase analysis phase is skipped, since framework detection and bundler review require access to config files and package.json.