Performance Optimization Strategies

Performance optimization improves user experience and reduces costs. This article covers optimization strategies.

Introduction

Performance optimization provides:

Faster load times
Better user experience
Reduced bandwidth
Lower costs
Improved SEO

Understanding optimization helps you:

Identify bottlenecks
Optimize code
Reduce bundle size
Improve caching
Scale efficiently

Frontend Optimization

Code Splitting

// ✅ Good: Code splitting
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Admin = lazy(() => import('./pages/Admin'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/admin" element={<Admin />} />
      </Routes>
    </Suspense>
  );
}

// ✅ Good: Route-based splitting
const routes = [
  { path: '/', component: lazy(() => import('./Home')) },
  { path: '/about', component: lazy(() => import('./About')) },
  { path: '/contact', component: lazy(() => import('./Contact')) }
];

Image Optimization

// ✅ Good: Responsive images
<picture>
  <source media="(max-width: 600px)" srcSet="image-small.webp" />
  <source media="(max-width: 1200px)" srcSet="image-medium.webp" />
  <img src="image-large.jpg" alt="description" loading="lazy" />
</picture>

// ✅ Good: Next.js Image
import Image from 'next/image';

<Image
  src="/image.jpg"
  alt="description"
  width={800}
  height={600}
  priority={false}
/>

Backend Optimization

Caching

// ✅ Good: Redis caching
const redis = require('redis');
const client = redis.createClient();

async function getUser(id) {
  const cached = await client.get(`user:${id}`);
  if (cached) return JSON.parse(cached);

  const user = await User.findById(id);
  await client.setex(`user:${id}`, 3600, JSON.stringify(user));
  return user;
}

// ✅ Good: HTTP caching headers
app.get('/api/users/:id', (req, res) => {
  res.set('Cache-Control', 'public, max-age=3600');
  res.json(user);
});

Database Optimization

// ✅ Good: Query optimization
// Bad: N+1 queries
const users = await User.find();
for (const user of users) {
  user.posts = await Post.find({ userId: user._id });
}

// Good: Use populate
const users = await User.find().populate('posts');

// ✅ Good: Indexing
db.users.createIndex({ email: 1 });
db.posts.createIndex({ userId: 1, createdAt: -1 });

Monitoring

Performance Metrics

// ✅ Good: Track metrics
const metrics = {
  responseTime: [],
  errorRate: 0,
  throughput: 0
};

app.use((req, res, next) => {
  const start = Date.now();
  res.on('finish', () => {
    metrics.responseTime.push(Date.now() - start);
  });
  next();
});

// ✅ Good: Expose metrics
app.get('/metrics', (req, res) => {
  res.json({
    avgResponseTime: metrics.responseTime.reduce((a, b) => a + b) / metrics.responseTime.length,
    p95ResponseTime: metrics.responseTime.sort()[Math.floor(metrics.responseTime.length * 0.95)]
  });
});

Best Practices

Measure before optimizing:

// ✅ Good: Measure first
const start = performance.now();
// Code
const duration = performance.now() - start;

// ❌ Bad: Optimize without measuring

Focus on bottlenecks:

// ✅ Good: Profile to find bottlenecks
// Use DevTools, Lighthouse, or profilers

// ❌ Bad: Optimize everything

Monitor in production:

// ✅ Good: Monitor production
// Use APM tools, metrics, logs

// ❌ Bad: Only test locally

Summary

Performance optimization is essential. Key takeaways:

Measure performance
Identify bottlenecks
Optimize code
Cache effectively
Optimize database
Monitor metrics
Focus on critical paths
Improve continuously

Next Steps

Learn about DevOps
Explore Monitoring
Study Infrastructure
Practice optimization
Improve performance