Kipt

Performance skill: measure first, then speed up your site with an agent

The performance skill from addyosmani/web-quality-skills has your agent measure field and lab data, trace the page, then fix loading and runtime issues.

By the Kipt team · Updated 24 October 2026

Source: addyosmani/web-quality-skills · Maintainer: community: Addy Osmani · License: MIT · Checked: 24 October 2026

What is the performance skill?

The performance skill teaches a coding agent to speed up a website the measured way: check how real users experience the page, record a browser trace to find the cause, change only the code connected to that bottleneck, and re-measure under the same conditions. It works with Claude Code, Codex, Cursor and other agents that read the SKILL.md format, and it is stack-agnostic.

It is one of six skills in addyosmani/web-quality-skills, which the README calls "An (unofficial) measurement-first collection of Agent Skills for optimizing web projects with Google Lighthouse, Chrome DevTools for agents, Core Web Vitals, WCAG, and search guidance."

The skill's description reads: "Optimize web performance for faster loading and better user experience. Use when asked to "speed up my site", "optimize performance", "reduce load time", "fix slow loading", "improve page speed", or "performance audit"."

As of 24 October 2026, its skills.sh page listed 41.0K installs (snapshot, 24 October 2026).

What does it do?

The SKILL.md sets a four-step loop:

  1. If the page can run, read the measurement workflow and set a field plus lab baseline before editing.
  2. Prioritize poor real-user Core Web Vitals, and use a DevTools trace and its focused insights to find the cause.
  3. Change only the code or assets connected to measured bottlenecks.
  4. Re-run equivalent lab measurements and report before and after values, conditions and uncertainty. Field verification stays pending until new user data arrives.

When nothing can run, the agent still inspects source, but it must call those findings "hypotheses, not measured regressions" and give the command that would verify each one.

What's in the folder:

  • SKILL.md: the loop, a starting budget, and patterns for the critical rendering path, JavaScript, images, fonts, caching, runtime work and third-party scripts.
  • references/MEASUREMENT.md: how to route Chrome DevTools MCP, read CrUX, run repeatable lab comparisons and report evidence.
  • references/RUM.md: how to add first-party real-user monitoring with the web-vitals library.

The main areas it covers:

  • Starting budget. Under 1.5 MB total page weight, 300 KB of compressed JavaScript, 100 KB of compressed CSS, 500 KB of above-the-fold images, 100 KB of fonts and 200 KB of third-party code. The skill says to keep an existing project budget when one exists.
  • Server response. A target of TTFB under 800 ms, Brotli or Gzip compression, HTTP/2 or HTTP/3, edge caching, and Early Hints (HTTP 103) only when a trace shows slow HTML generation.
  • Resource loading. Preconnect to required origins, preload only resources whose late discovery shows in the trace, and prerender likely next pages with the Speculation Rules API.
  • JavaScript and images. Defer non-essential scripts, split code by route or feature, import only what you need, use AVIF or WebP with responsive srcset, and give the LCP image fetchpriority="high".
  • Fonts and caching. font-display, subsetting, variable fonts, and Cache-Control patterns for HTML, hashed assets and API responses.
  • Runtime. Batch DOM reads and writes, debounce scroll handlers, use requestAnimationFrame, virtualize long lists, and load third-party widgets behind facades.

It is strict about evidence. The measurement table marks TBT as "a rough INP proxy, not field INP," and the skill says a raw PerformanceObserver snippet is "not real-user data by themselves." The measurement guide asks for at least three equivalent navigations, reported as a median plus range, before a decision rests on a lab metric.

How do you install it?

This skill plus Core Web Vitals. The skills.sh command installs performance alone. The SKILL.md links to the sibling core-web-vitals skill, and the skills CLI accepts --skill more than once:

npx skills add https://github.com/addyosmani/web-quality-skills --skill performance --skill core-web-vitals

Add -g for all projects, or -a claude-code to target Claude Code. The folders land in .claude/skills/performance/ in your project, or ~/.claude/skills/performance/ with -g, the standard Claude Code skill locations.

All six skills as a Claude Code plugin. From the README:

/plugin marketplace add addyosmani/web-quality-skills
/plugin install web-quality-skills@addy-web-quality-skills

It then appears as /web-quality-skills:performance.

