---
name: web-performance-audit
description: Use when analyzing web application performance, Core Web Vitals (LCP, INP, CLS), JavaScript bundle size optimization, rendering bottlenecks, and memory leaks.
---

# Web Performance & Core Web Vitals Optimization

## Purpose
Systematically audit, profile, and optimize frontend web applications for load speed, rendering responsiveness, and minimal memory footprints.

## Key Audit Areas

### 1. Core Web Vitals
- **LCP (Largest Contentful Paint < 2.5s):** Optimize hero images (priority hints `fetchpriority="high"`, modern formats WebP/AVIF), preload critical fonts, eliminate render-blocking CSS/JS.
- **INP (Interaction to Next Paint < 200ms):** Break long JavaScript tasks into chunks (`requestIdleCallback`, `scheduler.yield()`), debounce high-frequency input handlers, offload heavy calculations to Web Workers.
- **CLS (Cumulative Layout Shift < 0.1):** Set explicit `width` and `height` on images and embeds, reserve space for dynamic ads/widgets, avoid injecting DOM elements above existing content.

### 2. Bundle Size & Code Splitting
- Run visual bundle analyzers (`rollup-plugin-visualizer` / `webpack-bundle-analyzer`).
- Replace bloated libraries with lightweight alternatives (e.g., date-fns or native `Intl` over moment.js).
- Implement route-based and component-based lazy loading (`React.lazy()`, dynamic `import()`).

### 3. Rendering & React Performance
- Prevent unnecessary re-renders with targeted memoization (`useMemo`, `useCallback`, `React.memo`), but avoid speculative over-memoization.
- Virtualize large lists (`tanstack-virtual` / `react-window`) when rendering hundreds of DOM nodes.
- Minimize layout thrashing (batch DOM reads before writes).