Web Performance Optimization: A Complete Guide to Sub-Second Load Times

// Web Vitals measurement in production
import { getCLS, getFID, getLCP, getFCP, getTTFB } from 'web-vitals';

function sendToAnalytics(metric) {
  // Send to analytics endpoint
  const body = JSON.stringify({
    name: metric.name,
    value: Math.round(metric.value),
    rating: metric.rating,
    delta: metric.delta,
    id: metric.id,
    navigationType: metric.navigationType,
    // Additional context
    url: window.location.href,
    userAgent: navigator.userAgent,
    effectiveType: navigator.connection?.effectiveType,
  });

  // Use sendBeacon for reliability
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/analytics', body);
  } else {
    fetch('/api/analytics', {
      body,
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      keepalive: true,
    });
  }
}

// Measure Core Web Vitals
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);
getFCP(sendToAnalytics);
getTTFB(sendToAnalytics);

// Performance Observer for custom metrics
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('Performance entry:', {
      name: entry.name,
      type: entry.entryType,
      startTime: entry.startTime,
      duration: entry.duration,
    });
  }
});

observer.observe({ 
  entryTypes: ['navigation', 'resource', 'paint', 'measure'] 
});

// Custom performance marks
performance.mark('api-request-start');
await fetchData();
performance.mark('api-request-end');
performance.measure('api-request', 'api-request-start', 'api-request-end');

const measure = performance.getEntriesByName('api-request')[0];
console.log('API request took:', measure.duration, 'ms');

// Code splitting with dynamic imports
// Before: Loading everything upfront
import { HeavyComponent } from './HeavyComponent';
import { AdminPanel } from './AdminPanel';
import { Analytics } from './Analytics';

// After: Load on demand
const HeavyComponent = lazy(() => import('./HeavyComponent'));
const AdminPanel = lazy(() => import('./AdminPanel'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/heavy" element={<HeavyComponent />} />
        <Route path="/admin" element={<AdminPanel />} />
      </Routes>
    </Suspense>
  );
}

// Route-based code splitting with React Router
const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Profile = lazy(() => import('./pages/Profile'));

// Component-level splitting for modals/tooltips
function ProductPage() {
  const [showModal, setShowModal] = useState(false);
  
  // Only load modal when needed
  const Modal = lazy(() => import('./Modal'));
  
  return (
    <div>
      <button onClick={() => setShowModal(true)}>Details</button>
      {showModal && (
        <Suspense fallback={null}>
          <Modal onClose={() => setShowModal(false)} />
        </Suspense>
      )}
    </div>
  );
}

// Prefetch for predictable navigation
function Navigation() {
  const prefetchDashboard = () => {
    import('./pages/Dashboard'); // Prefetch on hover
  };
  
  return (
    <nav>
      <Link 
        to="/dashboard" 
        onMouseEnter={prefetchDashboard}
      >
        Dashboard
      </Link>
    </nav>
  );
}

