Frontend Performance

Frontend Performance

Measure, diagnose, and fix frontend performance problems: Core Web Vitals, bundle size, and rendering.

Core principle: Never optimize without a measurement. Never ship an optimization without verifying it helped.

When to Use

• Core Web Vitals are failing (LCP >4s, INP >200ms, CLS >0.1)
• JavaScript bundle is large (>200KB gzip)
• Page loads feel slow to users
• React components are re-rendering unnecessarily
• Setting up performance budgets and CI enforcement

When NOT to Use

• Backend API latency (use backend-performance skill)
• Database query optimization (use backend-performance skill)
• Initial build without any measured performance problem

Core Web Vitals Targets

Profiling Tools

LCP Optimization

LCP is almost always one of: hero image, large text block, video poster.

Diagnose LCP Element

new PerformanceObserver((list) => {
  const lcp = list.getEntries().at(-1);
  console.log('LCP element:', lcp.element, 'time:', lcp.startTime);
}).observe({ entryTypes: ['largest-contentful-paint'] });

Fix by Root Cause

<!-- Preload LCP image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- LCP image markup -->
<img src="/hero.webp" alt="..." loading="eager" fetchpriority="high"
     width="1200" height="600">

INP Optimization

INP measures response to user interactions (click, keypress, tap).

Diagnose Slow Interactions

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 200) {
      console.log('Slow interaction:', entry.name, Math.round(entry.duration) + 'ms');
    }
  }
}).observe({ entryTypes: ['event'] });

Fixes

// Debounce search input
const debouncedSearch = useMemo(
  () => debounce((query: string) => performSearch(query), 300),
  []
);

// Break long task
async function processLargeList(items: Item[]) {
  for (const item of items) {
    processItem(item);
    await scheduler.yield();  // Yield to browser between items
  }
}

CLS Optimization

CLS = content shifting unexpectedly as elements load.

<!-- Always specify dimensions to prevent CLS -->
<img src="photo.jpg" alt="..." width="800" height="600">

<!-- Reserve space for dynamic content -->
<div style="min-height: 200px">
  <!-- async content loads here -->
</div>

Bundle Size Optimization

Diagnose

# Webpack
npx webpack-bundle-analyzer dist/stats.json

# Vite
npx vite-bundle-visualizer

Fix Common Issues

// Dynamic import for non-critical features
const HeavyChart = React.lazy(() => import('./HeavyChart'));

// Route-based code splitting
const AdminPanel = React.lazy(() => import('./pages/AdminPanel'));

React Re-render Optimization

Diagnose

React DevTools Profiler → Record → Interact → Check "Why did this render?"

Fixes

// Memoize expensive computation
const sortedTasks = useMemo(
  () => [...tasks].sort((a, b) => a.dueDate - b.dueDate),
  [tasks]
);

// Stable callback references
const handleDelete = useCallback(
  (id: string) => deleteTask(id),
  [deleteTask]
);

// Memoize component to prevent parent re-renders from cascading
const TaskItem = React.memo(({ task }: { task: Task }) => (
  <li>{task.title}</li>
));

Rule: Profile before optimizing. useMemo and useCallback have overhead — only add them when you've measured a re-render problem.

Performance Budgets

Targets

Lighthouse CI Enforcement

// lighthouserc.js
module.exports = {
  ci: {
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
        'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
        'total-byte-weight': ['error', { maxNumericValue: 500_000 }],
      },
    },
  },
};

# CI step
- name: Lighthouse CI
  run: npx lhci autorun
  env:
    LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

Common Mistakes

Verification Checklist

• LCP element identified and optimized (preload, format, size)
• INP measured on key interactions (<200ms)
• CLS <0.1 (image dimensions set, space reserved for dynamic content)
• JS bundle <200KB gzip (analyzer run)
• No unnecessary React re-renders (Profiler used)
• Performance budgets defined and enforced in CI (Lighthouse CI)
• WebP/AVIF used for images
• Code splitting on routes and heavy features
• No h-screen — use min-h-[100dvh]