Official agent skill

Web Perf

by cloudflare in cloudflare/skills

Audit, diagnose, or optimize website loading and interaction performance, Core Web Vitals, and Lighthouse performance scores.

OfficialApache-2.0Auto-check passedFrontend & Design

Install Web Perf

skills CLI
$ npx skills add cloudflare/skills --skill web-perf -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install cloudflare/skills web-perf --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/cloudflare/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/web-perf .claude/skills/web-perf && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
web-perf
GitHub stars
3k
Used in
3 other repos
Token cost
~2.1k tokens
SKILL.md length
836 words
Files
1
Skills in repo
16
Repo updated
First seen
Licence
Apache-2.0

At a glance

Audit, diagnose, or optimize website loading and interaction performance, Core Web Vitals, and Lighthouse performance scores.

  • Works in 4 steps: Performance Trace → Core Web Vitals Analysis → Network Analysis → …
  • Tasks that involve Web performance
  • SKILL.md covers Retrieval Sources, FIRST: Verify MCP Tools…, Key Guidelines and Quick Reference, plus 3 more sections
  • Reaches developer.chrome.com and web.dev

What it does

Web Perf is an agent skill from cloudflare/skills, published by the product's own GitHub organization. Audit, diagnose, or optimize website loading and interaction performance, Core Web Vitals, and Lighthouse performance scores.

Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Web performance. The repository describes itself as: Skills for teaching agents how to build on Cloudflare. The licence is Apache-2.0.

When your agent uses it

  • Tasks that involve Web performance

Example prompts

  • “/web-perf”

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Performance Trace
  2. Core Web Vitals Analysis
  3. Network Analysis
  4. Accessibility Snapshot

What it can do on your machine

Read from SKILL.md and the folder at commit 41e0d19. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are json).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • developer.chrome.com
    • web.dev

    Also links to:

    • github.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Web Perf loads about 2.1k tokens when it runs. Until then it costs about 34 tokens; SKILL.md has 836 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~34
When it runs · the whole SKILL.md, loaded when a task matches
~2.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from cloudflare/skills at commit 41e0d19, republished under its Apache-2.0 licence (© cloudflare). 836 words, ~2,064 tokens.

