performance-optimization

Performance Optimization

Core Web Vitals Targets

Metric	Good	Needs Work	Poor
LCP (Largest Contentful Paint)	≤ 2.5s	≤ 4.0s	> 4.0s
INP (Interaction to Next Paint)	≤ 200ms	≤ 500ms	> 500ms
CLS (Cumulative Layout Shift)	≤ 0.1	≤ 0.25	> 0.25

Bundle Optimization

Code Splitting

import { lazy, Suspense } from 'react';

// Route-level splitting (mandatory)
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

// Component-level splitting (for heavy components)
const MarkdownEditor = lazy(() => import('./components/MarkdownEditor'));
const ChartWidget = lazy(() => import('./components/ChartWidget'));

// Always wrap with Suspense + meaningful fallback
<Suspense fallback={<DashboardSkeleton />}>
  <Dashboard />
</Suspense>

Tree-Shaking

// BAD: imports entire library
import _ from 'lodash';
_.debounce(fn, 300);

// GOOD: imports only what's needed
import debounce from 'lodash/debounce';
debounce(fn, 300);

// BEST: use native or lightweight alternative
function debounce<T extends (...args: unknown[]) => void>(fn: T, ms: number) {
  let timer: ReturnType<typeof setTimeout>;
  return (...args: Parameters<T>) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  };
}

Import Analysis

# Analyze bundle composition
npx vite-bundle-visualizer    # Vite
npx @next/bundle-analyzer     # Next.js

# Find heavy dependencies
du -sh node_modules/* | sort -rh | head -20

React Rendering Optimization

When to Memoize

// MEMOIZE: Expensive computation
const sortedItems = useMemo(
  () => items.sort((a, b) => b.date - a.date),
  [items]
);

// MEMOIZE: Referential stability for child components
const handleSubmit = useCallback(
  (data: FormData) => {
    submitMutation.mutate(data);
  },
  [submitMutation.mutate]
);

// DON'T MEMOIZE: Simple computation
// const fullName = useMemo(() => `${first} ${last}`, [first, last]);
const fullName = `${first} ${last}`; // Just compute it

// DON'T MEMOIZE: Primitive props
// const title = useMemo(() => 'Hello', []);
const title = 'Hello'; // Primitives are already stable