skills.rest
coreyone
coreyoneCOMMUNITY
Explore all skills by this author →
GitHub

web-perf

Audit Core Web Vitals and diagnose render-blocking resources using Chrome DevTools traces.

1|Updated Jun 29, 2026
Search Tags:#audit#chrome devtools#web performance#core web vitals#lcp#render-blocking#cls
One-click install
npx skills add https://github.com/coreyone/software-maestro --skill web-perf-coreyone
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/coreyone/software-maestro/tree/main/quality/web-perf
Command: npx skills add https://github.com/coreyone/software-maestro --skill web-perf-coreyone

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires chrome-devtools-mcp.

What problem does it solve? Web pages often suffer from slow load times, layout shifts, and unoptimized assets, but diagnosing the root cause requires deep knowledge of performance tooling and metrics. This Skill guides a structured audit of Core Web Vitals (LCP, INP, CLS), network requests, and codebase bundler configuration to pinpoint and fix performance bottlenecks. ## Core Features & Use Cases - Performance Trace Analysis: Runs Chrome DevTools MCP traces and analyzes insights like LCPBreakdown, CLSCulprits, and RenderBlocking against official thresholds. - Network & Accessibility Inspection: Lists network requests to find render-blocking resources, missing preloads, caching issues, and takes accessibility snapshots for WCAG contrast and ARIA gaps. - Codebase Optimization Review: Detects the framework and bundler (Webpack, Vite, Next.js, etc.) and checks tree-shaking, polyfills, minification, and compression settings. - Use Case: A developer notices their landing page loads slowly. The Skill runs a trace, finds a 3.8s LCP caused by an unpreloaded hero image and render-blocking CSS, then recommends adding fetchpriority="high" and inlining critical CSS. ## Quick Start Ask the agent to audit your page's Core Web Vitals by providing the target URL, for example: audit https://example.com for LCP, CLS, and render-blocking resources.

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 like LCP and CLS on my website?▼

Run a Chrome DevTools performance trace on the target URL, then analyze insights such as LCPBreakdown and CLSCulprits. Compare results against thresholds: LCP under 2.5s, INP under 200ms, and CLS under 0.1 are rated good.

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

List network requests for scripts and stylesheets, then check for JS/CSS in the head without async, defer, or media attributes. Fix by inlining critical CSS, deferring non-essential scripts, and preloading critical resources like hero images and fonts.

What MCP server is required for Chrome DevTools performance traces?▼

The chrome-devtools MCP server is required, configured with npx -y chrome-devtools-mcp@latest as a local command. Without it, tools like navigate_page and performance_start_trace are unavailable and the audit cannot run.

Does this performance audit work on third-party websites?▼

Yes, trace, network, and accessibility analysis work on any public URL. However, the codebase analysis phase is skipped for third-party sites since it requires access to the source repository and build configuration files.

Why does performance_analyze_insight fail with an unknown insight name?▼

Insight names vary across Chrome DevTools versions. Inspect the trace response to find the insightSetId and list available insights, then retry with a name from that set such as LCPBreakdown or RenderBlocking.

Related Skills

Explore More Software Engineering Skills→
ConsiliencyConsiliency
8

chrome-devtools-debugging

Debug web applications via Chrome DevTools Protocol with console and network inspection.

Official
Advanced
JoaoPedroAmaralJoaoPedroAmaral

web-performance-optimization

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

Community
Intermediate
heaptracetechnologyheaptracetechnology
13

accessibility-audit

Audit web interfaces for WCAG 2.1 AA conformance with automated and manual checks.

Community
Advanced
MathiasPaulenkoMathiasPaulenko

WaveXis Performance Audit

Measure Core Web Vitals and generate Lighthouse reports for web performance auditing.

Community
Advanced