skills.rest
filippolmt
filippolmtCOMMUNITY
Explore all skills by this author →
GitHub

web-perf

Audit website performance, Core Web Vitals, and Lighthouse scores using Chrome DevTools traces.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires chrome-devtools-mcp.

What problem does it solve? Diagnosing slow page loads and poor Core Web Vitals requires correlating traces, network requests, and bundle configuration, which is tedious and error-prone when done manually. ## Core Features & Use Cases - Performance Trace Analysis: Capture cold-load traces via Chrome DevTools MCP and extract LCP, CLS, TTFB, INP, and render-blocking insights. - Network & Accessibility Audit: Identify render-blocking resources, missing preloads, caching issues, oversized payloads, and accessibility gaps. - Codebase Analysis: Detect the framework and bundler (Webpack, Vite, Next.js, etc.) and flag tree-shaking, polyfill, and minification problems. - Use Case: Point the skill at a staging URL to get a prioritized report of Core Web Vitals ratings, top issues with estimated impact, and concrete fixes like compressing a 450KB hero image to WebP. ## Quick Start Audit the performance of https://example.com and give me a prioritized list of Core Web Vitals issues with specific fixes.

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 a website?▼

Navigate to the target URL, start a performance trace with reload to capture cold-load metrics, then analyze insights like LCPBreakdown and CLSCulprits. Compare results against thresholds such as LCP under 2.5s and CLS under 0.1.

What tools measure LCP, CLS, and INP in Chrome?▼

Chrome DevTools performance traces expose these metrics through insight names like LCPBreakdown and CLSCulprits, accessible via the chrome-devtools-mcp server. Lighthouse scoring documentation provides the metric weights and thresholds.

Does this audit work without Chrome DevTools MCP installed?▼

Trace-based measurements require the chrome-devtools-mcp server, configured via npx chrome-devtools-mcp@latest. Without it, source and network analysis can still proceed, but unmeasurable metrics are explicitly noted.

Why does my performance trace return empty or fail?▼

Traces fail when the page did not load correctly, so verify navigation first with a page load. If insight names do not match, inspect the trace response to discover the available insightSetId and insight names for your Chrome version.

Can it analyze my bundler config for performance issues?▼

Yes, when codebase access exists it detects Webpack, Vite, Rollup, Next.js, and similar tools from config files, then checks tree-shaking, polyfills, minification, and compression settings. This phase is skipped for third-party sites.

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
JoaoPedroAmaralJoaoPedroAmaral

web-performance-optimization

Audit websites with Lighthouse and WebPageTest to optimize Core Web Vitals.

Community
Intermediate
zhenpengLaizhenpengLai

dotnet-webhint

Runs webhint audits for accessibility, performance, security headers, and SEO against .NET frontend sites.

Community
Intermediate
ChegginCheggin
1

performance-benchmark

Measure and enforce web performance budgets with Lighthouse CI.

Community
Advanced