performance

name	performance
description	Bundle budgeting, Core Web Vitals, lazy loading, performance optimization. Use when optimizing performance, checking bundle size, or reviewing Core Web Vitals. Triggers: "performance", "bundle", "lcp", "cls", "inp", "lazy", "optimization".
category	web-ui

Skill: performance

Budgets

Metric	Target
JS bundle (gzipped)	<= 350 KB
CSS (gzipped)	<= 50 KB
LCP	<= 2.5s
CLS	<= 0.1
INP	<= 200ms

Commands

# Check source weight
find src/ -name '*.js' -o -name '*.css' | xargs wc -c

# Check number of JS files
find src/ -name '*.js' | wc -l

Optimization Checklist

• Images use loading="lazy"
• CSS is split by page/feature
• No render-blocking resources
• SVGs inline or data URIs (no network requests)
• Fonts loaded with font-display: swap
• Critical CSS inlined

Rules

• Never exceed 350KB gzipped JS bundle
• Always use loading="lazy" on images below the fold
• Inline critical CSS, defer the rest
• Use data URIs for small SVGs instead of network requests