Web performance skill: Cloudflare's Core Web Vitals audit for coding agents

Source: cloudflare/skills · Maintainer: Cloudflare · License: Apache-2.0 · Checked: 23 October 2026

What is the web performance skill?

The web performance skill, named web-perf, teaches a coding agent to audit how fast a page loads: it records a Chrome performance trace, reads Core Web Vitals and Lighthouse metrics, finds render-blocking files and slow request chains, and returns a short list of fixes ranked by impact. It is for developers who want a measured performance review of a site, with the agent looking at both the live page and the code that builds it.

It ships in cloudflare/skills, Cloudflare's own collection, which its README describes as "A collection of Agent Skills for building on Cloudflare, Workers, the Agents SDK, and the wider Cloudflare Developer Platform." Most skills there are about Workers, Durable Objects and Wrangler, but this one works on any site. Its description reads: "Audit, diagnose, or optimize website loading and interaction performance, Core Web Vitals, and Lighthouse performance scores."

As of 23 October 2026, its skills.sh page listed about 108,000 installs, and the repo (about 3,100 stars) was last pushed on 19 October 2026.

What does the web-perf skill do?

The agent loads it when you ask to audit, diagnose or speed up a page, or mention Core Web Vitals or a Lighthouse score.

It distrusts its own memory. The SKILL.md opens by telling the agent that its knowledge of metrics and tooling "may be outdated" and to "Prefer retrieval over pre-training". It names three sources to check: web.dev's Core Web Vitals article, Chrome's DevTools performance docs and Lighthouse's scoring docs.

It checks its tools first. Before anything else, the agent discovers which browser and performance tools it has. If trace tools are missing, it does what it can from source and network data and says which measurements it could not take.

Then it runs a five-phase checklist:

1. Performance trace. navigate_page to the URL, then performance_start_trace with reload, to capture a cold load.
2. Core Web Vitals. performance_analyze_insight with insights such as LCPBreakdown, CLSCulprits, RenderBlocking, DocumentLatency and NetworkRequestsDepGraph. The file lists good, needs-improvement and poor thresholds for TTFB, FCP, LCP, INP, TBT, CLS and Speed Index.
3. Network analysis. list_network_requests to find render-blocking CSS and JS, late-discovered resources, missing preloads, weak Cache-Control headers, oversized bundles and unused preconnects.
4. Accessibility snapshot. take_snapshot for high-level gaps such as missing accessible names or poor contrast.
5. Codebase analysis. Detect the bundler or framework from its config file, then look at tree-shaking, barrel files, heavy libraries, polyfills, minification and compression. It skips this phase for third-party sites.

It has opinions about the report. The guidelines say to quantify impact, skip anything with a 0ms estimated saving, be specific ("compress hero.png (450KB) to WebP" rather than "optimize images") and admit when a site is already fast. The output is a Core Web Vitals table, top issues by impact, concrete recommendations and codebase findings.

What's in the folder: a single SKILL.md, about 8 KB. No scripts or reference files.

How do you install the web performance skill?

Just this skill. The command on its skills.sh page, using the skills CLI:

npx skills add https://github.com/cloudflare/skills --skill web-perf

Add -g to install it for all projects. For Claude Code the folder lands in .claude/skills/web-perf/, or ~/.claude/skills/web-perf/ with -g, the standard Claude Code skill locations.

The Cloudflare plugin. The repo README installs every Cloudflare skill plus Cloudflare's remote MCP server. In Claude Code:

/plugin marketplace add cloudflare/skills
/plugin install cloudflare@cloudflare

In Codex, the README gives codex plugin marketplace add cloudflare/skills then codex plugin add cloudflare@cloudflare. Choose the plugin only if you also build on Cloudflare; otherwise the single skill is lighter. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills.

claude.ai. Zip the web-perf folder and upload it under Customize, then Skills (Claude Help Center). A browser trace needs a local agent, though, so claude.ai can only use the code review parts.

The browser tool. The workflow calls Chrome DevTools MCP tools by name. Its client configuration guide adds it to Claude Code with:

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

The skill also includes a JSON entry (npx -y chrome-devtools-mcp@latest) for clients configured by file, and says the agent should only change MCP settings if you allow it. See Claude Code MCP for how servers are scoped.

How do you use it?

Give the agent a URL and, if you have it, the repo. Example prompts (suggestions, not quotes from the repo):

• Audit the performance of https://staging.example.com and tell me the three fixes with the biggest LCP impact.
• Our CLS jumped after the redesign. Find what shifts on the home page and fix it in the code.
• Run a web-perf audit on localhost:3000/products and check whether our fonts are render-blocking.
• Is the lodash import in this repo hurting bundle size? Verify before you suggest removing anything.

Requirements. Chrome DevTools MCP needs Node.js LTS, current stable Chrome and npm, per its README. The skill itself needs no API keys.

Tips and limits

From the files, not from testing:

• Lab data, not field data. A trace is one controlled page load on your machine. web.dev says to judge Core Web Vitals at the 75th percentile of real page loads, so treat the audit as a diagnosis and check real-user data before declaring victory.
• Load metrics, mostly. INP is in the threshold list, but the trace phase reloads the page and no phase clicks or types, so the measured results are load metrics (TTFB, FCP, LCP, TBT, CLS). TBT is the lab stand-in for responsiveness.
• Insight names drift. The SKILL.md warns that insight names can change between Chrome DevTools versions and tells the agent to read the available names from the trace response.
• Data leaves your machine. The Chrome DevTools MCP README says its performance tools may send trace URLs to Google's CrUX API (turn off with --no-performance-crux) and that Google collects usage statistics by default (--no-usage-statistics opts out). It also exposes browser content to the agent, so don't run it in a profile with personal logins.
• Accessibility is a quick pass only. Phase 4 flags obvious gaps. For a full WCAG review, pair it with the accessibility skill.

Security audits. On 23 October 2026, the skill's skills.sh page showed Pass from Gen Agent Trust Hub and Socket, and Warn from Snyk. The page gives no detail beyond that label. The skill has no scripts, but it does tell the agent to run an MCP server through npx, so read the SKILL.md before installing.

Save it in your Kipt library

In Kipt, open Skills and paste the skill's GitHub folder link into the import box. Kipt reads the SKILL.md; for a repo with many skills, like cloudflare/skills, it shows a list to pick from, so you can take only web-perf. You can also drop the folder or a .zip. Your skills live in your own private GitHub repo and install into Claude Code or Codex with one command:

npx skills add https://github.com/<you>/<repo>.git --all -g

Kipt is not affiliated with Cloudflare.

Similar skills

• Accessibility skill: Addy Osmani's WCAG 2.2 audit. The same repo also has performance and core-web-vitals skills if you prefer one set.
• Playwright CLI skill: drive a browser from the terminal when you need to click through a flow, not just load it.
• Best MCP servers: where Chrome DevTools MCP fits among other browser tools.
• Best Claude Code skills: a wider list to browse.