Web Performance Optimization Complete Guide 2025: Core Web Vitals, Loading Strategies, and Rendering Patterns

Performance and business metrics:
├── 3s+ load time → 53% bounce (Google)
├── 100ms delay → 1% revenue loss (Amazon)
├── 500ms delay → 20% traffic drop (Google)
├── 1s improvement → 7% conversion boost (Walmart)
└── 2s improvement → 50% bounce rate reduction (COOK)

Performance budget example:
├── Initial JS load: under 200KB (gzip)
├── Initial CSS load: under 50KB (gzip)
├── Total page weight: under 1.5MB
├── LCP: under 2.5s
├── INP: under 200ms
├── CLS: under 0.1
├── Time to First Byte: under 600ms
└── Request count: under 50

LCP target elements:
├── img elements
├── video elements (poster image)
├── Elements with CSS background-image
├── Block-level elements containing text nodes
└── image elements within svg

<!-- 1. Preload hero image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

<!-- 2. Set fetchpriority on LCP image -->
<img src="/hero.webp" alt="Hero" fetchpriority="high" loading="eager" />

<!-- 3. Optimize server response time -->
<!-- TTFB target: under 200ms -->

/* 4. Font loading optimization */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: swap;
}

INP optimization strategies:
1. Break up long tasks
   - Split tasks over 50ms into smaller units
   - Use requestIdleCallback, scheduler.yield()

2. Free the main thread
   - Move heavy computations to Web Workers
   - Remove unnecessary synchronous JS

3. Optimize event handlers
   - Apply debounce / throttle
   - Use passive event listeners

// Long task splitting example
async function processLargeList(items: Item[]) {
  const CHUNK_SIZE = 50;

  for (let i = 0; i < items.length; i += CHUNK_SIZE) {
    const chunk = items.slice(i, i + CHUNK_SIZE);
    processChunk(chunk);

    // Give the browser a chance to render
    await scheduler.yield();
  }
}

// scheduler.yield polyfill
if (!('scheduler' in globalThis)) {
  (globalThis as any).scheduler = {
    yield: () => new Promise(resolve => setTimeout(resolve, 0))
  };
}

<!-- Prevent CLS: specify image dimensions -->
<img src="/photo.webp" width="800" height="600" alt="Photo" />

<!-- Prevent CLS: set min-height for dynamic content -->
<div style="min-height: 250px;">
  <!-- Ad or dynamic content -->
</div>

/* Prevent CLS: minimize layout shift during font loading */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: optional; /* or swap */
  size-adjust: 100.5%;
  ascent-override: 95%;
  descent-override: 22%;
  line-gap-override: 0%;
}

Image format comparison (same quality):
├── JPEG: 100KB (baseline)
├── WebP: 70KB (-30%)
├── AVIF: 50KB (-50%)
└── JXL (JPEG XL): 55KB (-45%)

Browser support (2025):
├── WebP: 97%+ (no IE)
├── AVIF: 92%+ (Safari 16.4+)
└── JXL: Removed from Chrome, supported in Safari/Firefox

<!-- picture element for format fallback -->
<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" alt="Hero image" width="1200" height="600" />
</picture>

<!-- Responsive images with srcset and sizes -->
<img
  srcset="
    /hero-400w.webp 400w,
    /hero-800w.webp 800w,
    /hero-1200w.webp 1200w,
    /hero-1600w.webp 1600w
  "
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
  src="/hero-800w.webp"
  alt="Hero image"
  width="1200"
  height="600"
  loading="lazy"
  decoding="async"
/>

<!-- Native lazy loading -->
<img src="/photo.webp" loading="lazy" decoding="async" alt="Photo" />

// Blur placeholder implementation
function BlurImage({ src, alt, width, height, blurDataURL }: ImageProps) {
  return (
    <div style={{ position: 'relative', width, height }}>
      {/* Blur placeholder */}
      <img
        src={blurDataURL}
        alt=""
        style={{
          position: 'absolute',
          inset: 0,
          filter: 'blur(20px)',
          transform: 'scale(1.1)',
        }}
      />
      {/* Actual image */}
      <img
        src={src}
        alt={alt}
        width={width}
        height={height}
        loading="lazy"
        decoding="async"
        onLoad={(e) => {
          e.currentTarget.style.opacity = '1';
        }}
        style={{ position: 'relative', opacity: 0, transition: 'opacity 0.3s' }}
      />
    </div>
  );
}

