Help us improve
Share bugs, ideas, or general feedback.
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.
npx claudepluginhub arbazkhan971/godmodeHow 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"
Optimizes 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.
Optimizes website and web app performance by measuring Core Web Vitals with Lighthouse, analyzing bundle sizes and bottlenecks, and implementing caching, code splitting, and asset optimizations.
Optimizes web app performance using React code splitting, webpack bundles, image optimization, service workers, caching, and Core Web Vitals monitoring for faster loads and better metrics.
Share bugs, ideas, or general feedback.
/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