performance Skill (addyosmani): What It Does and How to Install It

Makes Claude speed up a website by measuring first, then fixing only the loading and runtime problems the data points to.

Installs: 42.3K; on skills.sh
Stars: 3K; on GitHub
Files: 2; besides SKILL.md
Updated: Aug 2026; last repo commit

performance makes Claude measure a page before it changes anything. It compares real-user Core Web Vitals with a DevTools trace or Lighthouse run, edits only code tied to a measured bottleneck, then re-runs the same measurement and reports before and after values. It works best with the Chrome DevTools MCP server. Without it, Claude falls back to the Lighthouse CLI or reading the source and labels those findings as hypotheses.

Good for

Web developers with a slow page who want fixes backed by a trace
Teams watching Core Web Vitals (LCP, INP, CLS) in production
Site owners who want before and after numbers, not guesses
Claude Code users with Chrome DevTools MCP

Install performance

Claude Code

Copy this prompt.

Install the performance skill in Claude Code. Run this command:

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

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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".

Sections in SKILL.md

How it works
Starting performance budget
Critical rendering path
Server response
Resource loading
JavaScript optimization
Image optimization
Format selection
Responsive images
LCP image priority
Font optimization
Loading strategy
Preloading critical fonts
Variable fonts
Caching strategy
Cache-Control headers

Key facts

Author: addyosmani
Repository: addyosmani/web-quality-skills
License: MIT
Skill version: 2.0
Status: The README calls the collection unofficial
Installs on skills.sh: 42,295 (Nov 2, 2026)
GitHub stars: 3,022 (Nov 2, 2026)
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass (Nov 2, 2026)
Last repo commit: Aug 24, 2026
Files: 3 files including SKILL.md: 2 reference guides (measurement workflow, first-party RUM)
Works in: Claude Code, Codex, Gemini CLI and other Agent Skills tools per the README
Optional: Chrome DevTools MCP for traces and Lighthouse; otherwise the Lighthouse CLI or source reading

What it includes

Four steps: baseline, prioritize poor real-user metrics, fix measured causes, re-measure
It runs a field-plus-lab baseline first. With no runnable page it inspects the source and calls findings hypotheses.
Runs code · How it works
Six-row table of starting limits for page weight, JS, CSS, images, fonts, third parties
SKILL.md calls these starting guardrails, not pass or fail criteria, and says to keep an existing project budget.
Starting performance budget
Server response, preconnect, preload, speculation rules, deferred CSS, code splitting
Critical rendering path
Format choice, responsive images and loading priority for the LCP image
Image optimization
Loading strategy, preloading critical fonts and variable fonts
Font optimization
Cache-Control headers and service worker caching
Caching strategy
Layout thrashing, debouncing, requestAnimationFrame, list virtualization, View Transitions
Runtime performance
Async and deferred loading, interaction-triggered loading and the facade pattern
Third-party scripts
Field data (CrUX, RUM) versus lab data (DevTools trace, Lighthouse), with fallbacks
Lives in references/MEASUREMENT.md. Includes three equivalent navigations and the median for a headline lab number.
Try: “Audit https://example.com for LCP and fix the biggest cause”
Runs code · Measurement workflow
Adds production Core Web Vitals reporting with the web-vitals library, only if you ask
Lives in references/RUM.md. RUM.md says to propose a new endpoint, vendor or cookie and get authorization first.
Write · First-party RUM

From the official docs

Permissions

Low risk

It can load your pages in a browser, run Lighthouse and edit your front-end code, and its fallbacks send the tested URL to Google services.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

Navigation audits reload the page
MEASUREMENT.md says Lighthouse navigation mode reloads the page and warns against running it on an unsaved form or destructive workflow. Use snapshot mode or a staging copy.
Fallbacks send the tested URL to Google
When Chrome DevTools tools are missing, the fallbacks include PageSpeed Insights, CrUX Vis and the CrUX API. Do not use them for private or unreleased pages.
It can add visitor tracking if asked
RUM.md says a new endpoint, vendor, cookie or consent change must be proposed and authorized first. Review any snippet it writes against your privacy policy.
It edits code tied to measured causes
SKILL.md says to change only code or assets connected to measured bottlenecks. Read the diff and re-measure yourself.

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	No read-only setting is documented. Without a runnable page it only inspects source and labels findings as hypotheses.
Talks to	Chrome DevTools MCP loads the page you point it at. Fallbacks named in MEASUREMENT.md: PageSpeed Insights, CrUX Vis and the CrUX API (which needs a Google Cloud API key). Your AI provider receives traces, reports and code Claude reads
Sign-in and keys	No key is required for an ordinary audit; MEASUREMENT.md says not to make a key a prerequisite. The CrUX API and repeated PageSpeed Insights automation use a Google Cloud API key you supply.
Scopes	Claude edits front-end code and server config tied to measured bottlenecks Claude records DevTools traces and Lighthouse reports Optionally adds a real-user monitoring snippet if you ask

Questions

How do I install the performance skill?

Use the install box above. The README also documents a Claude Code plugin, a Codex marketplace route and a Gemini CLI extension. Plugin skills get a namespace, for example /web-quality-skills:performance.

Does it work in Claude.ai?

The README says to add the skills to your project knowledge or paste the SKILL.md contents into the conversation. A chat has no browser tools by default, so expect source reading and hypotheses, not measured traces.

Does it need Chrome DevTools MCP or an API key?

No. The README calls Chrome DevTools MCP optional, and without it the skill falls back to the Lighthouse CLI, PageSpeed Insights, manual browser checks or static inspection. A Google Cloud API key is only needed to use the CrUX API directly.

Is the performance skill safe to run?

It edits your front-end code and, with the right tools, loads pages and records traces. Run it on your own or staging pages, avoid navigation audits on forms with unsaved data, and read each diff. The skill folder holds markdown only: SKILL.md and two reference guides.

How is it different from core-web-vitals and web-quality-audit?

In the README, performance covers measurement, traces and loading and runtime fixes. core-web-vitals narrows to LCP, INP and CLS diagnosis, and web-quality-audit reviews performance, accessibility, SEO, best practices and agentic browsing together. performance links to core-web-vitals for CWV-specific work.

Information

updated Nov 2, 2026

Repository: addyosmani/web-quality-skills
Folder: skills/performance

addyosmani/web-quality-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 7

performance SKILL.md · github.com
MEASUREMENT.md · github.com
web-quality-skills README · github.com
performance on skills.sh · skills.sh
RUM.md · github.com
core-web-vitals SKILL.md · github.com
web-quality-audit SKILL.md · github.com