Web Performance Optimization 2025: From 4s to Sub-Second Load Times

// Break up long tasks with yielding
async function processLargeDataset(data: any[]) {
  const CHUNK_SIZE = 100;
  const results = [];
  
  for (let i = 0; i < data.length; i += CHUNK_SIZE) {
    const chunk = data.slice(i, i + CHUNK_SIZE);
    
    // Process chunk
    const chunkResults = chunk.map(item => expensiveOperation(item));
    results.push(...chunkResults);
    
    // Yield to main thread
    await scheduler.yield();
  }
  
  return results;
}

// Web Workers for heavy computation
// worker.js
self.addEventListener('message', (e) => {
  const { data, operation } = e.data;
  
  switch (operation) {
    case 'process':
      const result = heavyComputation(data);
      self.postMessage({ result });
      break;
  }
});

// main.js
const worker = new Worker('/worker.js');

function offloadToWorker(data: any): Promise<any> {
  return new Promise((resolve) => {
    worker.postMessage({ operation: 'process', data });
    worker.addEventListener('message', (e) => {
      resolve(e.data.result);
    }, { once: true });
  });
}

// Debouncing and throttling
function debounce<T extends (...args: any[]) => any>(
  func: T,
  wait: number
): (...args: Parameters<T>) => void {
  let timeout: NodeJS.Timeout;
  
  return (...args: Parameters<T>) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
}

function throttle<T extends (...args: any[]) => any>(
  func: T,
  limit: number
): (...args: Parameters<T>) => void {
  let inThrottle: boolean;
  
  return (...args: Parameters<T>) => {
    if (!inThrottle) {
      func(...args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

// Usage
const handleSearch = debounce(async (query: string) => {
  const results = await searchAPI(query);
  updateUI(results);
}, 300);

const handleScroll = throttle(() => {
  updateScrollPosition();
}, 100);

/* Reserve space for dynamic content */
.image-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Skeleton screens for loading states */
.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Font loading optimization */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap; /* Prevent FOIT */
  unicode-range: U+000-5FF; /* Latin characters */
}

/* Size container for ads/embeds */
.ad-container {
  min-height: 250px; /* Standard ad height */
  min-width: 300px;  /* Standard ad width */
}

/* CSS containment for performance */
.card {
  contain: layout style paint;
  /* Tells browser this element won't affect others */
}

// Route-based code splitting
import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

const HomePage = lazy(() => import('./pages/Home'));
const ProductPage = lazy(() => 
  import(/* webpackChunkName: "product" */ './pages/Product')
);
const AdminDashboard = lazy(() => 
  import(
    /* webpackChunkName: "admin" */
    /* webpackPrefetch: true */
    './pages/Admin'
  )
);

function App() {
  return (
    <Suspense fallback={<PageLoader />}>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/product/:id" element={<ProductPage />} />
        <Route path="/admin/*" element={<AdminDashboard />} />
      </Routes>
    </Suspense>
  );
}

// Component-level code splitting
const HeavyChart = lazy(() => 
  import(/* webpackChunkName: "charts" */ './components/HeavyChart')
);

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

// Conditional loading based on feature flags
function FeatureComponent({ feature }) {
  const Component = useMemo(() => {
    if (!feature.enabled) return null;
    
    return lazy(() => 
      import(`./features/${feature.name}/Component`)
    );
  }, [feature]);
  
  if (!Component) return null;
  
  return (
    <Suspense fallback={<FeatureSkeleton />}>
      <Component {...feature.props} />
    </Suspense>
  );
}

// webpack.config.js
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
    sideEffects: false,
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\/]node_modules[\/]/,
          name: 'vendors',
          priority: 10,
          reuseExistingChunk: true,
        },
        common: {
          minChunks: 2,
          priority: 5,
          reuseExistingChunk: true,
        },
      },
    },
  },
  module: {
    rules: [
      {
        test: /.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              plugins: [
                ['transform-imports', {
                  'lodash': {
                    transform: 'lodash/${member}',
                    preventFullImport: true
                  },
                  '@mui/material': {
                    transform: '@mui/material/${member}',
                    preventFullImport: true
                  }
                }]
              ]
            }
          }
        ]
      }
    ]
  }
};