// React lazy + Suspense (Route-based splitting)
import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

// Conditional dynamic import
async function handleExport() {
  // Load xlsx library only when needed
  const XLSX = await import('xlsx');
  const workbook = XLSX.utils.book_new();
  // ...
}

// Bad: import entire library
import _ from 'lodash';
_.debounce(fn, 300);

// Good: import only what you need
import debounce from 'lodash/debounce';
debounce(fn, 300);

// Better: use native or lightweight alternatives
// lodash.debounce: 1.4KB vs lodash: 72KB

// Bundle analysis with webpack-bundle-analyzer
// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  // Next.js config
});

// webpack splitChunks configuration
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          priority: 10,
        },
        common: {
          minChunks: 2,
          priority: -10,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

<!-- Normal: blocks parsing -->
<script src="app.js"></script>

<!-- async: download async, execute immediately (may block parsing) -->
<script src="analytics.js" async></script>

<!-- defer: download async, execute after DOM parsing (order preserved) -->
<script src="app.js" defer></script>

<!-- module: same behavior as defer -->
<script type="module" src="app.js"></script>

Script loading timeline:
normal:  [HTML parsing...] [download] [execute] [HTML parsing...]
async:   [HTML parsing......download......] [execute] [HTML parsing...]
defer:   [HTML parsing......download.............] [execute]

<!-- Inline critical CSS -->
<head>
  <style>
    /* Only minimum CSS needed for above-the-fold content */
    body { margin: 0; font-family: system-ui; }
    .header { height: 60px; background: #fff; }
    .hero { height: 400px; display: flex; align-items: center; }
  </style>

  <!-- Load remaining CSS asynchronously -->
  <link rel="preload" href="/styles.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'" />
  <noscript><link rel="stylesheet" href="/styles.css" /></noscript>
</head>

/* Limit rendering scope with contain */
.card {
  contain: layout style paint;
  /* Or optimize offscreen elements with content-visibility */
  content-visibility: auto;
  contain-intrinsic-size: 0 300px;
}

/* GPU acceleration hints with will-change */
.animated-element {
  will-change: transform;
  /* Warning: overuse wastes memory */
}

// PurgeCSS configuration (postcss.config.js)
module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: [
        './src/**/*.{js,jsx,ts,tsx}',
        './public/index.html'
      ],
      defaultExtractor: content =>
        content.match(/[\w-/:]+(?<!:)/g) || [],
      safelist: ['html', 'body', /^data-/]
    })
  ]
};

/* swap: fallback font → web font (FOUT occurs, text shown immediately) */
@font-face {
  font-family: 'MyFont';
  font-display: swap;
  src: url('/fonts/myfont.woff2') format('woff2');
}

/* optional: use web font if fast, keep fallback if slow (minimal CLS) */
@font-face {
  font-family: 'MyFont';
  font-display: optional;
  src: url('/fonts/myfont.woff2') format('woff2');
}

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

/* Traditional: separate file per weight (400, 500, 600, 700 = 4 files) */
/* Variable Font: single file for all weights */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

/* Usage */
.light { font-weight: 300; }
.regular { font-weight: 400; }
.bold { font-weight: 700; }

# Generate CJK font subset with pyftsubset
# pip install fonttools brotli
pyftsubset NotoSansKR-Regular.otf \
  --text-file=korean-chars.txt \
  --output-file=NotoSansKR-subset.woff2 \
  --flavor=woff2

# Result: 4.5MB → 300KB (with 2,350 Korean characters)

CSR flow:
Browser        Server
  │─ HTML req ────→│
  │←─ Empty HTML ──│
  │─ JS req ──────→│
  │←─ JS bundle ───│
  │ [Parse/Execute] │
  │─ API req ─────→│
  │←─ Data ────────│
  │ [Render]        │
  ▼ Display         ▼

