web-perf

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

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/dwhoban/chanfana-vite-kumo --skill web-perf-dwhoban
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/dwhoban/chanfana-vite-kumo/tree/main/.agents/skills/web-perf
Command: npx skills add https://github.com/dwhoban/chanfana-vite-kumo --skill web-perf-dwhoban

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses slow website loading times and poor user experience by diagnosing and providing actionable recommendations for web performance issues.

Core Features & Use Cases

  • Performance Auditing: Measures Core Web Vitals (FCP, LCP, TBT, CLS) and other key performance metrics.
  • Resource Analysis: Identifies render-blocking resources, network dependency chains, and caching inefficiencies.
  • Accessibility Checks: Detects accessibility gaps that can impact user experience.
  • Use Case: When a user reports their website is slow, this Skill can be used to pinpoint the exact bottlenecks, such as large unoptimized images or render-blocking JavaScript, and suggest specific fixes.

Quick Start

Use the web-perf skill to audit the performance of the website at https://example.com.

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 and identify what is slowing down my website?

To diagnose Core Web Vitals and website speed issues, this Skill measures FCP, LCP, TBT, and CLS metrics. It identifies exact bottlenecks like render-blocking JavaScript and network dependency chains, then provides specific optimization recommendations.

What causes layout shifts and render-blocking resources on a web page?

Render-blocking resources and layout shifts stem from unoptimized assets and synchronous scripts. This Skill audits web pages to identify these performance issues, analyzing network dependency chains and caching inefficiencies to suggest specific fixes.

Do I need Chrome DevTools MCP to audit web performance and accessibility?

Yes, auditing web performance and accessibility with this Skill requires Chrome DevTools MCP availability. It depends on Chrome DevTools MCP tools for trace analysis and network request inspection to measure Core Web Vitals and detect accessibility gaps.

Can I check website accessibility gaps alongside performance optimization?

Yes, you can check website accessibility gaps during performance optimization. This Skill detects accessibility issues that impact user experience while simultaneously auditing Core Web Vitals and identifying rendering bottlenecks for web pages.

What is the best way to find network dependency chains causing poor web performance?

The best way to find network dependency chains causing poor web performance is through trace analysis. This Skill inspects network requests via Chrome Devtools MCP to identify dependency chains, caching issues, and render-blocking resources affecting load times.

Why does my website have a slow Largest Contentful Paint and how do I fix it?

A slow Largest Contentful Paint is often caused by render-blocking resources or large unoptimized images. This Skill measures LCP and other Core Web Vitals, pinpointing exact bottlenecks in network requests to provide specific optimization fixes.