// Webpack bundle analysis
// In webpack.config.js
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false,
      reportFilename: 'bundle-report.html',
    }),
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10,
        },
        common: {
          minChunks: 2,
          priority: 5,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

// Modern image formats and responsive images
<picture>
  {/* WebP for browsers that support it */}
  <source 
    type="image/webp" 
    srcSet="
      /images/hero-400.webp 400w,
      /images/hero-800.webp 800w,
      /images/hero-1200.webp 1200w
    "
    sizes="(max-width: 640px) 400px, (max-width: 1024px) 800px, 1200px"
  />
  
  {/* AVIF for even better compression */}
  <source 
    type="image/avif" 
    srcSet="
      /images/hero-400.avif 400w,
      /images/hero-800.avif 800w,
      /images/hero-1200.avif 1200w
    "
    sizes="(max-width: 640px) 400px, (max-width: 1024px) 800px, 1200px"
  />
  
  {/* Fallback JPEG */}
  <img 
    src="/images/hero-800.jpg" 
    alt="Hero image"
    loading="lazy"
    decoding="async"
    width="1200"
    height="600"
  />
</picture>

// Next.js Image component (automatic optimization)
import Image from 'next/image';

function ProductCard({ product }) {
  return (
    <div>
      <Image
        src={product.imageUrl}
        alt={product.name}
        width={400}
        height={300}
        placeholder="blur"
        blurDataURL={product.blurDataUrl}
        loading="lazy"
        quality={85}
      />
    </div>
  );
}

// Intersection Observer for custom lazy loading
function LazyImage({ src, alt }) {
  const [imageSrc, setImageSrc] = useState(null);
  const imageRef = useRef();
  
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setImageSrc(src);
            observer.unobserve(entry.target);
          }
        });
      },
      { rootMargin: '50px' } // Load 50px before entering viewport
    );
    
    if (imageRef.current) {
      observer.observe(imageRef.current);
    }
    
    return () => observer.disconnect();
  }, [src]);
  
  return (
    <img
      ref={imageRef}
      src={imageSrc || 'data:image/svg+xml,...'} // Placeholder
      alt={alt}
      loading="lazy"
    />
  );
}

// Image CDN configuration (Cloudinary example)
function optimizeImage(url, options = {}) {
  const {
    width,
    height,
    quality = 'auto',
    format = 'auto',
  } = options;
  
  const transformations = [
    `w_${width}`,
    height && `h_${height}`,
    `q_${quality}`,
    `f_${format}`,
  ].filter(Boolean).join(',');
  
  return `https://res.cloudinary.com/demo/image/upload/${transformations}/${url}`;
}

<!-- Inline critical CSS in <head> -->
<style>
  /* Critical above-the-fold styles */
  body { margin: 0; font-family: system-ui; }
  .header { background: #fff; padding: 1rem; }
  .hero { min-height: 400px; }
</style>

<!-- Defer non-critical CSS -->
<link rel="preload" href="/styles/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/styles/main.css"></noscript>

<!-- Font optimization with font-display -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link 
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" 
  rel="stylesheet"
>

<!-- Self-hosted fonts with preload -->
<link 
  rel="preload" 
  href="/fonts/inter-var.woff2" 
  as="font" 
  type="font/woff2" 
  crossorigin
>

<style>
  @font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-var.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap; /* Show fallback font immediately */
    font-style: normal;
  }
  
  /* System font stack as fallback */
  body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 
                 Roboto, Helvetica, Arial, sans-serif;
  }
</style>

<!-- DNS prefetch for third-party domains -->
<link rel="dns-prefetch" href="https://api.example.com">
<link rel="dns-prefetch" href="https://cdn.example.com">

<!-- Preconnect for critical third-party resources -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

<!-- Preload critical resources -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero.jpg" as="image">
<link rel="preload" href="/critical.js" as="script">

<!-- Prefetch for likely next navigation -->
<link rel="prefetch" href="/dashboard">
<link rel="prefetch" href="/api/user-data">

// Dynamic prefetching based on user behavior
function prefetchOnHover(url) {
  const link = document.createElement('link');
  link.rel = 'prefetch';
  link.href = url;
  document.head.appendChild(link);
}

// Prefetch on link hover
document.querySelectorAll('a[data-prefetch]').forEach(link => {
  link.addEventListener('mouseenter', () => {
    prefetchOnHover(link.href);
  }, { once: true });
});

// Prefetch based on viewport visibility
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const url = entry.target.dataset.prefetch;
      prefetchOnHover(url);
      observer.unobserve(entry.target);
    }
  });
});

document.querySelectorAll('[data-prefetch]').forEach(el => {
  observer.observe(el);
});

// Next.js Static Site Generation
export async function getStaticProps() {
  const posts = await fetchPosts();
  
  return {
    props: { posts },
    revalidate: 3600, // Regenerate every hour
  };
}

export default function Blog({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <ArticleCard key={post.id} post={post} />
      ))}
    </div>
  );
}