Download SKILL.mdSave it as .claude/skills/web-perf/SKILL.md (or your agent's skills folder).
name
web-perf
description
Audit, diagnose, or optimize website loading and interaction performance, Core Web Vitals, and Lighthouse performance scores.

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

Discover available browser and performance tools before starting. Use the capabilities available for the requested audit. If trace tools are unavailable, continue any useful source or network analysis and state which measurements could not be collected.

If the user wants Chrome DevTools MCP setup, consult its installation guide and use the latest package version. Only change MCP configuration when setup is within the user's authorized scope; otherwise ask first. For clients using command and args, an example server entry is:

json
"chrome-devtools": {
  "command": "npx",
  "args": ["-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
Show full SKILL.md (392 more words)Show less
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)

© cloudflare, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/web-perf of cloudflare/skills.

Open the folder on GitHubat commit 41e0d19

Used in 3 other repositories

We found 4 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 3 other GitHub owners. This page covers the copy in cloudflare/skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Web Perf next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Web Perf compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Web Perf this skillcloudflare/skills3k3 repos~2.1kAutomated safety check: PassApache-2.0
React Doctormakeplane/plane60k12 repos~657Automated safety check: PassAGPL-3.0
Fixing Motion Performanceibelick/ui-skills9.4k5 repos~1.4kAutomated safety check: PassMIT
GSAP Performance Tuninggreensock/gsap-skills16k4 repos~1kAutomated safety check: PassMIT
React Frontend Development Guidelinesdiet103/claude-code-infrastructure-showcase10k2 repos~2.9kAutomated safety check: PassMIT
Web Quality Auditaddyosmani/web-quality-skills2.9k—~2.6kAutomated safety check: PassMIT

Similar skills

  • React Doctor

    makeplane/plane

    Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.

    60k GitHub starsUsed in 12 repos~657 tokens
    Frontend & DesignAuto-check passed
  • Fixing Motion Performance

    ibelick/ui-skills

    Audits and fixes web animation performance: layout thrashing, work that belongs on the compositor, scroll-linked motion and costly blur effects.

    9.4k GitHub starsUsed in 5 repos~1.4k tokens
    Frontend & DesignAuto-check passed
  • GSAP Performance Tuning

    greensock/gsap-skills

    Guides the agent to keep GSAP animations smooth by animating transforms and opacity, batching DOM reads and writes, and avoiding layout-heavy properties.

    16k GitHub starsUsed in 4 repos~1k tokens
    Frontend & DesignAuto-check passed
  • React Frontend Development Guidelines

    diet103/claude-code-infrastructure-showcase

    Guidelines for React 18 and TypeScript apps covering Suspense data fetching, lazy loading, feature folders, MUI v7 styling, TanStack Router and performance.

    10k GitHub starsUsed in 2 repos~2.9k tokens
    Frontend & DesignAuto-check passed
  • Web Quality Audit

    addyosmani/web-quality-skills

    Run an evidence-led web quality audit covering performance, accessibility, SEO, best practices, and agentic browsing.

    2.9k GitHub stars~2.6k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed
  • SEO Google

    AgriciDaniel/codex-seo

    Google SEO APIs: Search Console (Search Analytics, URL Inspection, Sitemaps), PageSpeed Insights v5, CrUX field data with 25-week history, Indexing API v3, and GA4 organic traffic.

    787 GitHub starsUsed in 2 repos~3.4k tokens
    Frontend & DesignAuto-check passed

More from cloudflare/skills

All 16 skills in this repo
  • Turnstile Spin

    cloudflare/skills

    Official

    Set up, repair, or migrate to Cloudflare Turnstile bot verification in an existing frontend and backend, including server-side Siteverify.

    3k GitHub starsUsed in 4 repos~7.2k tokens
    Auto-check: notes
  • Nextjs On Cloudflare

    cloudflare/skills

    Official

    Build, migrate, and deploy Next.js apps on Cloudflare Workers with vinext.

    3k GitHub starsUsed in 2 repos~678 tokens
    Auto-check passed
  • Agents SDK

    cloudflare/skills

    Official

    Build, debug, or review Cloudflare Agents SDK applications using the agents package.

    3k GitHub starsUsed in 2 repos~3k tokens
    Auto-check passed
  • Durable Objects

    cloudflare/skills

    Official

    Build, debug, or review Cloudflare Durable Objects code for persistent state and coordination.

    3k GitHub starsUsed in 2 repos~1.5k tokens
    Auto-check passed
  • Sandbox Next

    cloudflare/skills

    Official

    Build or maintain Cloudflare Sandbox apps on @cloudflare/sandbox@next (SDK 1.0 preview).

    3k GitHub starsUsed in 2 repos~1.7k tokens
    Auto-check passed
  • Cloudflare One Migrations

    cloudflare/skills

    Official

    Assess and plan migrations from existing VPN, SWG, or SASE platforms to Cloudflare One, including policy mapping, parity gaps, and rollout.

    3k GitHub starsUsed in 6 repos~3.1k tokens
    Auto-check passed

Questions about Web Perf

What does Web Perf do?

Audit, diagnose, or optimize website loading and interaction performance, Core Web Vitals, and Lighthouse performance scores. Web Perf is an agent skill from cloudflare/skills, published by the product's own GitHub organization. Audit, diagnose, or optimize website loading and interaction performance, Core Web Vitals, and Lighthouse performance scores.

When should I use Web Perf?

Web Perf fits situations like: tasks that involve Web performance.

How do I install Web Perf in Claude Code?

Run `npx skills add cloudflare/skills --skill web-perf -a claude-code`. Or copy the skill folder (skills/web-perf in cloudflare/skills) into .claude/skills/web-perf in your project. Claude Code loads it when a task matches its description.

How do I install Web Perf in Codex?

Run `npx skills add cloudflare/skills --skill web-perf -a codex`. Or copy the skill folder (skills/web-perf in cloudflare/skills) into .agents/skills/web-perf in your project. Codex loads it when a task matches its description.

Can I use Web Perf in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add cloudflare/skills --skill web-perf -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/web-perf, .gemini/skills/web-perf, .github/skills/web-perf and .opencode/skills/web-perf in your project.

What does Web Perf need to run?

SKILL.md names no scripts, command-line tools or credentials: Web Perf is instructions for the agent only.

Does Web Perf access the network?

SKILL.md names 3 domains. In commands or code: developer.chrome.com and web.dev; the agent is likely to contact these when it follows the instructions. As links in the text: github.com. This is read from the text; nothing was executed.

Is Web Perf safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Web Perf use?

Web Perf is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Web Perf use?

About 2.1k tokens (SKILL.md is roughly 8.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Web Perf?

Skills that share tags, products or a category with Web Perf: React Doctor (makeplane/plane, 60k stars), Fixing Motion Performance (ibelick/ui-skills, 9.4k stars), GSAP Performance Tuning (greensock/gsap-skills, 16k stars) and React Frontend Development Guidelines (diet103/claude-code-infrastructure-showcase, 10k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Web Perf?

cloudflare (a GitHub organization, an official publisher) maintains it in cloudflare/skills, which has 2,999 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on October 1, 2026.

Source: cloudflare/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.