---

name: performance-optimization version: 1.0.0 lastUpdated: 2026-01-18 description: Performance optimization patterns for Next.js applications. Covers bundle analysis, React rendering optimization, database query optimization, Core Web Vitals, image optimization, and caching strategies. tags: [performance, bundle, react, optimization, core-web-vitals, caching] author: Szum Tech Team allowed-tools: Read, Write, Edit, Glob, Grep, Bash, WebFetch context: fork agent: general-purpose user-invocable: true examples:

• How to reduce bundle size
• Optimize React rendering
• Fix slow database queries
• Improve Core Web Vitals
• Implement virtualized lists

---

Performance Optimization Skill

Performance optimization patterns for Next.js applications.

Reference Files:

• bundle-analysis.md - Bundle size optimization
• react-rendering.md - React performance patterns
• database-optimization.md - Query optimization
• examples.md - Practical examples

Performance Philosophy

Principles:

1. Measure first - Never optimize without metrics
2. Target bottlenecks - Focus on the biggest impact areas
3. User-centric - Prioritize perceived performance
4. Iterative - Small, measurable improvements

Quick Reference

Bundle Size

Copy# Analyze bundle
npm run analyze

# Targets
# - Total: < 200KB gzipped (first load)
# - Per-route: < 100KB gzipped

Quick Wins:

Copy// Dynamic imports for heavy components
const Chart = dynamic(() => import("./Chart"), { ssr: false });

// Tree-shakeable imports
import { debounce } from "lodash-es";  // ✅
import _ from "lodash";                 // ❌

React Rendering

Copy// With React Compiler - usually automatic optimization
// Manual memoization only for:

// 1. External library callbacks
const stableHandler = useCallback(() => {}, []);

// 2. Context values
const value = useMemo(() => ({ state, dispatch }), [state]);

// 3. Virtualized lists (50+ items)
import { useVirtualizer } from "@tanstack/react-virtual";

Database Queries

Copy// Always use limits
const query = db.collection("items")
  .where("userId", "==", userId)
  .limit(20);

// Parallel fetching
const [users, posts] = await Promise.all([
  getUsers(),
  getPosts()
]);

Core Web Vitals

Performance Targets

Bundle Size Targets

Runtime Targets

Analysis Commands

Copy# Bundle analysis
npm run analyze

# Build output
npm run build
# Check .next/static/chunks sizes

# Lighthouse (via Chrome DevTools)
# Performance tab → Lighthouse

# React Profiler
# React DevTools → Profiler tab

Decision Tree

CopyPerformance Issue?
    │
    ├─ Slow page load?
    │   ├─ Large bundle → Bundle analysis
    │   ├─ Slow API → Database optimization
    │   └─ Render blocking → Code splitting
    │
    ├─ Slow interactions?
    │   ├─ Long lists → Virtualization
    │   ├─ Heavy computation → Web Worker / useMemo
    │   └─ Frequent re-renders → React Profiler
    │
    └─ Layout shifts?
        ├─ Images → Set dimensions
        ├─ Fonts → Font preloading
        └─ Dynamic content → Skeleton loaders

Common Issues & Solutions

Related Skills

• react-19-compiler - React Compiler optimization guidance
• firebase-firestore - Database query patterns
• structured-logging - Performance logging