What is a CDN?

  • CDN (Content Delivery Network): A global network of servers that delivers content (HTML, CSS, JS, images, videos) from the location closest to the user.
  • Improves:
  • Load times
  • Scalability
  • Reliability

Examples: Cloudflare, Akamai, Fastly, AWS CloudFront, Vercel Edge Network

Static vs Dynamic Assets

  • Static assets: Don’t change often (JS bundles, CSS, images). Perfect for CDN + caching.
  • Dynamic content: Personalized or real-time data (user dashboard, API responses). Usually not cached.

Caching Headers

Set via HTTP response headers:

# Cache asset for 30 days
Cache-Control: public, max-age=2592000, immutable  

# No caching
Cache-Control: no-store  

# Cache but revalidate
Cache-Control: public, max-age=0, must-revalidate
  • ETag: Identifier for file version.
  • Last-Modified: Browser revalidates if content changed.

Static Site Best Practices

  1. Minify & Compress – Use tools like terser, cssnano, gzip, Brotli.
  2. Use Hashes in Filenames – Example: app.8f9a2.js. Ensures updated assets bust cache.
  3. Lazy Loading – Images & components load only when needed.
  4. Preload Critical Assets – Fonts, hero images.
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
  1. Image Optimization – Use WebP/AVIF, responsive sizes (<img srcset>).
  2. Edge Caching – Deploy static content at edge (e.g., Vercel, Netlify).

Example: Nginx Static Asset Caching

location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?)$ {
    expires 6M;
    access_log off;
    add_header Cache-Control "public";
}

Best Practices Summary

  • Use immutable caching for assets with hashed filenames.
  • Short cache for HTML (since content changes).
  • Always compress responses with gzip/Brotli.
  • Serve static assets via CDN edge servers.