SSR flow:
Browser        Server
  │─ HTML req ────→│
  │                │ [Data fetching]
  │                │ [HTML rendering]
  │←─ Full HTML ───│
  │ [Display]       │
  │─ JS req ──────→│
  │←─ JS bundle ───│
  │ [Hydration]     │
  ▼ Interactive     ▼

// Next.js App Router Streaming SSR
import { Suspense } from 'react';

async function SlowComponent() {
  const data = await fetchSlowData(); // Takes 3 seconds
  return <div>{/* render data */}</div>;
}

export default function Page() {
  return (
    <div>
      {/* Rendered immediately */}
      <Header />
      <Hero />

      {/* Streaming: sent progressively when ready */}
      <Suspense fallback={<Skeleton />}>
        <SlowComponent />
      </Suspense>

      {/* Rendered immediately */}
      <Footer />
    </div>
  );
}

// Next.js ISR
// app/products/[id]/page.tsx
export const revalidate = 3600; // Regenerate every hour

async function ProductPage({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

export default ProductPage;

// Generate static paths
export async function generateStaticParams() {
  const products = await getTopProducts(100);
  return products.map(p => ({ id: p.id }));
}

HTTP cache strategies:
├── Static assets (JS/CSS/images)
│   Cache-Control: public, max-age=31536000, immutable
│   (filename includes hash: app.abc123.js)
│
├── HTML
│   Cache-Control: public, max-age=0, must-revalidate
│   (always verify with server)
│
├── API responses
│   Cache-Control: private, max-age=60, stale-while-revalidate=300
│   (60s cache, 5min stale allowed)
│
└── User-specific data
    Cache-Control: private, no-cache
    (verify with server every time)

stale-while-revalidate behavior:
Request 1: [Cache miss] → Server → Response + cache stored
Request 2: [Cache hit, fresh] → Immediate response
Request 3: [Cache hit, stale] → Immediate response (stale) + background refresh
Request 4: [Cache hit, fresh] → Immediate response (updated data)

// SWR library (React)
import useSWR from 'swr';

function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher, {
    revalidateOnFocus: true,
    revalidateOnReconnect: true,
    refreshInterval: 30000, // Refresh every 30s
  });

  if (isLoading) return <Skeleton />;
  if (error) return <Error />;
  return <UserCard user={data} />;
}

// Service Worker caching strategies
// sw.js
const CACHE_NAME = 'app-v1';
const STATIC_ASSETS = [
  '/',
  '/styles.css',
  '/app.js',
  '/offline.html'
];

// Install: pre-cache static assets
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache =>
      cache.addAll(STATIC_ASSETS)
    )
  );
});

// Fetch: Cache First + Network Fallback
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(cached => {
      if (cached) return cached;

      return fetch(event.request).then(response => {
        const clone = response.clone();
        caches.open(CACHE_NAME).then(cache =>
          cache.put(event.request, clone)
        );
        return response;
      }).catch(() => {
        return caches.match('/offline.html');
      });
    })
  );
});

CDN cache hierarchy:
User → [Browser Cache] → [CDN Edge] → [CDN Origin Shield] → [Server]

CDN header examples:
Static assets:
  Cache-Control: public, max-age=31536000, immutable
  CDN-Cache-Control: public, max-age=31536000

Dynamic content:
  Cache-Control: public, max-age=0, must-revalidate
  CDN-Cache-Control: public, max-age=60, stale-while-revalidate=300
  Surrogate-Control: max-age=3600

<!-- DNS Prefetch: resolve external domain DNS early -->
<link rel="dns-prefetch" href="//api.example.com" />
<link rel="dns-prefetch" href="//cdn.example.com" />

<!-- Preconnect: DNS + TCP + TLS early connection -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

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

<!-- Preload: prioritize current-page critical resources -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/hero.webp" as="image" />

<!-- fetchpriority for resource prioritization -->
<!-- Hero image: high priority -->
<img src="/hero.webp" fetchpriority="high" />

<!-- Offscreen image: low priority -->
<img src="/below-fold.webp" fetchpriority="low" loading="lazy" />

<!-- Critical script: high priority -->
<script src="/critical.js" fetchpriority="high"></script>

