performance-optimizer

# Performance Optimizer

Optimize frontend performance for faster load times and better user experience.

## Quick Start

Measure with Lighthouse, optimize images, code split, lazy load, minimize bundle size, implement caching.

## Instructions

### Core Web Vitals

**Largest Contentful Paint (LCP):**
- Target: < 2.5s
- Measures: Loading performance
- Optimize: Images, fonts, server response

**First Input Delay (FID):**
- Target: < 100ms
- Measures: Interactivity
- Optimize: JavaScript execution, code splitting

**Cumulative Layout Shift (CLS):**
- Target: < 0.1
- Measures: Visual stability
- Optimize: Image dimensions, font loading

### Bundle Size Optimization

**Analyze bundle:**
```bash
# With webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer

# Add to webpack config
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

plugins: [
  new BundleAnalyzerPlugin()
]

# Or with Vite
npm install --save-dev rollup-plugin-visualizer
```

**Code splitting:**
```jsx
// Route-based splitting
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Profile = lazy(() => import('./pages/Profile'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </Suspense>
  );
}
```

**Component-based splitting:**
```jsx
const HeavyChart = lazy(() => import('./HeavyChart'));

function Dashboard() {
  return (
    <div>
      <Suspense fallback={<ChartSkeleton />}>
        <HeavyChart data={data} />
      </Suspense>
    </div>
  );
}
```

**Tree shaking:**
```js
// Bad: Imports entire library
import _ from 'lodash';

// Good: Import only what you need
import debounce from 'lodash/debounce';

// Or use lodash-es
import { debounce } from 'lodash-es';
```

### Image Optimization

**Use Next.js Image:**
```jsx
import Image from 'next/image';

<Image
  src="/hero.jpg"