// package.json - mark side effects
{
  "name": "my-library",
  "sideEffects": false, // or ["*.css", "*.scss"]
}

// Import only what you need
// Bad
import _ from 'lodash';
const result = _.debounce(fn, 300);

// Good
import debounce from 'lodash/debounce';
const result = debounce(fn, 300);

// Dynamic imports for conditional features
async function loadFeature(featureName: string) {
  switch (featureName) {
    case 'pdf':
      const { PDFViewer } = await import('./features/PDFViewer');
      return PDFViewer;
    case 'excel':
      const { ExcelViewer } = await import('./features/ExcelViewer');
      return ExcelViewer;
    default:
      return null;
  }
}

// Server push with HTTP/2
// nginx.conf
location / {
  http2_push /styles/main.css;
  http2_push /scripts/app.js;
  http2_push /fonts/main.woff2;
}

// Early hints (HTTP 103)
app.use((req, res, next) => {
  if (req.path === '/') {
    res.writeEarlyHints({
      link: [
        '</styles/main.css>; rel=preload; as=style',
        '</scripts/app.js>; rel=preload; as=script',
        '</fonts/main.woff2>; rel=preload; as=font; crossorigin'
      ]
    });
  }
  next();
});

// Connection pooling and keep-alive
import { Agent } from 'https';

const agent = new Agent({
  keepAlive: true,
  keepAliveMsecs: 1000,
  maxSockets: 50,
  maxFreeSockets: 10
});

async function fetchWithPooling(url: string) {
  return fetch(url, {
    agent,
    compress: true,
    headers: {
      'Accept-Encoding': 'br, gzip, deflate'
    }
  });
}

// Batch API requests
class BatchAPIClient {
  private queue: Map<string, Promise<any>> = new Map();
  private timeout: NodeJS.Timeout;
  
  async get(endpoint: string): Promise<any> {
    if (!this.queue.has(endpoint)) {
      this.queue.set(endpoint, this.createBatchPromise(endpoint));
      this.scheduleBatch();
    }
    
    return this.queue.get(endpoint);
  }
  
  private scheduleBatch() {
    if (this.timeout) return;
    
    this.timeout = setTimeout(() => {
      this.executeBatch();
    }, 10); // 10ms batching window
  }
  
  private async executeBatch() {
    const endpoints = Array.from(this.queue.keys());
    
    const response = await fetch('/api/batch', {
      method: 'POST',
      body: JSON.stringify({ requests: endpoints })
    });
    
    const results = await response.json();
    
    // Resolve individual promises
    endpoints.forEach((endpoint, index) => {
      const promise = this.queue.get(endpoint);
      promise.resolve(results[index]);
    });
    
    this.queue.clear();
    this.timeout = null;
  }
}

// Service Worker with cache strategies
// sw.js
const CACHE_VERSION = 'v1';
const CACHE_NAMES = {
  static: `static-${CACHE_VERSION}`,
  dynamic: `dynamic-${CACHE_VERSION}`,
  images: `images-${CACHE_VERSION}`
};

// Cache-first strategy for static assets
self.addEventListener('fetch', (event) => {
  const { request } = event;
  const url = new URL(request.url);
  
  // Different strategies for different resource types
  if (request.destination === 'image') {
    event.respondWith(cacheFirst(request, CACHE_NAMES.images));
  } else if (url.pathname.startsWith('/api/')) {
    event.respondWith(networkFirst(request, CACHE_NAMES.dynamic));
  } else {
    event.respondWith(staleWhileRevalidate(request, CACHE_NAMES.static));
  }
});