Codex and Gemini CLI. The README gives codex plugin marketplace add addyosmani/web-quality-skills for Codex CLI v0.122 or later (then @performance in chat) and gemini extensions install https://github.com/addyosmani/web-quality-skills. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills.

claude.ai. The README suggests adding the skill to project knowledge or pasting the SKILL.md into a conversation. You can also upload a zipped skill folder, per the Claude Help Center.

Recommended: a trace tool. The skill prefers Chrome DevTools MCP. Its client guide gives this Claude Code command:

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

How do you use it?

Give it a URL it can load and say which page or journey matters.

Example prompts (suggestions, not quotes from the repo):

  • Our pricing page feels slow on mobile. Set a baseline for http://localhost:3000/pricing, then fix the biggest bottleneck.
  • Check this build against your starting performance budget and tell me which resources are over.
  • The dashboard JavaScript is huge. Find what can be split by route without changing behavior.
  • Review our font loading and caching headers. Treat anything you can't measure as a hypothesis.
  • Add web-vitals reporting so we get real-user data by route and release.

Requirements: a runnable page plus Chrome DevTools MCP, or the Lighthouse CLI or PageSpeed Insights as a fallback. Field data needs a CrUX record for the page or origin, or your own monitoring.

Tips and limits

  • Missing field data is not a pass. The measurement guide says to treat missing CrUX data as "unavailable, never as passing." Localhost, staging and low-traffic pages often have none.
  • DevTools MCP Lighthouse skips performance. The skill says not to route performance through lighthouse_audit, which covers the other Lighthouse categories, and to use a trace instead.
  • Budgets are a starting point. The SKILL.md calls them "initial guardrails," so set your own from target devices and networks.
  • RUM needs your approval. The RUM guide says to propose a new endpoint, vendor, cookie or consent change and get authorization before adding it.
  • Vendor numbers are not promises. The skill cites a Cloudflare Early Hints test and tells the agent to treat it "as a vendor case study, not an expected saving."
  • Security audit. On 24 October 2026 its skills.sh page showed Gen Agent Trust Hub: Pass, Socket: Pass, Snyk: Pass. The skill ships no scripts.

The skill is MIT licensed, so you can copy and adapt it if you keep the copyright notice.

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 and both files in references/. Paste the repo link instead and Kipt lists all six skills, so you can bring in core-web-vitals at the same time. 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 Addy Osmani or addyosmani/web-quality-skills.

Similar skills

Questions

What is the performance skill?

performance is an Agent Skill in Addy Osmani's addyosmani/web-quality-skills repo. It tells a coding agent to set a field and lab baseline, record a browser performance trace, change only the code tied to measured bottlenecks, and re-measure. It covers loading, runtime responsiveness and resource delivery for any web stack.

How do I install the performance skill?

Run npx skills add https://github.com/addyosmani/web-quality-skills --skill performance, the command on its skills.sh page. The SKILL.md links to the repo's core-web-vitals skill, so adding --skill core-web-vitals keeps that link working. A Claude Code plugin with all six skills is also available.

Does the performance skill need Chrome DevTools MCP?

No, but it prefers it. With Chrome DevTools MCP it uses performance_start_trace and performance_analyze_insight. Without it, the measurement guide falls back to the Lighthouse CLI, PageSpeed Insights, CrUX Vis or static inspection, and labels source-only findings as hypotheses.

What performance budget does the skill use?

It starts from a budget for a typical content or commerce page: under 1.5 MB total, 300 KB of compressed JavaScript, 100 KB of compressed CSS, 500 KB of above-the-fold images, 100 KB of fonts and 200 KB of third-party code. The SKILL.md says these are starting guardrails, and an existing project budget wins.

How is it different from the Core Web Vitals skill?

core-web-vitals focuses on LCP, INP and CLS and their causes. performance is broader: budgets, the critical rendering path, bundling, images, fonts, caching, runtime work and third-party scripts. The two skills link to each other, so they work best installed together.

More in Skill directory

All guides

Keep your prompts and skills in one place, in your own GitHub. Install every skill with one command.

Get started

Kipt is an independent product, not affiliated with or endorsed by Anthropic, OpenAI, Cursor or GitHub. Claude, ChatGPT, Codex, Cursor and GitHub are trademarks of their owners.