CDN Optimization for Faster LCP: A Complete Guide

# nginx.conf -- origin configuration for CDN-backed deployment

# Enable Brotli compression (CDN caches the compressed version)
brotli on;
brotli_comp_level 6;
brotli_types text/html text/css application/javascript
             application/json image/svg+xml font/woff2;

# Tell CDN what can be cached and for how long
location ~* \.(css|js|woff2|svg)$ {
    add_header Cache-Control "public, max-age=31536000, immutable";
    add_header Vary "Accept-Encoding";
}

location ~* \.(jpg|jpeg|png|webp|avif|gif)$ {
    # Image CDN handles transformation; origin sets long TTL
    add_header Cache-Control "public, max-age=86400, stale-while-revalidate=604800";
}

location / {
    # HTML: cache at CDN for 5 min, serve stale for 1 day
    add_header Cache-Control "public, s-maxage=300, stale-while-revalidate=86400";
    # Vary only on Accept-Encoding (not User-Agent -- that fragments cache)
    add_header Vary "Accept-Encoding";
}

# wrangler.toml -- Cloudflare CDN configuration
name = "my-site"
compatibility_date = "2026-01-01"

# Route all traffic through Cloudflare CDN
routes = [
  { pattern = "example.com/*", zone_name = "example.com" }
]

# Cache rules via Cloudflare Cache Rules (set in dashboard or via API)
# Rule 1: Static assets -- cache everything, 1 year TTL
# Pattern: (http.request.uri.path matches "\.(css|js|woff2|png|jpg|avif)$")
# Action: Cache, Edge TTL = 31536000s, Browser TTL = 86400s

# Rule 2: HTML pages -- cache for 5 min
# Pattern: (http.request.uri.path matches "/$|\.html$")
# Action: Cache, Edge TTL = 300s, Respect Origin TTL = false

# Enable HTTP/3 (QUIC) -- dramatically reduces LCP on high-latency connections
# Dashboard: Speed > Optimization > Protocol Optimization > HTTP/3: ON

# Enable Brotli compression
# Dashboard: Speed > Optimization > Content Optimization > Brotli: ON

# Enable Early Hints (103 responses) -- browser preloads LCP image
# while CDN fetches the full HTML response from origin
# Dashboard: Speed > Optimization > Protocol Optimization > Early Hints: ON

// Multi-CDN health check script (runs server-side, e.g. as a cron job)
// Switches DNS to secondary CDN if primary latency exceeds threshold

const CDN_ENDPOINTS = {
  primary: 'https://cdn1.example.com/health',
  secondary: 'https://cdn2.example.com/health',
};

async function checkCDNHealth() {
  const results = await Promise.allSettled(
    Object.entries(CDN_ENDPOINTS).map(async ([name, url]) => {
      const start = performance.now();
      const res = await fetch(url, { signal: AbortSignal.timeout(2000) });
      const latency = performance.now() - start;
      return { name, latency, ok: res.ok };
    })
  );

  for (const result of results) {
    if (result.status === 'fulfilled') {
      const { name, latency, ok } = result.value;
      console.log(`CDN ${name}: ${ok ? 'healthy' : 'unhealthy'}, ${latency.toFixed(0)}ms`);

      // Alert if primary CDN p50 latency exceeds 50ms
      if (name === 'primary' && latency > 50) {
        await sendAlert(`Primary CDN latency degraded: ${latency.toFixed(0)}ms`);
      }
    }
  }
}

// Run every 60 seconds
setInterval(checkCDNHealth, 60_000);

// Cloudflare Worker: cache key normalization
// Deploy via wrangler or Cloudflare dashboard

