Performance Optimization in Web Applications

Performance is crucial for user experience. Let's explore practical optimization techniques.

Core Web Vitals

• LCP (Largest Contentful Paint): < 2.5s
• FID (First Input Delay): < 100ms
• CLS (Cumulative Layout Shift): < 0.1

Frontend Optimizations

Code Splitting

const LazyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <LazyComponent />
    </Suspense>
  );
}

Image Optimization

import Image from 'next/image';

<Image
  src="/photo.jpg"
  alt="Description"
  width={800}
  height={600}
  loading="lazy"
/>

Memoization

const MemoizedComponent = memo(function ExpensiveComponent({ data }) {
  return <div>{processData(data)}</div>;
});

Backend Optimizations

Caching

// Redis cache example
async function getUser(id: string) {
  const cached = await redis.get(`user:${id}`);
  if (cached) return JSON.parse(cached);

  const user = await db.users.find(id);
  await redis.set(`user:${id}`, JSON.stringify(user), 'EX', 3600);
  return user;
}

Database Indexing

CREATE INDEX idx_users_email ON users(email);

Monitoring

Use tools like:

• Lighthouse
• WebPageTest
• New Relic
• Sentry

Conclusion

Measure first, then optimize. Focus on biggest impact improvements.