Skill

webperf

Web performance optimization. Lighthouse, bundle analysis, code splitting, image optimization, critical CSS, fonts, service workers, CDN.

From godmode

Install

Run in your terminal

npx claudepluginhub arbazkhan971/godmode

Tool Access

This skill uses the workspace's default tool permissions.

Skill Content

Similar Skills

agent-harness-construction

Designs and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.

everything-claude-code

139.2k

agent-payment-x402

Enables AI agents to execute x402 payments with per-task budgets, spending controls, and non-custodial wallets via MCP tools. Use when agents pay for APIs, services, or other agents.

everything-claude-code

139.2k

agent-eval

Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.

everything-claude-code

139.2k

Stats

Stars7

Forks3

Last CommitMar 25, 2026

Actions

View Source View Plugin View on GitHub View README

Webperf -- Web Performance Optimization

Activate When

/godmode:webperf, "page is slow", "Lighthouse"
"bundle too large", "code splitting", "lazy loading"
"image optimization", "critical CSS", "font loading"
Pre-ship quality gate or Core Web Vitals regression

Workflow

Step 1: Performance Baseline

# Lighthouse audit (median of 3 runs)
npx lighthouse https://example.com \
  --only-categories=performance \
  --output=json --output-path=./perf-baseline.json

# Bundle analysis
npx vite-bundle-visualizer    # Vite
npx webpack-bundle-analyzer stats.json  # Webpack

BASELINE:
  Lighthouse Performance: <N>/100
  LCP: <N>s (target: <2.5s)
  INP: <N>ms (target: <200ms)
  CLS: <N> (target: <0.1)
  Total JS: <N>KB gzipped
  Total CSS: <N>KB gzipped
  Total transfer: <N>KB

Step 2: Lighthouse Diagnostics

| Opportunity        | Savings | Priority |
|-------------------|---------|---------|
| Reduce unused JS  | 450 KiB | HIGH    |
| Serve WebP images | 320 KiB | HIGH    |
| Eliminate render-block| 1.2s | HIGH    |
| Preload LCP image | 0.8s   | HIGH    |
| Reduce unused CSS | 180 KiB | MEDIUM  |

IF Lighthouse < 70: fix HIGH opportunities first
IF Lighthouse 70-89: fix HIGH + MEDIUM
IF Lighthouse >= 90: target remaining MEDIUM/LOW

Step 3: Bundle Analysis & Code Splitting

# Route-based splitting (React)
# const Dashboard = React.lazy(() =>
#   import('./pages/Dashboard'));

# Verify tree shaking
grep '"sideEffects"' package.json

BUNDLE ANALYSIS:
| Chunk             | Size(gz) | Loaded  | Route     |
|------------------|---------|---------|----------|
| vendor.js        | 245 KiB | Always  | All      |
| chart-library.js | 180 KiB | Always  | /dashboard|
| main.js          | 89 KiB  | Always  | All      |

IF chunk loaded on all pages but used on one:
  split into route-specific chunk
IF vendor > 200KB gzipped: split heavy deps
IF total JS > 400KB gzipped: SLOW classification

Step 4: Image Optimization

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero" width="1200"
       height="600" loading="lazy" decoding="async">
</picture>

# Install Sharp for processing
npm install sharp

# Subset fonts
npx glyphhanger https://example.com \
  --subset=fonts/inter.woff2 --formats=woff2

Rules:

LCP image: fetchpriority="high", no lazy-load
All other images: loading="lazy"
Responsive srcset with 400w, 800w, 1200w
WebP + AVIF with JPEG fallback
Explicit width/height on every image (CLS)

Step 5: Critical CSS

npx critical https://example.com \
  --inline --minify --base dist/

IF render-blocking stylesheets > 0:
  extract critical CSS, inline in <head>
  async-load remaining CSS
IF using Vite: use critters plugin
IF using Next.js: built-in CSS optimization

Step 6: Font Optimization

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

<link rel="preload" href="/fonts/inter-var.woff2"
  as="font" type="font/woff2" crossorigin>

Rules:

Variable fonts (one file for all weights)
font-display: swap (show fallback immediately)
Preload critical fonts in <head>
Subset to needed characters (30-50% savings)
WOFF2 only (smallest format)

Step 7: Service Worker & CDN

CACHING STRATEGY:
  HTML: Network First (always fresh)
  CSS/JS hashed: Cache First (1yr, immutable)
  Images: Cache First (30 days)
  Fonts: Cache First (1yr)
  API: Network First or stale-while-revalidate

CDN HEADERS:
  Hashed assets: max-age=31536000, immutable
  HTML: no-cache (revalidate every request)
  API: private, no-cache

Step 8: Performance Report

WEBPERF AUDIT:
  Lighthouse: {before} -> {after} (+{delta})
  LCP: {before}s -> {after}s (target: <2.5s)
  INP: {before}ms -> {after}ms (target: <200ms)
  CLS: {before} -> {after} (target: <0.1)
  JS: {before}KB -> {after}KB (-{savings})

VERDICT:
  FAST: Lighthouse >=90, all CWV good, JS <200KB
  ACCEPTABLE: Lighthouse >=70, CWV mostly good
  SLOW: Lighthouse <70 or any CWV poor

Key Behaviors

Measure before optimizing. No guessing.
JS is the most expensive resource. Cut first.
Images are lowest-hanging fruit.
Critical CSS eliminates render blocking.
Never ask to continue. Loop autonomously.

HARD RULES

NEVER optimize without measuring first.
NEVER lazy-load the LCP element.
NEVER serve uncompressed assets. Brotli/gzip.
NEVER no-store on hashed static assets.
ALWAYS code-split by route.
ALWAYS use responsive images with srcset.
ALWAYS measure third-party script impact.
ALWAYS set and enforce performance budget in CI.

Auto-Detection

ls webpack.config.* vite.config.* next.config.* \
  nuxt.config.* 2>/dev/null
grep -r "bundle-analyzer\|source-map-explorer" \
  package.json 2>/dev/null

TSV Logging

Log to .godmode/webperf-results.tsv: iteration\toptimization\tlighthouse_before\tlighthouse_after\tlcp_ms\tinp_ms\tcls\tjs_kb\tstatus

Output Format

Print: Webperf: Lighthouse {before} -> {after}. LCP: {N}s. INP: {N}ms. CLS: {N}. JS: {N}KB. Verdict: {verdict}.

Keep/Discard Discipline

KEEP if: Lighthouse improved AND no CWV regression
  AND no visual breakage
DISCARD if: Lighthouse unchanged/decreased
  OR CWV regressed OR layout broken. Revert.

Stop Conditions

STOP when:
  - Lighthouse Performance >= 90
  - All CWV good (LCP <2.5s, INP <200ms, CLS <0.1)
  - Performance budget met
  - <2 point improvement per iteration
  - User requests stop