# Performance Tuning

> Skill: Frontend Performance Tuning

- Skill: `sawrus/performance-tuning` (Agent Skill)
- Install (CLI): `npx skillmds@latest add sawrus/performance-tuning`
- Raw SKILL.md: https://api.skillmd.com/api/skills/sawrus/performance-tuning/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: sawrus (https://skillmd.com/u/sawrus)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/sawrus/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

```tsx
// 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)

```tsx
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

```bash
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` |