Frontend Performance

Contents

• Instructions
• Web Performance
• React Performance
• Quick Wins Checklist

When to Use

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

PowerShell equivalent for the Next.js example:

$env:ANALYZE='true'; npm run build

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} />);
});

function SearchResults({ query }: { query: string }) {
  const deferredQuery = useDeferredValue(query);
  const [isPending, startTransition] = useTransition();

  const onSortChange = (nextSort: string) => {
    startTransition(() => setSort(nextSort));
  };

  return (
    <Suspense fallback={<Spinner />}>
      <ResultsList query={deferredQuery} pending={isPending} onSortChange={onSortChange} />
    </Suspense>
  );
}

Quick Wins Checklist

• Enable gzip/brotli compression
• Add caching headers
• Lazy load images (loading="lazy")
• Preconnect to external domains
• Use CDN for static assets
• Minimize JavaScript bundle
• Defer non-critical JS
• Optimize images (WebP, proper sizing)