Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Optimize web performance: bundle size, images, caching, lazy loading, and overall page speed. Use when site is slow, reducing bundle size, fixing layout shifts, improving Time to Interactive, or optimizing for Lighthouse scores. Triggers on: web performance, bundle size, page speed, slow site, lazy loading. Do NOT use for Core Web Vitals-specific fixes (use core-web-vitals), running Lighthouse audits (use perf-lighthouse), or Astro-specific optimization (use perf-astro).
.claude/skills/tech-leads-club-perf-web-optimization/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-02 | ✗→✓ | ▲ Improved | 31% | 0% |
| case-19 | ✗→✓ | ▲ Improved | -32% | 0% |
| case-04 | ✓→✓ | ＝ Same ✓ | 319% | 0% |
| case-05 | ✓→✓ | ＝ Same ✓ | 215% | 0% |
| case-06 | ✓→✓ | ＝ Same ✓ | 36% | 0% |
Systematic approach: Measure → Identify → Prioritize → Implement → Verify.
| Metric | Good | Needs Work | Poor | | ------ | ------- | ---------- | ------- | | LCP | < 2.5s | 2.5-4s | > 4s | | INP | < 200ms | 200-500ms | > 500ms | | CLS | < 0.1 | 0.1-0.25 | > 0.25 | | TTFB | < 800ms | 800ms-1.8s | > 1.8s |
html<!-- Hero/LCP image: eager + high priority --> <img src="/hero.webp" alt="Hero" width="1200" height="600" loading="eager" fetchpriority="high" decoding="async" /> <!-- Below fold: lazy load --> <img src="/product.webp" alt="Product" width="400" height="300" loading="lazy" decoding="async" />
Always set width and height to prevent CLS.
html<!-- Preconnect to font origin --> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <!-- Non-blocking font load --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter&display=swap" media="print" onload="this.media='all'" />
html<!-- Defer to user interaction --> <script> function loadThirdParty() { // Load analytics, chat widgets, etc. } ;['scroll', 'click', 'touchstart'].forEach((e) => addEventListener(e, loadThirdParty, { once: true, passive: true })) setTimeout(loadThirdParty, 5000) </script>
Inline critical CSS in <head>, defer the rest:
html<style> /* critical styles */ </style> <link rel="preload" href="/styles.css" as="style" onload="this.rel='stylesheet'" />
bash# Webpack npx webpack-bundle-analyzer dist/stats.json # Vite npx vite-bundle-visualizer # Check package size before installing npx bundlephobia <package-name>
Common heavy packages to replace:
moment (67KB) → date-fns (12KB) or dayjs (2KB)lodash (72KB) → cherry-pick imports or native methodsjavascript// React lazy const Chart = lazy(() => import('./Chart')) // Next.js dynamic const Admin = dynamic(() => import('./Admin'), { ssr: false }) // Vite/Rollup manual chunks build: { rollupOptions: { output: { manualChunks: { vendor: ['react', 'react-dom'] } } } }
# Static assets (immutable hash in filename)
Cache-Control: public, max-age=31536000, immutable
# HTML (revalidate)
Cache-Control: no-cache
# API responses
Cache-Control: private, max-age=0, must-revalidateFor running audits, reading reports, and setting budgets, use the perf-lighthouse skill.
srcsetwidth/height attributesloading="lazy" below foldfetchpriority="high" on LCP imagefont-display: swapFor in-depth optimization patterns, see:
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→fail | 15,684 | 16,209 | +3% | 1 | 1 | 0% | 3,171 | 4,694 | +48% | 0 | 0 | — |
case-02 | fail→pass | 18,649 | 17,637 | -5% | 1 | 1 | 0% | 3,312 | 4,333 | +31% | 0 | 0 | — |
case-03 | fail→fail | 16,528 | 13,084 | -21% | 1 | 1 | 0% | 2,854 | 3,565 | +25% | 0 | 0 | — |
case-04 | pass→pass | 2,364 | 2,533 | +7% | 1 | 1 | 0% | 382 | 1,599 | +319% | 0 | 0 | — |
case-05 | pass→pass | 2,707 | 2,539 | -6% | 1 | 1 | 0% | 471 | 1,484 | +215% | 0 | 0 | — |
case-06 | pass→pass | 6,992 | 2,901 | -59% | 1 | 1 | 0% | 1,148 | 1,561 | +36% | 0 | 0 | — |
case-07 | pass→pass | 57,062 | 2,142 | -96% | 1 | 1 | 0% | 1,286 | 1,509 | +17% | 0 | 0 | — |
case-08 | pass→pass | 4,121 | 3,721 | -10% | 1 | 1 | 0% | 721 | 1,770 | +145% | 0 | 0 | — |
case-09 | pass→pass | 6,097 | 65,308 | +971% | 1 | 1 | 0% | 1,091 | 1,742 | +60% | 0 | 0 | — |
case-14 | pass→pass | 3,194 | 2,104 | -34% | 1 | 1 | 0% | 599 | 1,502 | +151% | 0 | 0 | — |
case-10 | fail→fail | 13,495 | 9,119 | -32% | 1 | 1 | 0% | 2,205 | 2,633 | +19% | 0 | 0 | — |
case-11 | pass→pass | 12,311 | 8,264 | -33% | 1 | 1 | 0% | 2,219 | 2,745 | +24% | 0 | 0 | — |
case-12 | pass→pass | 11,674 | 9,886 | -15% | 1 | 1 | 0% | 1,995 | 2,819 | +41% | 0 | 0 | — |
case-13 | pass→pass | 5,107 | 3,937 | -23% | 1 | 1 | 0% | 790 | 1,791 | +127% | 0 | 0 | — |
case-15 | pass→pass | 4,634 | 4,710 | +2% | 1 | 1 | 0% | 912 | 2,037 | +123% | 0 | 0 | — |
case-16 | pass→pass | 6,181 | 1,519 | -75% | 1 | 1 | 0% | 906 | 1,357 | +50% | 0 | 0 | — |
case-17 | pass→pass | 5,697 | 2,526 | -56% | 1 | 1 | 0% | 921 | 1,606 | +74% | 0 | 0 | — |
case-18 | pass→pass | 4,717 | 2,704 | -43% | 1 | 1 | 0% | 774 | 1,607 | +108% | 0 | 0 | — |
case-19 | fail→pass | 15,210 | 3,556 | -77% | 1 | 1 | 0% | 2,513 | 1,718 | -32% | 0 | 0 | — |
case-20 | pass→pass | 14,653 | 12,274 | -16% | 1 | 1 | 0% | 2,940 | 3,542 | +20% | 0 | 0 | — |
case-21 | pass→pass | 16,240 | 12,356 | -24% | 1 | 1 | 0% | 2,801 | 3,405 | +22% | 0 | 0 | — |
case-22 | pass→pass | 12,717 | 11,196 | -12% | 1 | 1 | 0% | 2,353 | 3,176 | +35% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +9 percentage points is the difference between those two pass rates over the 22 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.