const TRACKING_PARAMS = new Set([
  'utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term',
  'fbclid', 'gclid', 'gclsrc', 'dclid', 'msclkid', '_ga', 'ref',
]);

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);

    // Normalize trailing slash (/ and no slash = same content)
    if (url.pathname !== '/' && url.pathname.endsWith('/')) {
      url.pathname = url.pathname.slice(0, -1);
    }

    // Lowercase the pathname (prevent /Blog and /blog cache split)
    url.pathname = url.pathname.toLowerCase();

    // Strip tracking params from cache key
    for (const param of TRACKING_PARAMS) {
      url.searchParams.delete(param);
    }

    // Sort remaining params for consistent key ordering
    url.searchParams.sort();

    // Build normalized cache request
    const cacheKey = new Request(url.toString(), request);

    const cache = caches.default;
    let response = await cache.match(cacheKey);

    if (!response) {
      // Cache miss: fetch from origin with original URL (tracking params preserved for analytics)
      response = await fetch(request);

      if (response.ok) {
        // Clone and store in cache with normalized key
        ctx.waitUntil(cache.put(cacheKey, response.clone()));
      }
    }

    return response;
  },
};

// next.config.js -- Cache-Control strategy by route category

/** @type {import('next').NextConfig} */
module.exports = {
  async headers() {
    return [
      {
        // Marketing pages: change infrequently -- 1 hour CDN cache
        source: '/(about|pricing|features|contact)',
        headers: [{
          key: 'Cache-Control',
          value: 'public, s-maxage=3600, stale-while-revalidate=86400',
        }],
      },
      {
        // Blog posts: stable after publish -- 24 hour CDN cache
        source: '/blog/:slug',
        headers: [{
          key: 'Cache-Control',
          value: 'public, s-maxage=86400, stale-while-revalidate=604800',
        }],
      },
      {
        // Homepage: changes frequently -- 1 min CDN cache
        source: '/',
        headers: [{
          key: 'Cache-Control',
          value: 'public, s-maxage=60, stale-while-revalidate=3600',
        }],
      },
      {
        // Immutable static assets (hashed filenames)
        source: '/_next/static/:path*',
        headers: [{
          key: 'Cache-Control',
          value: 'public, max-age=31536000, immutable',
        }],
      },
    ];
  },
};

// TTL guidelines:
// Static assets (hashed): 1 year (immutable)
// Blog/docs content: 24h s-maxage + 7d stale-while-revalidate
// Product pages: 1h s-maxage + 24h stale-while-revalidate
// Homepage: 1-5min s-maxage + 1h stale-while-revalidate
// User-specific pages: Cache-Control: private (never CDN-cached)

// Cloudflare Image Resizing via Worker
// Route: /img/* -> this worker
// Requires Cloudflare Pro plan with Image Resizing enabled

export default {
  async fetch(request) {
    const url = new URL(request.url);

    // Parse transform params from URL query string
    // e.g. /img/hero.jpg?w=800&h=450&q=80
    const width  = parseInt(url.searchParams.get('w') || '0') || undefined;
    const height = parseInt(url.searchParams.get('h') || '0') || undefined;
    const quality = parseInt(url.searchParams.get('q') || '80');

    // Detect best supported format from Accept header
    const accept = request.headers.get('Accept') || '';
    const format = accept.includes('image/avif')  ? 'avif'
                 : accept.includes('image/webp')  ? 'webp'
                 : 'jpeg';

    // Build origin image URL (strip transform params)
    const originUrl = `https://origin.example.com${url.pathname}`;

    // Use Cloudflare's cf.image transform (edge-side, no origin round trip after cache)
    return fetch(originUrl, {
      cf: {
        image: {
          width,
          height,
          quality,
          format,
          fit: 'cover',
          metadata: 'none', // Strip EXIF -- reduces file size
        },
      },
    });
  },
};

// Performance impact:
// JPEG 2400x1600 original: ~620 KB
// WebP 800x533 q=80:       ~58 KB  (91% smaller)
// AVIF 800x533 q=80:       ~38 KB  (94% smaller)
// LCP improvement: ~1.2s faster on 4G connections

<!-- Optimal LCP image markup with CDN-based image optimization -->

