skills.rest
cloudflare
cloudflareOFFICIAL
Explore all skills by this author →
WebsiteGitHub

web-perf

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

2.6k|242|Updated Dec 10, 2025
Search Tags:#accessibility#audit#mcp#web-performance#core-web-vitals#page-speed#render-blocking
One-click install
npx skills add https://github.com/cloudflare/skills --skill web-perf-cloudflare
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-perf
Source: https://github.com/cloudflare/skills/tree/main/skills/web-perf
Command: npx skills add https://github.com/cloudflare/skills --skill web-perf-cloudflare

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams identify and fix performance bottlenecks on web pages by auditing Core Web Vitals with Chrome DevTools MCP.

Core Features & Use Cases

  • Web performance auditing: Measure FCP, LCP, TBT, CLS, and Speed Index to understand page load behavior.
  • Render-blocking analysis: Detect CSS/JS resources delaying first paint and propose optimizations.
  • Network & caching optimization: Analyze resource loading chains and caching headers to reduce latency.
  • Use Case: Example: You want to improve mobile Lighthouse scores and reduce Time to Interactive on a landing page.

Quick Start

Use the web-perf skill to initiate a performance audit on a target URL by calling the MCP workflow commands (navigate_page, performance_start_trace, performance_analyze_insight, list_network_requests, get_network_request, take_snapshot). Provide a URL to begin.

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

Audit Core Web Vitals by running a performance trace on a target URL to measure FCP, LCP, TBT, CLS, and Speed Index. This captures page load behavior across desktop and mobile to identify rendering bottlenecks.

What's the best way to diagnose render-blocking CSS and JS resources delaying first paint?▼

Diagnose render-blocking resources by analyzing network requests and performance insights. This detects CSS and JS assets delaying first paint and proposes prioritization and loading optimizations to speed up rendering.

Do I need Chrome DevTools MCP to analyze page speed and network requests?▼

Yes, web performance auditing requires an MCP-enabled Chrome DevTools workflow. You must use commands like navigate_page, performance_start_trace, and list_network_requests to trace page speed and fetch resource data.

Can I check accessibility gaps and mobile Lighthouse scores during a web performance audit?▼

Yes, you can check accessibility gaps and mobile Lighthouse scores. The audit profiles page speed and rendering behavior across both desktop and mobile experiences while identifying accessibility issues.

How to optimize caching strategies and reduce latency from resource loading chains?▼

Optimize caching strategies by analyzing resource loading chains and caching headers. This evaluates network requests to reduce latency and improve overall page load times for modern sites.

Related Skills

Explore More Data & Analytics Skills→
akornmeierakornmeier
4

chrome-debug

Debug browser UI issues with Chrome DevTools MCP in headless mode.

Community
Advanced
AreteDriverAreteDriver
4

web-performance

Diagnoses website speed issues across Core Web Vitals, bundles, images, and caching.

Community
Intermediate
CivicActionsCivicActions
2

performance-frontend

Audit frontend performance by analyzing Core Web Vitals and render-blocking resources.

Official
Advanced
doanchienthangdevdoanchienthangdev
4

profiling-performance

Run Lighthouse audits and analyze Core Web Vitals for browser performance.

Community
Intermediate