---

name: performance-patterns description: | Web performance patterns and Core Web Vitals optimization. Use when: optimizing load times, fixing CWV issues, code splitting. Do not use for: SEO (use seo skill), general React patterns (use nextjs skill). Workflow: Use after core features are built.

Performance Patterns

For latest framework APIs, use context7.

---

Core Web Vitals Targets

---

Quick Wins

1. Lighter Alternatives

Rule: Import only what you need.

Copy// ❌ Imports entire lodash
import _ from 'lodash';

// ✅ Import only what you need
import debounce from 'lodash/debounce';

2. Code Splitting

Rule: Split large components that aren't needed on initial load.

• Route-based: Automatic in Next.js App Router, Expo Router
• Component-based: Use dynamic imports for heavy components
• Library-based: Import heavy libraries only when needed

For implementation, use context7 MCP or see:

• Next.js Dynamic Imports
• React.lazy

3. Dynamic Import for Libraries

Rule: Load heavy libraries only when user triggers the action.

Copyasync function exportToPDF() {
  const { jsPDF } = await import('jspdf');
  // use jsPDF...
}

---

Layout Stability (CLS)

Rule: Always reserve space for dynamic content.

---

Data Fetching

Rule: Cache aggressively, prefetch on intent.

---

Expensive Operations

---

Quick Checklist

Loading (LCP)

• Critical CSS inlined
• Images optimized (WebP/AVIF, proper sizing)
• Fonts preloaded
• Heavy libraries dynamically imported

Responsiveness (INP)

• Click handlers are fast
• Heavy work deferred
• Expensive operations debounced

Stability (CLS)

• Images have width/height
• Dynamic content has reserved space
• Fonts use font-display: swap
• No layout-shifting ads/embeds

Bundle

• No full lodash/moment imports
• Large components code-split
• Bundle analyzed for bloat