Performance Optimization Guides

#Overview

Performance is not a feature—it's a foundational requirement. This guide covers everything from Core Web Vitals to edge caching, bundle optimization, and real-world monitoring. Follow these patterns to ensure your applications load instantly, interact smoothly, and remain stable under load.

#Core Web Vitals

Google's Core Web Vitals measure real-world user experience. Aim for the "Good" thresholds to maximize SEO and conversion rates.

Optimize LCP by prioritizing above-the-fold content, using loading="eager" on hero images, and serving pre-connected resources. Reduce INP by minimizing main-thread work, deferring offscreen images, and using web workers for heavy computations.

#Asset Optimization

Assets typically account for 70-90% of total page weight. Compress, modernize, and lazy-load strategically.

Images

<!-- Use modern formats with fallbacks -->
<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" loading="lazy" decoding="async" width="800" height="450">
</picture>

Fonts

Use font-display: swap, preload critical fonts, and subset character sets to reduce payload.

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

Scripts & Styles

Defer non-critical JavaScript. Inline critical CSS above the fold. Use async or defer appropriately.

#Caching Strategies

Effective caching reduces server load and speeds up repeat visits. Layer caching from browser to CDN to application.

# Nginx / Apache Cache Headers
AddHeader Cache-Control "public, max-age=31536000, immutable" /assets/static/*
AddHeader Cache-Control "public, max-age=0, must-revalidate" /api/*
AddHeader Cache-Control "stale-while-revalidate=60, stale-if-error=300" /cdn/*

For service workers, implement CacheFirst for static assets, NetworkFirst for API/data, and StaleWhileRevalidate for third-party scripts.

#Build & Bundle Optimization

Tree-shaking, code splitting, and modern bundlers drastically reduce initial payload.

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash', 'date-fns']
        }
      }
    },
    target: 'esnext',
    minify: 'esbuild'
  }
})

Split routes and heavy dependencies using dynamic imports. Defer non-critical UI components until interaction. Target modern JavaScript features for newer browsers while serving polyfills selectively.

#Edge & CDN Configuration

Push computation closer to users. Leverage edge functions for auth, personalization, and data fetching.

# .git/edge-config.json
{
  "cache": {
    "ttl": 86400,
    "bypassCookies": ["auth", "session"],
    "rules": [
      { "path": "/api/*", "ttl": 0, "noStore": true },
      { "path": "/static/*", "ttl": 31536000, "immutable": true }
    ]
  },
  "compression": { "brotli": true, "gzip": true },
  "security": { "hsts": true, "csp": "strict-dynamic" }
}

Enable Brotli compression, HTTP/2 or HTTP/3, and configure CDN purge hooks for instant cache invalidation on deploy. Use edge rendering for SEO-critical pages to reduce TTFB.

#Monitoring & Debugging

Performance is continuous. Implement observability to catch regressions before users do.

• Integrate @web/vitals for RUM collection
• Run automated Lighthouse CI in your pipeline
• Set up alerts for P95 LCP > 2.5s or INP > 200ms
• Use Chrome DevTools Performance panel to profile long tasks
• Monitor third-party script impact with requestIdleCallback or scheduler

// web-vitals integration
import { onLCP, onINP, onCLS } from 'web-vitals';

function sendToAnalytics({ name, value, id }) {
  // Send to .git analytics or your provider
  navigator.sendBeacon('/perf', JSON.stringify({ name, value, id }));
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

#Performance Quick Checklist

Use this as a deployment pre-flight or sprint retro reference.

• All images use modern formats + width/height attributes
• Critical CSS inlined, non-critical deferred
• JavaScript deferred or async; no render-blocking scripts
• Cache headers configured with content hashing
• CDN/Edge rules applied for static vs dynamic content
• Core Web Vitals passing in Lighthouse CI
• Real-user metrics collected and alerted on
• Third-party scripts loaded lazily or via ad-blocking friendly methods
• HTTP/3 enabled, Brotli compression active
• Layout shifts eliminated (aspect ratios, font swap, reserve space)