web-perf

Measure Core Web Vitals and profile resource timing with Chrome DevTools MCP.

5|1|Updated Feb 3, 2026

Search Tags:#audit #web performance #network analysis #Core Web Vitals #LCP #Chrome DevTools MCP #render-blocking

Ready to run

npx skills add https://github.com/charl-kruger/cf-agents --skill web-perf-charl-kruger

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/charl-kruger/cf-agents/tree/main/.agents/skills/web-perf
Command: npx skills add https://github.com/charl-kruger/cf-agents --skill web-perf-charl-kruger

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams diagnose and optimize web page performance by measuring Core Web Vitals, identifying render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps.

Core Features & Use Cases

Core Web Vitals analysis: Measures FCP, LCP, TBT, CLS, and Speed Index to quantify user-perceived performance.
Render-blocking & network analysis: Detects resources that delay first paint and maps request chains to stabilize load times.
Accessibility gaps: Provides snapshots and checks for common accessibility issues to improve usability.
Actionable guidance: Delivers concrete optimization recommendations with estimated impact.

Quick Start

Use the web-perf skill to audit a target URL by navigating to the page, starting a performance trace with reload, and analyzing insights such as LCPBreakdown to identify bottlenecks.

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 like LCP and CLS for a specific URL?▼

Render-blocking resources delay first paint and can be detected by profiling resource timing and mapping network request chains. Analyzing these network dependencies helps stabilize load times by identifying exactly which assets are bottlenecking the initial page render.

Can I use Chrome DevTools to map network dependency chains affecting page load?▼

Yes, you can analyze network dependencies by listing network requests and getting individual request details during a performance trace. This maps out request chains and caching gaps that delay loading, providing actionable guidance to stabilize page load times.

What is the best way to debug slow Largest Contentful Paint on my website?▼

The best way to debug slow Largest Contentful Paint is to generate a performance trace and analyze the LCPBreakdown insight. This isolates the specific elements and network requests causing the bottleneck, delivering concrete optimization recommendations with estimated impact.

Do I need MCP tooling available to measure web performance metrics like Speed Index?▼

Yes, MCP tooling availability is required to measure web performance metrics like Speed Index. The analysis relies on specific commands such as navigate_page, performance_start_trace, and performance_analyze_insight to perform end-to-end profiling and auditing.

Why does my web page experience layout shifts, and how can I identify them?▼

Your web page experiences layout shifts due to dynamically rendered content, quantified as CLS in Core Web Vitals. You can identify them by taking snapshots and running a performance trace to measure CLS, while also checking for common accessibility gaps.