Stats
Actions
Tags
From godmode
Audits web performance with Lighthouse, analyzes bundles via Vite/Webpack tools, guides code splitting, image/font optimization, critical CSS extraction. For slow pages, large bundles, Core Web Vitals.
How this skill is triggered — by the user, by Claude, or both
Slash command
/godmode:webperfThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
- `/godmode:webperf`, "page is slow", "Lighthouse"
/godmode:webperf, "page is slow", "Lighthouse"# 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
| 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
# 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
<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:
fetchpriority="high", no lazy-loadloading="lazy"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
@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:
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
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
ls webpack.config.* vite.config.* next.config.* \
nuxt.config.* 2>/dev/null
grep -r "bundle-analyzer\|source-map-explorer" \
package.json 2>/dev/null
Log to .godmode/webperf-results.tsv:
iteration\toptimization\tlighthouse_before\tlighthouse_after\tlcp_ms\tinp_ms\tcls\tjs_kb\tstatus
Print: Webperf: Lighthouse {before} -> {after}. LCP: {N}s. INP: {N}ms. CLS: {N}. JS: {N}KB. Verdict: {verdict}.
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 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
npx claudepluginhub arbazkhan971/godmodeOptimizes frontend performance via Core Web Vitals (LCP, INP, CLS), code splitting, tree shaking, image/font optimization (WebP, AVIF, lazy loading), service workers, and webpack-bundle-analyzer. Use for diagnosing slow loads, bundle size reduction, and CI budgets.
Diagnoses web performance issues, fixes Core Web Vitals (LCP, INP, CLS), optimizes bundles, assets, and render performance. Use for slow pages or dropping traffic due to speed.
Systematically measures, analyzes, and improves page loading speed, Core Web Vitals, bundle size, and runtime performance using Lighthouse audits and web performance best practices.