// Incremental Static Regeneration
export async function getStaticPaths() {
  // Generate top 100 pages at build time
  const topPosts = await fetchTopPosts(100);
  
  return {
    paths: topPosts.map(post => ({ params: { id: post.id } })),
    fallback: 'blocking', // Generate other pages on-demand
  };
}

// Server-Side Rendering for dynamic content
export async function getServerSideProps({ req, params }) {
  const user = await getUserFromRequest(req);
  const data = await fetchUserData(user.id);
  
  return {
    props: { user, data },
  };
}

// React Server Components (Next.js 13+)
async function BlogPost({ id }) {
  // This component runs on server
  const post = await db.posts.findUnique({ where: { id } });
  
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
      {/* Client component for interactivity */}
      <Comments postId={id} />
    </article>
  );
}

// Memoization to prevent unnecessary re-renders
import { memo, useMemo, useCallback } from 'react';

// Memoize expensive components
const ExpensiveComponent = memo(({ data }) => {
  const processedData = useMemo(() => {
    // Expensive computation
    return data.map(item => processItem(item));
  }, [data]);
  
  return <div>{processedData}</div>;
});

// Memoize callbacks to prevent child re-renders
function ParentComponent() {
  const [count, setCount] = useState(0);
  
  // Without useCallback, this creates new function on every render
  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);
  
  return <ChildComponent onClick={handleClick} />;
}

// Virtual scrolling for large lists
import { FixedSizeList } from 'react-window';

function LargeList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      {items[index].name}
    </div>
  );
  
  return (
    <FixedSizeList
      height={600}
      itemCount={items.length}
      itemSize={50}
      width="100%"
    >
      {Row}
    </FixedSizeList>
  );
}

// Debouncing expensive operations
import { useDebouncedCallback } from 'use-debounce';

function SearchInput() {
  const [query, setQuery] = useState('');
  
  const debouncedSearch = useDebouncedCallback(
    async (value) => {
      const results = await searchAPI(value);
      setResults(results);
    },
    300 // Wait 300ms after user stops typing
  );
  
  const handleChange = (e) => {
    const value = e.target.value;
    setQuery(value);
    debouncedSearch(value);
  };
  
  return <input value={query} onChange={handleChange} />;
}

// Lazy state initialization
function DataTable({ data }) {
  // Bad: Runs on every render
  const [sortedData, setSortedData] = useState(sortData(data));
  
  // Good: Only runs once
  const [sortedData, setSortedData] = useState(() => sortData(data));
  
  return <Table data={sortedData} />;
}

// Code splitting at component level
const HeavyChart = lazy(() => import('./HeavyChart'));

function Dashboard() {
  const [showChart, setShowChart] = useState(false);
  
  return (
    <div>
      <button onClick={() => setShowChart(true)}>Show Chart</button>
      {showChart && (
        <Suspense fallback={<ChartSkeleton />}>
          <HeavyChart />
        </Suspense>
      )}
    </div>
  );
}

// Reserve space for images
<img 
  src="/product.jpg" 
  alt="Product"
  width="400" 
  height="300" // Prevents layout shift
  loading="lazy"
/>

// CSS aspect ratio for responsive images
.image-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

// Skeleton screens for loading states
function ProductCard({ product, loading }) {
  if (loading) {
    return (
      <div className="skeleton" style={{ height: '400px' }}>
        <div className="skeleton-image" style={{ height: '200px' }} />
        <div className="skeleton-title" style={{ height: '24px' }} />
        <div className="skeleton-price" style={{ height: '20px' }} />
      </div>
    );
  }
  
  return (
    <div style={{ height: '400px' }}>
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p>{product.price}</p>
    </div>
  );
}

// Reserve space for ads/dynamic content
<div 
  className="ad-container" 
  style={{ minHeight: '250px' }}
>
  {/* Ad loads here */}
</div>

