New to Claude Skills? Learn how to install them →

Get Claude Skills
cloudflare on GitHub

Web Performance Audit

OfficialFree

Optimize your website's speed and accessibility metrics.

by cloudflare2.6k stars on cloudflare/skills
6 views
Updated Aug 7, 2026
Get this skill

Free · Opens the source repo

What Web Performance Audit does

The Web Performance Audit skill provides developers and designers with a comprehensive tool to analyze and enhance the performance of web pages. By utilizing Chrome DevTools MCP, this skill measures essential metrics such as Core Web Vitals (LCP, INP, CLS) alongside supplementary metrics like FCP, TBT, and Speed Index. It identifies critical issues including render-blocking resources, network dependency chains, layout shifts, caching problems, and accessibility gaps, making it a valuable resource for anyone looking to improve their site's performance and user experience.

This skill is particularly useful when you need to audit, profile, debug, or optimize page load performance, Lighthouse scores, or overall site speed. The skill encourages users to retrieve the latest information from current documentation, ensuring that the metrics and recommendations are up-to-date. By following a structured workflow, users can systematically address performance issues, from initial page loading to detailed network analysis and accessibility checks.

The skill's workflow is divided into five phases, starting with performance tracing and advancing through Core Web Vitals analysis, network analysis, accessibility snapshots, and codebase analysis. Each phase includes specific commands to execute, ensuring that users can effectively track their progress and address identified issues. This structured approach allows for a thorough examination of a website's performance, leading to actionable insights that can significantly enhance user experience.

Whether you're a developer optimizing a new application or a designer ensuring your site meets performance standards, this skill provides the tools and guidance needed to make informed decisions about web performance improvements.

When to use it

Use this skill when you need to analyze web performance metrics, optimize site speed, or improve accessibility.

When not to use it

This skill may not be suitable for simple websites with minimal performance concerns or for users unfamiliar with web development concepts.

What you can build with it

Auditing a New Web Application

Use this skill to perform a comprehensive performance audit on a newly developed web application to ensure it meets speed and accessibility standards.

Improving an Existing Site's Performance

Apply this skill to identify and resolve performance bottlenecks on an existing website, enhancing user experience and SEO.

Conducting Accessibility Checks

Utilize the accessibility snapshot feature to ensure your website complies with accessibility standards, improving usability for all users.

How to install Web Performance Audit

View source

1. Install with the skills CLI

npx skills add cloudflare/skills/web-perf --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by cloudflare

Web Performance Audit

Your knowledge of web performance metrics, thresholds, and tooling APIs may be outdated. Prefer retrieval over pre-training when citing specific numbers or recommendations.

Retrieval Sources

SourceHow to retrieveUse for
web.devhttps://web.dev/articles/vitalsCore Web Vitals thresholds, definitions
Chrome DevTools docshttps://developer.chrome.com/docs/devtools/performanceTooling APIs, trace analysis
Lighthouse scoringhttps://developer.chrome.com/docs/lighthouse/performance/performance-scoringScore weights, metric thresholds

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)

Frequently asked questions about Web Performance Audit

Similar skills

Heap Snapshot Analysis

Investigate V8 heap snapshots for memory issues.

VS Code Performance Workflow

Automate performance investigations in VS Code.

Memory Leak Audit

Prevent memory leaks with effective coding patterns.

CPU Profile Analysis

Analyze V8 and Chrome performance profiles for optimization.

Chat Performance Testing

Benchmark and validate chat UI performance in VS Code.

Vercel React Best Practices

Optimize your React and Next.js applications for performance.