Performance Tuning

Skill: Frontend Performance Tuning

When to load

When optimizing Core Web Vitals, reducing bundle size, diagnosing render performance, or reviewing images/fonts.

Re-render Prevention

// Memoize expensive computations
const sorted = useMemo(
  () => [...items].sort((a, b) => a.name.localeCompare(b.name)),
  [items]
);

// Stable callback references
const handleClick = useCallback(() => doSomething(id), [id]);

// Memoize child components receiving object/function props
const ExpensiveList = React.memo(({ items, onSelect }: ListProps) => (
  // rendering
));

// ❌ Inline objects create new references every render
<MyComponent config={{ timeout: 3000 }} />
// ✅ Stable reference
const CONFIG = { timeout: 3000 };
<MyComponent config={CONFIG} />

Code Splitting (Mandatory)

const UserDashboard = lazy(() => import('./features/users/UserDashboard'));

<Suspense fallback={<PageSkeleton />}>
  <UserDashboard />
</Suspense>

Image Optimization Checklist

• Explicit width and height to prevent CLS
• WebP/AVIF via <picture> with JPG fallback
• loading="lazy" for below-fold images
• loading="eager" + fetchpriority="high" for LCP image

Bundle Analysis

npx vite-bundle-visualizer