skills.rest
zomeru
zomeruCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-perf

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires chrome-devtools-mcp.

What problem does it solve? Diagnosing slow page loads and poor Lighthouse scores requires correlating trace data, network requests, and codebase configuration, which is tedious and error-prone when done manually. ## Core Features & Use Cases - Core Web Vitals Measurement: Captures LCP, INP, CLS, FCP, TBT, and Speed Index via Chrome DevTools performance traces with reload-based cold-load analysis. - Network and Rendering Analysis: Identifies render-blocking resources, network dependency chains, missing preloads, caching issues, and oversized payloads. - Codebase Analysis: Detects the framework and bundler (Webpack, Vite, Next.js, etc.) to surface tree-shaking, polyfill, minification, and dead-code issues. - Use Case: Point the skill at a staging URL to get a prioritized report of performance issues with estimated impact, specific fixes, and an accessibility gap summary. ## Quick Start Audit the performance of https://example.com and report the Core Web Vitals with prioritized recommendations.

Frequently Asked Questions about web-perf

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I measure Core Web Vitals for a web page?▼

Core Web Vitals are measured by navigating to the target URL and starting a performance trace with reload enabled to capture cold-load metrics. The trace is then analyzed for LCP, CLS, INP, and related insights using Chrome DevTools performance analysis.

What are good thresholds for LCP, CLS, and INP?▼

LCP is good under 2.5s and poor above 4s. CLS is good under 0.1 and poor above 0.25. INP is good under 200ms and poor above 500ms. TTFB should stay under 800ms for a good rating.

How do I find render-blocking resources on my site?▼

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

Why does the performance trace return empty or fail?▼

Trace failures usually mean the page did not load correctly or the chrome-devtools MCP server is not configured. Verify the page loads with a navigation call first, and confirm the MCP server is present in your configuration before starting.

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

Yes, trace, network, and accessibility analysis work on any public URL. The codebase analysis phase, which inspects bundler configuration, tree-shaking, and polyfills, is skipped when source code access is unavailable.

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
WebDevPeterGriffinWebDevPeterGriffin
38

seo-google

Combine PageSpeed Insights lab metrics with Chrome UX Report field data for SEO workflows.

Community
Advanced
gaiastudio-aigaiastudio-ai
2

gaia-test-a11y

Run automated accessibility tests on deployed web applications with axe-core, pa11y, and Lighthouse.

Official
Advanced