Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Web Performance Optimization

An evidence-led skill that diagnoses and fixes slow web pages using real-user Core Web Vitals plus browser performance traces.

Dev & CodingIntermediate★ 2,714⑂ 246AI score 9/10Last updated: Aug 24, 2026

What it does

  • Triggers on requests like "speed up my site", "reduce load time", "fix slow loading", or "performance audit".
  • Establishes a field + lab baseline before any edit, then prioritizes poor p75 LCP/INP/CLS.
  • Diagnoses with Chrome DevTools MCP (performance_start_trace, performance_analyze_insight) instead of routing performance through lighthouse_audit.
  • Changes only the code/assets tied to a measured bottleneck, then re-measures and reports before/after with conditions and uncertainty.
  • Ships concrete guidance: starting performance budgets, critical rendering path (TTFB, Brotli, HTTP/3, Early Hints 103), preconnect/preload discipline, Speculation Rules, responsive AVIF/WebP images, font subsetting and variable fonts, Cache-Control recipes, service worker caching, layout-thrash avoidance, View Transitions, and third-party facade patterns.

Who it's for

  • Frontend and fullstack engineers who own page speed.
  • Commerce/content teams needing to pass Core Web Vitals for SEO and conversion.
  • Anyone wanting to replace guess-based tuning with a measurement-first workflow.

Example uses

  1. "Our PDP has a 4s LCP — find the cause": record a trace, spot late LCP image discovery, add fetchpriority="high" + preload, re-measure and report the delta.
  2. "Our JS bundle is too big": compare against the 300 KB budget, then apply route-level code splitting and tree-shaken imports (lodash/debounce).
  3. "The YouTube embed is killing the page": swap in a facade (thumbnail + click-to-load) and defer third-party scripts until intersection.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/addyosmani/web-quality-skills/HEAD/skills/performance/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/performance folder from the GitHub repo addyosmani/web-quality-skills into my ~/.claude/skills/performance/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/addyosmani/web-quality-skills.git /tmp/web-quality-skills && mkdir -p ~/.claude/skills && cp -r /tmp/web-quality-skills/skills/* ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal in the folder where you keep tools.
  2. Clone the repo: git clone https://github.com/addyosmani/web-quality-skills.git
  3. Create the skills directory: mkdir -p ~/.claude/skills
  4. Copy the skill: cp -r web-quality-skills/skills/performance ~/.claude/skills/ — copying all of skills/* is recommended because this skill links to the core-web-vitals skill.
  5. Verify ~/.claude/skills/performance/references/MEASUREMENT.md and RUM.md came along.
  6. For real measurements, register the Chrome DevTools MCP server with Claude Code; without it the skill only produces static hypotheses.
  7. Restart Claude Code and ask something like "run a performance audit on my site".
View source on GitHub ↗License: MIT