async function cacheFirst(request, cacheName) {
  const cache = await caches.open(cacheName);
  const cached = await cache.match(request);
  
  if (cached) {
    return cached;
  }
  
  const response = await fetch(request);
  
  if (response.ok) {
    cache.put(request, response.clone());
  }
  
  return response;
}

async function networkFirst(request, cacheName) {
  try {
    const response = await fetch(request);
    
    if (response.ok) {
      const cache = await caches.open(cacheName);
      cache.put(request, response.clone());
    }
    
    return response;
  } catch (error) {
    const cache = await caches.open(cacheName);
    return cache.match(request);
  }
}

async function staleWhileRevalidate(request, cacheName) {
  const cache = await caches.open(cacheName);
  const cached = await cache.match(request);
  
  const fetchPromise = fetch(request).then(response => {
    if (response.ok) {
      cache.put(request, response.clone());
    }
    return response;
  });
  
  return cached || fetchPromise;
}

// Browser cache headers
app.use((req, res, next) => {
  const assetType = getAssetType(req.path);
  
  switch (assetType) {
    case 'static':
      // Immutable assets with hash in filename
      res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
      break;
    
    case 'html':
      // No cache for HTML
      res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
      break;
    
    case 'api':
      // Short cache for API responses
      res.setHeader('Cache-Control', 'private, max-age=60, stale-while-revalidate=300');
      break;
    
    case 'image':
      // Long cache for images
      res.setHeader('Cache-Control', 'public, max-age=86400, stale-while-revalidate=604800');
      break;
  }
  
  next();
});

// Custom performance observer
class PerformanceMonitor {
  private metrics: Map<string, number> = new Map();
  
  constructor() {
    this.observeWebVitals();
    this.observeResources();
    this.trackCustomMetrics();
  }
  
  private observeWebVitals() {
    // Largest Contentful Paint
    new PerformanceObserver((list) => {
      const entries = list.getEntries();
      const lastEntry = entries[entries.length - 1];
      this.metrics.set('lcp', lastEntry.renderTime || lastEntry.loadTime);
    }).observe({ type: 'largest-contentful-paint', buffered: true });
    
    // First Input Delay
    new PerformanceObserver((list) => {
      const entry = list.getEntries()[0];
      this.metrics.set('fid', entry.processingStart - entry.startTime);
    }).observe({ type: 'first-input', buffered: true });
    
    // Cumulative Layout Shift
    let clsValue = 0;
    new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (!entry.hadRecentInput) {
          clsValue += entry.value;
          this.metrics.set('cls', clsValue);
        }
      }
    }).observe({ type: 'layout-shift', buffered: true });
  }
  
  private observeResources() {
    new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        const resource = entry as PerformanceResourceTiming;
        
        // Track slow resources
        if (resource.duration > 1000) {
          this.reportSlowResource({
            name: resource.name,
            duration: resource.duration,
            type: resource.initiatorType,
            size: resource.transferSize
          });
        }
      }
    }).observe({ type: 'resource', buffered: true });
  }
  
  private trackCustomMetrics() {
    // Time to Interactive
    const tti = this.calculateTTI();
    this.metrics.set('tti', tti);
    
    // Custom business metrics
    performance.mark('search-results-rendered');
    performance.measure(
      'search-performance',
      'search-initiated',
      'search-results-rendered'
    );
  }
  
  public report() {
    const data = {
      metrics: Object.fromEntries(this.metrics),
      connection: navigator.connection ? {
        effectiveType: navigator.connection.effectiveType,
        rtt: navigator.connection.rtt,
        downlink: navigator.connection.downlink
      } : null,
      device: {
        memory: navigator.deviceMemory,
        cpus: navigator.hardwareConcurrency,
        platform: navigator.platform
      },
      timestamp: Date.now()
    };
    
    // Send to analytics
    navigator.sendBeacon('/api/analytics/performance', JSON.stringify(data));
  }
}

// Initialize monitoring
const monitor = new PerformanceMonitor();

// Report when page is about to unload
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    monitor.report();
  }
});