HTTP/1.1 vs HTTP/2 vs HTTP/3:
┌──────────────┬──────────────┬──────────────┬──────────────┐
│  Feature     │  HTTP/1.1    │  HTTP/2      │  HTTP/3      │
├──────────────┼──────────────┼──────────────┼──────────────┤
│ Multiplexing │ No           │ Supported    │ Supported    │
│ Header Comp  │ None         │ HPACK        │ QPACK        │
│ Server Push  │ None         │ Supported    │ Removed      │
│ HOL Blocking │ TCP level    │ TCP level    │ Solved(QUIC) │
│ Transport    │ TCP          │ TCP          │ QUIC(UDP)    │
│ Connection   │ TCP+TLS      │ TCP+TLS      │ 0-RTT able   │
└──────────────┴──────────────┴──────────────┴──────────────┘

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [pull_request]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci && npm run build
      - name: Run Lighthouse CI
        uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: './lighthouserc.json'
          uploadArtifacts: true

{
  "ci": {
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.9 }],
        "categories:best-practices": ["warn", { "minScore": 0.9 }],
        "categories:seo": ["error", { "minScore": 0.9 }],
        "first-contentful-paint": ["error", { "maxNumericValue": 2000 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }],
        "interactive": ["error", { "maxNumericValue": 5000 }]
      }
    }
  }
}

// Measure and report Web Vitals
import { onLCP, onINP, onCLS, onFCP, onTTFB } from 'web-vitals';

function sendToAnalytics(metric: any) {
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating,
    delta: metric.delta,
    id: metric.id,
    navigationType: metric.navigationType,
  });

  // Send asynchronously with Beacon API
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/vitals', body);
  } else {
    fetch('/api/vitals', { body, method: 'POST', keepalive: true });
  }
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);
onFCP(sendToAnalytics);
onTTFB(sendToAnalytics);

Performance monitoring tools:
├── Synthetic Monitoring (Lab Data)
│   ├── Lighthouse CI (automated)
│   ├── WebPageTest (detailed analysis)
│   └── PageSpeed Insights (Google)
│
├── Real User Monitoring (Field Data)
│   ├── Chrome UX Report (CrUX)
│   ├── web-vitals library
│   └── Commercial: Datadog RUM, New Relic
│
└── Bundle Analysis
    ├── webpack-bundle-analyzer
    ├── source-map-explorer
    └── bundlephobia.com

// Server Component (default - NOT included in JS bundle)
// app/products/page.tsx
async function ProductsPage() {
  // Fetch data directly on server (no API route needed)
  const products = await db.product.findMany();

  return (
    <div>
      <h1>Products</h1>
      {products.map(p => (
        <ProductCard key={p.id} product={p} />
      ))}
    </div>
  );
}

// Client Component (only for parts needing interaction)
// components/AddToCart.tsx
'use client';

import { useState } from 'react';

export function AddToCart({ productId }: { productId: string }) {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(c => c + 1)}>
      Add to Cart ({count})
    </button>
  );
}

import Image from 'next/image';

// Auto WebP/AVIF conversion, responsive, lazy loading
function HeroSection() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1200}
      height={600}
      priority  // Set priority for LCP image
      sizes="(max-width: 768px) 100vw, 1200px"
      quality={85}
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,..."
    />
  );
}

// Remote images
function Avatar({ user }: { user: User }) {
  return (
    <Image
      src={user.avatarUrl}
      alt={user.name}
      width={48}
      height={48}
      loading="lazy"
    />
  );
}

// Auto-optimization with next/font (self-hosted, zero CLS)
import { Inter, Noto_Sans_KR } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
});

const notoSansKR = Noto_Sans_KR({
  subsets: ['latin'],
  weight: ['400', '500', '700'],
  display: 'swap',
  variable: '--font-noto-sans-kr',
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko" className={`${inter.variable} ${notoSansKR.variable}`}>
      <body>{children}</body>
    </html>
  );
}

// app/blog/[slug]/page.tsx

// Static generation + ISR (60 seconds)
export const revalidate = 60;

// Or fully static
export const dynamic = 'force-static';

// Or always dynamic
export const dynamic = 'force-dynamic';

// Runtime selection
export const runtime = 'edge'; // Edge Runtime (fast TTFB)
// export const runtime = 'nodejs'; // Node.js Runtime (default)