skills.rest
baskarajati
baskarajatiCOMMUNITY
Explore all skills by this author →
GitHub

web-perf

Measure Core Web Vitals and identify render-blocking resources via Chrome DevTools MCP.

Updated Jan 2, 2026
Search Tags:#accessibility#chrome-devtools#web-performance#core-web-vitals#network-analysis#performance-audit
One-click install
npx skills add https://github.com/baskarajati/undangan --skill web-perf-baskarajati
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/baskarajati/undangan/tree/main/.agent/skills/web-perf
Command: npx skills add https://github.com/baskarajati/undangan --skill web-perf-baskarajati

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audit web page performance using Chrome DevTools MCP tools. It focuses on Core Web Vitals, network optimization, and high-level accessibility gaps.

Core Features & Use Cases

  • Core Web Vitals analysis: measure FCP, LCP, CLS, TBT, and Speed Index; identify render-blocking resources and network bottlenecks.
  • Network & Accessibility insights: map dependency chains, caching issues, and accessibility gaps to actionable improvements.
  • Use Case: Imagine optimizing a slow landing page; this skill guides tracing, analysis, and optimization recommendations.

Quick Start

Navigate to the target URL and start a performance trace to capture cold-load metrics.

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 specific URL?▼

Measure Core Web Vitals by navigating to the target URL and starting a performance trace to capture cold-load metrics like FCP, LCP, CLS, TBT, and Speed Index. This identifies render-blocking resources and network bottlenecks.

Do I need a Chrome DevTools MCP server to run a web performance audit?▼

Yes, running a web performance audit requires a configured Chrome DevTools MCP server with the ability to execute navigate_page and performance_start_trace commands to capture live page metrics.

What's the best way to identify render-blocking resources and network bottlenecks?▼

The best way to identify render-blocking resources and network bottlenecks is to run a live performance audit that maps dependency chains and caching issues to actionable improvements.

Can I analyze accessibility gaps during a web performance audit?▼

Yes, you can analyze accessibility gaps during a web performance audit. The process maps network dependency chains and caching issues while simultaneously identifying high-level accessibility gaps.

How does network analysis improve page speed optimization?▼

Network analysis improves page speed optimization by mapping dependency chains and caching behavior, which helps identify bottlenecks in load performance and provides actionable network optimization recommendations.

Related Skills

Explore More Software Engineering Skills→
warpdotdevwarpdotdev
820

web-performance-audit

Audit web page performance with Chrome DevTools MCP traces and Core Web Vitals.

Official
Advanced
daveiodaveio

web-perf

Measure Core Web Vitals and detect render-blocking resources with Chrome DevTools MCP.

Community
Intermediate
HieubkavHieubkav

web-performance-audit

Measure Core Web Vitals and identify web performance bottlenecks.

Community
Advanced
aroidoaroido

Web Vitals Monitoring Skill

Measure Core Web Vitals and enforce performance budgets in CI/CD pipelines.

Official
Advanced