skills.rest
maxentr
maxentrCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-perf

Audit website performance, Core Web Vitals, and network requests using Chrome DevTools traces.

Updated Sep 21, 2026
Search Tags:#chrome devtools#lighthouse#web performance#network analysis#performance audit#core web vitals#lcp
One-click install
npx skills add https://github.com/maxentr/la-cuisine-de-mm --skill web-perf-maxentr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/maxentr/la-cuisine-de-mm/tree/main/.agents/skills/web-perf
Command: npx skills add https://github.com/maxentr/la-cuisine-de-mm --skill web-perf-maxentr

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 codebase configuration, which is time-consuming to do manually. ## Core Features & Use Cases - Performance Trace Analysis: Capture cold-load traces and analyze Core Web Vitals insights such as LCP breakdown, CLS culprits, and render-blocking resources. - Network and Accessibility Audits: Inspect network requests for caching issues, large payloads, and missing preloads, plus flag accessibility gaps from DOM snapshots. - Codebase Analysis: Detect the framework and bundler (Webpack, Vite, Next.js, etc.) and identify tree-shaking, polyfill, and minification opportunities. - 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 specific fixes like compressing an oversized hero image. ## 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 my website?▼

Run a performance trace with page 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 to determine ratings.

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

List network requests filtered by Script and Stylesheet types, then check for JS or CSS in the head without async, defer, or media attributes. The RenderBlocking insight from a performance trace also identifies these directly.

What tools are needed to run a web performance audit?▼

The audit uses Chrome DevTools MCP tools such as navigate_page, performance_start_trace, and performance_analyze_insight. If trace tools are unavailable, partial source and network analysis can still proceed with limitations noted.

Why does my performance trace return empty or fail?▼

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

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

Yes, trace, Core Web Vitals, network, and accessibility phases work on any public URL. Only the codebase analysis phase is skipped, since it requires access to build configuration files like vite.config.ts or webpack.config.js.

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
singhaganeshsinghaganesh

web-performance-optimization

Diagnose and optimize website performance including Core Web Vitals, bundle size, and caching.

Community
Intermediate
jorgegvalenciajorgegvalencia

core-web-vitals

Optimize LCP, INP, and CLS using web-vitals and Chrome DevTools.

Community
Intermediate
mgiffordmgifford
39

ci-cd

Enforce Lighthouse and axe-core accessibility checks in CI pipelines.

Community
Advanced