skills.rest
kevyder
kevyderCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-perf

Measure Core Web Vitals and identify web performance bottlenecks with Chrome DevTools MCP.

Updated Aug 23, 2026
Search Tags:#performance#audit#profiling#devtools#web#core-web-vitals#network-analysis
One-click install
npx skills add https://github.com/kevyder/thekevshot --skill web-perf-kevyder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/kevyder/thekevshot/tree/main/.agents/skills/web-perf
Command: npx skills add https://github.com/kevyder/thekevshot --skill web-perf-kevyder

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Analyzes and optimizes web performance by measuring Core Web Vitals and related timing metrics using Chrome DevTools MCP, enabling data-driven improvements.

Core Features & Use Cases

  • Measures Core Web Vitals (LCP, CLS, INP) and supplementary metrics (FCP, TBT, Speed Index) to quantify page performance.
  • Identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps for targeted optimizations.
  • Use Case: Audit a homepage or SPA to locate bottlenecks, validate fixes across builds, and guide performance budgets and tooling choices.

Quick Start

Run a full performance audit on your homepage to identify Core Web Vitals bottlenecks, render-blocking resources, and network dependencies.

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 and identify render-blocking resources on my web pages?▼

Web performance audits measure Core Web Vitals like LCP, CLS, and INP using Chrome DevTools MCP to identify render-blocking resources, network dependency chains, and layout shifts for targeted optimizations.

What is the best way to profile a single page application for network dependency chains and layout shifts?▼

Profiling SPAs for network dependency chains and layout shifts involves measuring supplementary metrics like FCP, TBT, and Speed Index to quantify page performance and locate bottlenecks.

Can I use Chrome DevTools to debug caching issues and accessibility gaps during a performance audit?▼

Debugging caching issues and accessibility gaps during performance audits is supported by Chrome DevTools MCP, which traces network dependencies and satisfies accessibility snapshot requirements.

How do I measure Core Web Vitals thresholds to guide performance budgets for my homepage?▼

Measuring Core Web Vitals thresholds quantifies page performance to guide performance budgets and tooling choices, validating fixes across builds by aligning with current metric sources.

Why does my web performance audit show high Total Blocking Time and how do I optimize it?▼

High Total Blocking Time during a web performance audit indicates render-blocking resources or network dependency chains, which you can optimize by targeting those bottlenecks identified through Chrome DevTools MCP.

Does this performance profiling approach work for both static homepages and dynamic web apps?▼

Performance profiling applies across both static homepages and dynamic web apps, measuring Core Web Vitals and related timing metrics to locate bottlenecks and validate fixes across builds.

Related Skills

Explore More Software Engineering Skills→
ylxaiylxai
2

web-perf

Analyze web page performance metrics using Chrome DevTools Metrics Collector Protocol.

Community
Advanced
gabriellpequenogabriellpequeno
8

performance-profiling

Identify performance bottlenecks in web applications using Lighthouse and DevTools traces.

Community
Intermediate
soham2008xyzsoham2008xyz

chrome-devtools

Capture DOM snapshots, console messages, network requests, and performance traces from live Chrome contexts.

Community
Advanced
FabioFioritaFabioFiorita

web-perf

Analyze web page performance with Chrome DevTools MCP to measure Core Web Vitals.

Community
Advanced