M
MCP.directory

web-perf

by cloudflare
22
0
Source

Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (FCP, LCP, TBT, CLS, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed.

Install

mkdir -p .claude/skills/web-perf && curl -L -o skill.zip "https://mcp.directory/api/skills/download/1094" && unzip -o skill.zip -d .claude/skills/web-perf && rm skill.zip

Installs to .claude/skills/web-perf

About this skill

Web Performance Audit

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

FIRST: Verify MCP Tools Available

Run this before starting. Try calling navigate_page or performance_start_trace. If unavailable, STOP—the chrome-devtools MCP server isn't configured.

Ask the user to add this to their MCP config:

"chrome-devtools": {
  "type": "local",
  "command": ["npx", "-y", "chrome-devtools-mcp@latest"]
}

Key Guidelines

  • Be assertive: Verify claims by checking network requests, DOM, or codebase—then state findings definitively.
  • Verify before recommending: Confirm something is unused before suggesting removal.
  • Quantify impact: Use estimated savings from insights. Don't prioritize changes with 0ms impact.
  • Skip non-issues: If render-blocking resources have 0ms estimated impact, note but don't recommend action.
  • Be specific: Say "compress hero.png (450KB) to WebP" not "optimize images".
  • Prioritize ruthlessly: A site with 200ms LCP and 0 CLS is already excellent—say so.

Quick Reference

TaskTool Call
Load pagenavigate_page(url: "...")
Start traceperformance_start_trace(autoStop: true, reload: true)
Analyze insightperformance_analyze_insight(insightSetId: "...", insightName: "...")
List requestslist_network_requests(resourceTypes: ["Script", "Stylesheet", ...])
Request detailsget_network_request(reqid: <id>)
A11y snapshottake_snapshot(verbose: true)

Workflow

Copy this checklist to track progress:

Audit Progress:
- [ ] Phase 1: Performance trace (navigate + record)
- [ ] Phase 2: Core Web Vitals analysis (includes CLS culprits)
- [ ] Phase 3: Network analysis
- [ ] Phase 4: Accessibility snapshot
- [ ] Phase 5: Codebase analysis (skip if third-party site)

Phase 1: Performance Trace

  1. Navigate to the target URL:

    navigate_page(url: "<target-url>")

  2. Start a performance trace with reload to capture cold-load metrics:

    performance_start_trace(autoStop: true, reload: true)

  3. Wait for trace completion, then retrieve results.

Troubleshooting:

  • If trace returns empty or fails, verify the page loaded correctly with navigate_page first
  • If insight names don't match, inspect the trace response to list available insights

Phase 2: Core Web Vitals Analysis

Use performance_analyze_insight to extract key metrics.

Note: Insight names may vary across Chrome DevTools versions. If an insight name doesn't work, check the insightSetId from the trace response to discover available insights.

Common insight names:

MetricInsight NameWhat to Look For
LCPLCPBreakdownTime to largest contentful paint; breakdown of TTFB, resource load, render delay
CLSCLSCulpritsElements causing layout shifts (images without dimensions, injected content, font swaps)
Render BlockingRenderBlockingCSS/JS blocking first paint
Document LatencyDocumentLatencyServer response time issues
Network DependenciesNetworkRequestsDepGraphRequest chains delaying critical resources

Example:

performance_analyze_insight(insightSetId: "<id-from-trace>", insightName: "LCPBreakdown")

Key thresholds (good/needs-improvement/poor):

  • TTFB: < 800ms / < 1.8s / > 1.8s
  • FCP: < 1.8s / < 3s / > 3s
  • LCP: < 2.5s / < 4s / > 4s
  • INP: < 200ms / < 500ms / > 500ms
  • TBT: < 200ms / < 600ms / > 600ms
  • CLS: < 0.1 / < 0.25 / > 0.25
  • Speed Index: < 3.4s / < 5.8s / > 5.8s

Phase 3: Network Analysis

List all network requests to identify optimization opportunities:

list_network_requests(resourceTypes: ["Script", "Stylesheet", "Document", "Font", "Image"])

Look for:

  1. Render-blocking resources: JS/CSS in <head> without async/defer/media attributes
  2. Network chains: Resources discovered late because they depend on other resources loading first (e.g., CSS imports, JS-loaded fonts)
  3. Missing preloads: Critical resources (fonts, hero images, key scripts) not preloaded
  4. Caching issues: Missing or weak Cache-Control, ETag, or Last-Modified headers
  5. Large payloads: Uncompressed or oversized JS/CSS bundles
  6. Unused preconnects: If flagged, verify by checking if ANY requests went to that origin. If zero requests, it's definitively unused—recommend removal. If requests exist but loaded late, the preconnect may still be valuable.

For detailed request info:

get_network_request(reqid: <id>)

Phase 4: Accessibility Snapshot

Take an accessibility tree snapshot:

take_snapshot(verbose: true)

Flag high-level gaps:

  • Missing or duplicate ARIA IDs
  • Elements with poor contrast ratios (check against WCAG AA: 4.5:1 for normal text, 3:1 for large text)
  • Focus traps or missing focus indicators
  • Interactive elements without accessible names

Phase 5: Codebase Analysis

Skip if auditing a third-party site without codebase access.

Analyze the codebase to understand where improvements can be made.

Detect Framework & Bundler

Search for configuration files to identify the stack:

ToolConfig Files
Webpackwebpack.config.js, webpack.*.js
Vitevite.config.js, vite.config.ts
Rolluprollup.config.js, rollup.config.mjs
esbuildesbuild.config.js, build scripts with esbuild
Parcel.parcelrc, package.json (parcel field)
Next.jsnext.config.js, next.config.mjs
Nuxtnuxt.config.js, nuxt.config.ts
SvelteKitsvelte.config.js
Astroastro.config.mjs

Also check package.json for framework dependencies and build scripts.

Tree-Shaking & Dead Code

  • Webpack: Check for mode: 'production', sideEffects in package.json, usedExports optimization
  • Vite/Rollup: Tree-shaking enabled by default; check for treeshake options
  • Look for: Barrel files (index.js re-exports), large utility libraries imported wholesale (lodash, moment)

Unused JS/CSS

  • Check for CSS-in-JS vs. static CSS extraction
  • Look for PurgeCSS/UnCSS configuration (Tailwind's content config)
  • Identify dynamic imports vs. eager loading

Polyfills

  • Check for @babel/preset-env targets and useBuiltIns setting
  • Look for core-js imports (often oversized)
  • Check browserslist config for overly broad targeting

Compression & Minification

  • Check for terser, esbuild, or swc minification
  • Look for gzip/brotli compression in build output or server config
  • Check for source maps in production builds (should be external or disabled)

Output Format

Present findings as:

  1. Core Web Vitals Summary - Table with metric, value, and rating (good/needs-improvement/poor)
  2. Top Issues - Prioritized list of problems with estimated impact (high/medium/low)
  3. Recommendations - Specific, actionable fixes with code snippets or config changes
  4. Codebase Findings - Framework/bundler detected, optimization opportunities (omit if no codebase access)

More by cloudflare

View all →

wrangler

cloudflare

Cloudflare Workers CLI for deploying, developing, and managing Workers, KV, R2, D1, Vectorize, Hyperdrive, Workers AI, Containers, Queues, Workflows, Pipelines, and Secrets Store. Load before running wrangler commands to ensure correct syntax and best practices.

22

cloudflare

cloudflare

Comprehensive Cloudflare platform skill covering Workers, Pages, storage (KV, D1, R2), AI (Workers AI, Vectorize, Agents SDK), networking (Tunnel, Spectrum), security (WAF, DDoS), and infrastructure-as-code (Terraform, Pulumi). Use for any Cloudflare development task.

210

session-execution

cloudflare

Use when working on or reviewing session execution, command handling, shell state, FIFO-based streaming, or stdout/stderr separation. Relevant for session.ts, command handlers, exec/execStream, or anything involving shell process management. (project)

180

sandbox-sdk

cloudflare

Build sandboxed applications for secure code execution. Load when building AI code execution, code interpreters, CI/CD systems, interactive dev environments, or executing untrusted code. Covers Sandbox SDK lifecycle, commands, files, code interpreter, and preview URLs.

40

building-mcp-server-on-cloudflare

cloudflare

Builds remote MCP (Model Context Protocol) servers on Cloudflare Workers with tools, OAuth authentication, and production deployment. Generates server code, configures auth providers, and deploys to Workers. Use when: user wants to "build MCP server", "create MCP tools", "remote MCP", "deploy MCP", add "OAuth to MCP", or mentions Model Context Protocol on Cloudflare. Also triggers on "MCP authentication" or "MCP deployment".

230

You might also like

flutter-development

aj-geddes

Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.

286790

drawio-diagrams-enhanced

jgtolentino

Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.

212415

godot

bfollington

This skill should be used when working on Godot Engine projects. It provides specialized knowledge of Godot's file formats (.gd, .tscn, .tres), architecture patterns (component-based, signal-driven, resource-based), common pitfalls, validation tools, code templates, and CLI workflows. The `godot` command is available for running the game, validating scripts, importing resources, and exporting builds. Use this skill for tasks involving Godot game development, debugging scene/resource files, implementing game systems, or creating new Godot components.

209292

nano-banana-pro

garg-aayush

Generate and edit images using Google's Nano Banana Pro (Gemini 3 Pro Image) API. Use when the user asks to generate, create, edit, modify, change, alter, or update images. Also use when user references an existing image file and asks to modify it in any way (e.g., "modify this image", "change the background", "replace X with Y"). Supports both text-to-image generation and image-to-image editing with configurable resolution (1K default, 2K, or 4K for high resolution). DO NOT read the image file first - use this skill directly with the --input-image parameter.

218234

ui-ux-pro-max

nextlevelbuilder

"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."

171200

rust-coding-skill

UtakataKyosui

Guides Claude in writing idiomatic, efficient, well-structured Rust code using proper data modeling, traits, impl organization, macros, and build-speed best practices.

165173

Stay ahead of the MCP ecosystem

Get weekly updates on new skills and servers.