Performance Optimization Checklist

Loading Performance - Lazy load images and below-fold components - Use next/image for automatic optimization - Code split with dynamic imports - Minimize bundle size (tree shaking, no barrel imports)

Rendering Performance - Use React.memo for expensive pure components - useMemo for expensive calculations - useCallback for stable function references - Virtualize long lists (react-window)

Runtime Performance - Debounce frequent events (scroll, resize, input) - Batch state updates - Avoid layout thrashing (batch DOM reads and writes) - Profile with React DevTools and Chrome DevTools