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:

# 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:

// 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:

const HeavyChart = lazy(() => import('./HeavyChart'));

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

Tree shaking:

// 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:

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero image"
  width={1200}
  height={600}
  priority // For above-fold images
  placeholder="blur"
/>