DevPrep
  • Interview Prep
  • Projects
  • Resources
  • Pricing
  • About Us
Submit Question
DevPrep
  • Pricing
  • About Us
Submit Question
  1. Home
  2. Articles
  3. Frontend Engineering
  4. What is CDN and Why Do We Use It?
XLinkedInReddit
MediumFrontend Engineering

What is CDN and Why Do We Use It?

D
DevPrep Team
February 9, 2026·2 min read·0
Table of Contents
  • The Problem
  • What a CDN Does
  • How CDN Caching Works
  • What Should Go on a CDN
  • CDN Features Beyond Caching
  • DDoS Protection
  • Edge Computing
  • Image Optimization
  • Automatic Compression
  • Multi-CDN Strategy
  • Production Issues
  • Best Practices
  • Summary

By Rahul — Google Frontend Engineer

The Problem

Your server is in US-East. A user in Mumbai is 13,000 km away. Light in fiber travels at about 200,000 km/s. That is 65ms one way, 130ms round trip — just physics. Add server processing and you are looking at 200-500ms for every request.

What a CDN Does

A CDN (Content Delivery Network) places copies of your content on servers worldwide. The user's request goes to the nearest server (edge node) instead of your origin. Mumbai user hits a Mumbai edge node — 5ms instead of 130ms.

How CDN Caching Works

// First request from Mumbai user:
User → Mumbai Edge (cache miss) → Origin (US-East) → Mumbai Edge (caches) → User

// Second request from ANY Mumbai user:
User → Mumbai Edge (cache hit) → User
// Origin never contacted. Response in ~5ms.

What Should Go on a CDN

  • Static assets: JS bundles, CSS, images, fonts — cache forever with content hashing
  • HTML pages: With short TTL or stale-while-revalidate for dynamic sites
  • API responses: Public, cacheable data (product listings, blog posts)
  • Video/audio: Streaming media benefits hugely from edge delivery

CDN Features Beyond Caching

DDoS Protection

CDNs absorb traffic spikes across their global network. A 100 Gbps attack is distributed across hundreds of edge nodes.

Edge Computing

Modern CDNs run code at the edge (Cloudflare Workers, Vercel Edge Functions). You can do A/B testing, authentication, and personalization without hitting your origin.

Image Optimization

// CDN can transform images on-the-fly
https://cdn.example.com/photo.jpg?width=400&format=webp&quality=80
// Serves optimized version without you creating it

Automatic Compression

CDNs compress responses with Brotli or gzip automatically based on the client's Accept-Encoding header.

Multi-CDN Strategy

At scale, companies use multiple CDNs and route traffic based on performance:

// DNS-based routing
// If Cloudflare is slow in Asia, route Asian traffic to Akamai
// Real-time monitoring switches traffic in seconds

Production Issues

  • Cache invalidation: You deploy a bug fix but the CDN serves the old version. Use content hashing or explicit purge APIs
  • Cache stampede: Popular resource expires, thousands of requests hit origin simultaneously. Use stale-while-revalidate
  • Origin shield: Without it, each edge node independently requests from origin. With origin shield, one intermediate cache protects your origin

Best Practices

  • Put ALL static assets behind a CDN
  • Use content hashing for cache busting, not query strings
  • Set up origin shield to protect your backend
  • Monitor cache hit ratios — aim for 95%+
  • Use stale-while-revalidate for dynamic content

Summary

CDNs bring content closer to users, reducing latency from hundreds of milliseconds to single digits. Beyond caching, they provide DDoS protection, edge computing, and image optimization. Every production web app should use one.

Related Articles

MediumFrontend Engineering

System Design #12: Design a Multi-Step Form Wizard

7 min read
MediumFrontend Engineering

Mastering Senior-Level JavaScript Interview Concepts

2 min read
MediumFrontend Engineering

System Design #9: Design a Collaborative Text Editor

9 min read

Comments (0)

Sign in to leave a comment.

No comments yet. Be the first to comment.

Table of Contents

  • The Problem
  • What a CDN Does
  • How CDN Caching Works
  • What Should Go on a CDN
  • CDN Features Beyond Caching
  • DDoS Protection
  • Edge Computing
  • Image Optimization
  • Automatic Compression
  • Multi-CDN Strategy
  • Production Issues
  • Best Practices
  • Summary

Series

View all Frontend Engineering articles →

Practice

  • JavaScript
  • DSA
  • Machine Coding
  • System Design

Resources

  • Learning Tracks
  • Articles
  • Roadmaps
  • Compare Concepts
  • Glossary
  • Developer Tools
  • All Questions

Company

  • About
  • Pricing

Legal

  • Privacy Policy
  • Terms of Service
DevPrep

© 2026 DevPrep. All rights reserved.