<!-- Use <picture> with type hints so browser skips formats it can't decode -->
<picture>
  <source
    type="image/avif"
    srcset="
      https://img.example.com/hero.jpg?w=400&f=avif  400w,
      https://img.example.com/hero.jpg?w=800&f=avif  800w,
      https://img.example.com/hero.jpg?w=1200&f=avif 1200w
    "
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 80vw, 1200px"
  />
  <source
    type="image/webp"
    srcset="
      https://img.example.com/hero.jpg?w=400&f=webp  400w,
      https://img.example.com/hero.jpg?w=800&f=webp  800w,
      https://img.example.com/hero.jpg?w=1200&f=webp 1200w
    "
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 80vw, 1200px"
  />
  <img
    src="https://img.example.com/hero.jpg?w=800&f=jpeg"
    alt="Hero image description"
    width="800"
    height="450"
    fetchpriority="high"
    decoding="sync"
    loading="eager"
  />
</picture>

<!-- Key attributes for LCP images:
  fetchpriority="high"  -- promotes to high-priority network request
  loading="eager"       -- never lazy-load the LCP image
  decoding="sync"       -- don't defer decode (prevents layout delay)
  width + height        -- prevents layout shift (CLS) as image loads
-->

// next.config.js -- configure custom image CDN loader
/** @type {import('next').NextConfig} */
module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './lib/image-loader.ts',
    // Specify which external image origins are allowed
    remotePatterns: [
      { protocol: 'https', hostname: 'img.example.com' },
      { protocol: 'https', hostname: 'assets.example.com' },
    ],
    // Supported output sizes (CDN will cache each size separately)
    deviceSizes: [640, 750, 828, 1080, 1200, 1920],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    formats: ['image/avif', 'image/webp'],
    minimumCacheTTL: 86400, // 24h minimum edge cache for transformed images
  },
};

// lib/image-loader.ts
export default function imageLoader({ src, width, quality }) {
  const params = new URLSearchParams({
    url: src,
    w: width.toString(),
    q: (quality || 80).toString(),
  });
  return `https://img.example.com/resize?${params}`;
}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- CRITICAL: preconnect to CDN origins before any other resources -->
  <!-- This eliminates DNS + TCP + TLS latency for the first CDN request -->
  <link rel="preconnect" href="https://img.example.com" crossorigin>
  <link rel="preconnect" href="https://cdn.example.com">

  <!-- dns-prefetch for lower-priority third-party origins -->
  <link rel="dns-prefetch" href="https://analytics.example.com">
  <link rel="dns-prefetch" href="https://fonts.gstatic.com">

  <!-- CRITICAL: preload the LCP image -->
  <!-- imagesrcset tells browser which src to preload based on viewport -->
  <link
    rel="preload"
    as="image"
    href="https://img.example.com/hero.jpg?w=1200&f=avif"
    imagesrcset="
      https://img.example.com/hero.jpg?w=400&f=avif   400w,
      https://img.example.com/hero.jpg?w=800&f=avif   800w,
      https://img.example.com/hero.jpg?w=1200&f=avif 1200w
    "
    imagesizes="(max-width: 600px) 100vw, (max-width: 1200px) 80vw, 1200px"
    fetchpriority="high"
    crossorigin
  />

  <!-- Preload critical web fonts from CDN -->
  <link
    rel="preload"
    href="https://cdn.example.com/fonts/brand-regular.woff2"
    as="font"
    type="font/woff2"
    crossorigin
  />

  <title>Example Page</title>
</head>

<!-- Resource hint performance impact (4G, 80ms RTT):
  Without preconnect:  +320ms for CDN connection setup
  With preconnect:     +0ms (connection already established)
  Without preload LCP: LCP image discovered after HTML parse (~300ms)
  With preload LCP:    LCP image fetch starts immediately (<50ms)
  Combined savings:    400-600ms improvement to LCP
-->

// app/layout.tsx -- Root layout with CDN resource hints

import type { Metadata } from 'next';