// Font loading without layout shift
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
  /* Define fallback metrics to match custom font */
  size-adjust: 100.06%;
  ascent-override: 95%;
  descent-override: 25%;
}

// HTTP/2 Server Push (in server config)
// Pushes critical resources before browser requests them
Link: </styles/critical.css>; rel=preload; as=style
Link: </scripts/app.js>; rel=preload; as=script

// Brotli compression (Nginx config)
gzip on;
gzip_types text/plain text/css application/json application/javascript;
brotli on;
brotli_types text/plain text/css application/json application/javascript;

// Service Worker for offline and caching
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/',
        '/styles/main.css',
        '/scripts/app.js',
        '/images/logo.svg',
      ]);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      // Cache hit - return response
      if (response) {
        return response;
      }
      
      // Clone request for cache
      const fetchRequest = event.request.clone();
      
      return fetch(fetchRequest).then((response) => {
        // Check if valid response
        if (!response || response.status !== 200) {
          return response;
        }
        
        // Clone response for cache
        const responseToCache = response.clone();
        
        caches.open('v1').then((cache) => {
          cache.put(event.request, responseToCache);
        });
        
        return response;
      });
    })
  );
});

// API request batching
class RequestBatcher {
  constructor(batchInterval = 50) {
    this.queue = [];
    this.timeout = null;
    this.batchInterval = batchInterval;
  }
  
  add(request) {
    return new Promise((resolve, reject) => {
      this.queue.push({ request, resolve, reject });
      
      if (!this.timeout) {
        this.timeout = setTimeout(() => this.flush(), this.batchInterval);
      }
    });
  }
  
  async flush() {
    if (this.queue.length === 0) return;
    
    const batch = this.queue.splice(0);
    this.timeout = null;
    
    try {
      const response = await fetch('/api/batch', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(batch.map(item => item.request)),
      });
      
      const results = await response.json();
      
      batch.forEach((item, index) => {
        item.resolve(results[index]);
      });
    } catch (error) {
      batch.forEach(item => item.reject(error));
    }
  }
}

const batcher = new RequestBatcher();

// Usage
const user = await batcher.add({ type: 'getUser', id: 123 });
const posts = await batcher.add({ type: 'getPosts', userId: 123 });
// Both requests batched into single HTTP request

// Defer third-party scripts
<script src="https://analytics.example.com/script.js" defer></script>

// Load after main content
window.addEventListener('load', () => {
  // Load analytics after page interactive
  const script = document.createElement('script');
  script.src = 'https://analytics.example.com/script.js';
  document.body.appendChild(script);
});

// Facade pattern for heavy embeds
function YouTubeEmbed({ videoId }) {
  const [loaded, setLoaded] = useState(false);
  
  if (!loaded) {
    return (
      <div 
        className="youtube-facade"
        style={{ backgroundImage: `url(https://i.ytimg.com/vi/${videoId}/hqdefault.jpg)` }}
        onClick={() => setLoaded(true)}
      >
        <button className="play-button">Play Video</button>
      </div>
    );
  }
  
  return (
    <iframe
      src={`https://www.youtube.com/embed/${videoId}?autoplay=1`}
      frameBorder="0"
      allow="autoplay; encrypted-media"
      allowFullScreen
    />
  );
}

// Monitor third-party performance
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.name.includes('third-party-domain.com')) {
      console.warn('Slow third-party resource:', {
        url: entry.name,
        duration: entry.duration,
        size: entry.transferSize,
      });
    }
  }
});

observer.observe({ entryTypes: ['resource'] });

// Lighthouse CI configuration
module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000'],
      numberOfRuns: 3,
    },
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 0.9 }],
        'first-contentful-paint': ['error', { maxNumericValue: 2000 }],
        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
        'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
        'total-blocking-time': ['error', { maxNumericValue: 300 }],
      },
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

// Webpack performance budget
module.exports = {
  performance: {
    maxAssetSize: 250000, // 250KB
    maxEntrypointSize: 250000,
    hints: 'error',
  },
};