sawrus/areas/software/frontend/skills/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

| Library | Problem | Solution | |:---|:---|:---| | moment.js | 300KB+ | Replace with date-fns | | lodash | Full import | Use lodash-es named imports | | @mui/material | Full import | Path imports: @mui/material/Button |