skills.rest
devsanthoshmk
devsanthoshmkCOMMUNITY
Explore all skills by this author →
GitHub

web-perf

Analyze web pages with Chrome DevTools MCP to diagnose Core Web Vitals and network issues.

Updated Jan 4, 2026
Search Tags:#lighthouse#web performance#network analysis#performance debugging#core web vitals#render-blocking#accessibility audit
One-click install
npx skills add https://github.com/devsanthoshmk/MKS-Agency --skill web-perf-devsanthoshmk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/devsanthoshmk/MKS-Agency/tree/main/backend/.agents/skills/web-perf
Command: npx skills add https://github.com/devsanthoshmk/MKS-Agency --skill web-perf-devsanthoshmk

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you pinpoint why a page loads slowly or feels unresponsive by measuring Core Web Vitals, identifying render-blocking dependencies, and highlighting accessibility gaps that can harm user experience.

Core Features & Use Cases

  • Core Web Vitals measurement: Tracks FCP, LCP, TBT, CLS, and Speed Index to quantify performance quality and regressions.
  • Network and critical-path analysis: Detects render-blocking scripts/styles, late-discovered request chains, missing preloads/preconnect opportunities, and caching problems.
  • Accessibility snapshot: Captures an A11y tree snapshot to surface high-level issues like missing accessible names and focus/ARIA problems.
  • Use Case: Troubleshoot a landing page that has poor LCP and layout shift by tracing the exact resource and element causing the delay, then applying targeted fixes.

Quick Start

Audit the URL https://example.com by running the web-perf skill to produce a prioritized report of Core Web Vitals issues, network culprits, and accessibility gaps.

Frequently Asked Questions about web-perf

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

FAQPage Schema
How do I diagnose Core Web Vitals regressions and find what is causing poor LCP?▼

Diagnose Core Web Vitals regressions and poor LCP by navigating to the target URL, running performance traces, and extracting metric insights to pinpoint the exact resource causing the delay.

How do I identify render-blocking resources and critical network dependency chains?▼

Identify render-blocking resources and critical network dependency chains by enumerating network requests to detect late-discovered dependencies, blocking scripts, and missing preloads.

Can I audit accessibility gaps alongside web performance debugging?▼

Yes, you can audit high-level accessibility gaps alongside performance debugging by capturing an A11y tree snapshot to surface missing accessible names and focus or ARIA problems.

What is the best way to troubleshoot a slow-loading landing page with layout shift?▼

The best way to troubleshoot a slow-loading landing page with layout shift is to measure CLS, trace the exact element causing the shift, and apply prioritized recommendations from trace evidence.

Does this web performance analysis approach work without external dependencies?▼

Yes, this web performance analysis approach works without external dependencies, using Chrome DevTools MCP to navigate URLs, run traces, and generate prioritized recommendations from snapshot evidence.

Related Skills

Explore More Software Engineering Skills→
undgundg

web-perf

Analyze Core Web Vitals and performance bottlenecks using Chrome DevTools MCP.

Community
Advanced
cloudflarecloudflare
2.6k

web-perf

Audit web performance and diagnose Core Web Vitals issues using Chrome DevTools MCP.

Official
Advanced
elithrarelithrar
190

web-perf

Analyze and optimize web performance using Chrome DevTools MCP metrics.

Community
Advanced
arroschavesarroschaves
1

web-perf

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

Community
Advanced