export const metadata: Metadata = {
  // Next.js App Router injects these as <link> tags in <head>
  other: {
    // Preconnect hints (Next.js doesn't have a built-in API for these,
    // so we render them manually in the layout component)
  },
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        {/* CDN preconnect -- must appear before any resource from these origins */}
        <link rel="preconnect" href="https://img.example.com" crossOrigin="anonymous" />
        <link rel="preconnect" href="https://cdn.example.com" />

        {/* Preload LCP image -- only on pages where this is the hero */}
        {/* For dynamic LCP images, move this to the individual page component */}
      </head>
      <body>{children}</body>
    </html>
  );
}

// app/page.tsx -- Preload page-specific LCP image
export default function HomePage() {
  const lcpImageUrl = 'https://img.example.com/homepage-hero.jpg';

  return (
    <>
      {/* Inject preload hint for this page's LCP image */}
      <link
        rel="preload"
        as="image"
        href={`${lcpImageUrl}?w=1200&f=avif`}
        // @ts-ignore -- imagesrcset is a valid attribute
        imagesrcset={`${lcpImageUrl}?w=400&f=avif 400w, ${lcpImageUrl}?w=800&f=avif 800w, ${lcpImageUrl}?w=1200&f=avif 1200w`}
        imagesizes="(max-width: 600px) 100vw, 1200px"
        fetchPriority="high"
      />
      <main>{/* page content */}</main>
    </>
  );
}

// Cloudflare Worker: add Server-Timing headers for RUM observability
export default {
  async fetch(request, env, ctx) {
    const startTime = Date.now();
    const response = await fetch(request);
    const duration = Date.now() - startTime;

    // Cloudflare exposes cache status via CF-Cache-Status header
    const cacheStatus = response.headers.get('CF-Cache-Status') || 'UNKNOWN';

    // Map Cloudflare cache statuses to timing metrics
    // HIT = served from edge cache (fast)
    // MISS = fetched from origin (slow)
    // STALE = served stale content while revalidating
    // BYPASS = cache bypassed (e.g., cookies present)
    // EXPIRED = entry expired, fetching fresh from origin

    const newHeaders = new Headers(response.headers);
    newHeaders.set(
      'Server-Timing',
      [
        `cdn;desc="${cacheStatus}";dur=${cacheStatus === 'HIT' ? 1 : duration}`,
        `origin;dur=${cacheStatus !== 'HIT' ? duration : 0}`,
        `total;dur=${duration}`,
      ].join(', ')
    );

    // Read this in RUM with PerformanceServerTiming API:
    // const entries = performance.getEntriesByType('navigation');
    // entries[0].serverTiming.forEach(t => console.log(t.name, t.duration));

    return new Response(response.body, {
      status: response.status,
      headers: newHeaders,
    });
  },
};

// rum.js -- Track CDN cache status alongside LCP in real user monitoring

// Read Server-Timing entries from the navigation request
function getCDNTiming() {
  const navEntry = performance.getEntriesByType('navigation')[0];
  if (!navEntry?.serverTiming) return null;

  const timings = {};
  for (const entry of navEntry.serverTiming) {
    timings[entry.name] = { duration: entry.duration, description: entry.description };
  }
  return timings;
}

// Read LCP from PerformanceObserver
const lcpData = { value: null };
new PerformanceObserver((list) => {
  const entries = list.getEntries();
  lcpData.value = entries[entries.length - 1].startTime;
}).observe({ type: 'largest-contentful-paint', buffered: true });

// Send combined LCP + CDN cache status to your analytics endpoint
window.addEventListener('visibilitychange', () => {
  if (document.visibilityState !== 'hidden') return;

  const cdn = getCDNTiming();
  const payload = {
    lcp: lcpData.value,
    cdn_status: cdn?.cdn?.description, // 'HIT', 'MISS', 'STALE', etc.
    origin_duration: cdn?.origin?.duration,
    url: location.href,
    timestamp: Date.now(),
  };

  // Use sendBeacon for non-blocking delivery
  navigator.sendBeacon('/analytics/rum', JSON.stringify(payload));
});

// Correlate LCP with cache status to find pages where
// cache misses (MISS/EXPIRED) are causing poor LCP scores