performance-profiler

Performance Profiler

Instructions

When profiling performance:

1. Identify the bottleneck type: Network, rendering, memory, or compute
2. Measure baseline before optimizing
3. Profile with appropriate tools
4. Apply optimizations
5. Measure improvement

Web Performance

Core Web Vitals

# Lighthouse CLI
npx lighthouse https://yoursite.com --view

# With specific metrics
npx lighthouse https://yoursite.com --only-categories=performance

Target Metrics:

Bundle Analysis

# Next.js
ANALYZE=true npm run build

# Webpack
npx webpack-bundle-analyzer stats.json

# Vite
npx vite-bundle-visualizer

React Performance

React DevTools Profiler

1. Install React DevTools browser extension
2. Open DevTools → Profiler tab
3. Click Record, interact with app, stop recording
4. Analyze flame graph for slow components

Common React Optimizations

// 1. Memoize expensive components
const MemoizedList = React.memo(function List({ items }) {
  return items.map(item => <Item key={item.id} {...item} />);
});

// 2. Use useMemo for expensive calculations
const sortedItems = useMemo(() => {
  return [...items].sort((a, b) => a.name.localeCompare(b.name));
}, [items]);

// 3. Use useCallback for stable function references
const handleClick = useCallback((id: string) => {
  setSelected(id);
}, []);

// 4. Virtualize long lists
import { FixedSizeList } from 'react-window';

function VirtualList({ items }) {
  return (
    <FixedSizeList
      height={400}
      itemCount={items.length}
      itemSize={50}
      width="100%"
    >
      {({ index, style }) => (
        <div style={style}>{items[index].name}</div>
      )}
    </FixedSizeList>
  );
}

// 5. Lazy load components
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <HeavyComponent />
    </Suspense>
  );
}