Web Performance Optimization: Beyond the Basics

Performance isn't just about fast load times—it's about creating smooth, responsive experiences that keep users engaged. Here are advanced techniques I use to optimize web applications.

1. Code Splitting & Lazy Loading

Don't ship code users don't need immediately. Use dynamic imports:

// Load heavy component only when needed
const HeavyChart = lazy(() => import('./HeavyChart'));

function Dashboard() {
  return (
    <Suspense fallback={<Spinner />}>
      <HeavyChart />
    </Suspense>
  );
}

2. Resource Hints

Tell the browser what to fetch before it's needed:

<!-- Preconnect to external domains -->
<link rel="preconnect" href="https://fonts.googleapis.com">

<!-- Prefetch resources for next page -->
<link rel="prefetch" href="/next-page.js">

<!-- Preload critical resources -->
<link rel="preload" href="hero.jpg" as="image">

3. Image Optimization

Modern Formats

Use WebP or AVIF with fallbacks:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

Lazy Loading

<img src="image.jpg" loading="lazy" alt="Description">

4. JavaScript Optimization

Debouncing & Throttling

// Debounce: Wait for user to stop typing
const debounce = (fn, delay) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), delay);
  };
};

// Throttle: Limit execution rate
const throttle = (fn, limit) => {
  let inThrottle;
  return (...args) => {
    if (!inThrottle) {
      fn(...args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
};

5. CSS Performance

• Use CSS containment: contain: layout style paint;
• Avoid expensive properties: box-shadow, filter, opacity on large elements
• Use transform and opacity for animations (GPU-accelerated)
• Critical CSS inline, rest async

6. Monitoring & Metrics

Track Core Web Vitals:

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

// Measure performance
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, entry.startTime);
  }
});
observer.observe({ entryTypes: ['measure', 'navigation'] });

Real-World Results

Applying these techniques to my portfolio:

• Lighthouse score: 100/100
• First Contentful Paint: < 0.8s
• Time to Interactive: < 1.5s
• Bundle size: < 50KB (gzipped)

Conclusion

Performance optimization is an ongoing process. Measure, optimize, and measure again. Your users will thank you with better engagement and conversion rates.