Back
Web Fundamentals

How CDNs Work: Edge Delivery, Caching & Performance

Web Fundamentals
Build & Deployment: Monorepo, CI/CD, Strategies & Release SafetyState Management: Choosing the Right SolutionRedux: Predictable State Container (RTK + RTK Query)React Query (TanStack Query): Server State CachingData Fetching Patterns: REST, GraphQL, tRPC & Real-timeGraphQL Fundamentals for Frontend: Shape, Caching, and TradeoffsgRPC-Web Fundamentals: Browser Constraints and Proxy ModelCaching Strategies: Client, Server & EdgeData Normalization: Organizing State for PerformanceAPI Design Best Practices: Pagination, Errors, Versioning & Type SafetyAPI Versioning Strategies for Frontend CompatibilityPagination: Offset vs Cursor-BasedRate Limiting & API Resilience: Retries, Backoff, Jitter, IdempotencyHow Frontend Developers Can Handle Millions of API Requests Without Crashing EverythingBrowser Storage: Cookies, SessionStorage, LocalStorage, IndexedDBReal-time Communication: WebSockets, SSE & PollingWebRTC: Real-Time Communication in the BrowserCore Web Vitals: LCP, INP & CLSPerformance Optimization Trade-offsCritical Resource Prioritization: Optimize Loading OrderCode Splitting: Optimize Bundle Size with Dynamic ImportsTree Shaking: Eliminate Dead Code from Your BundleLazy Loading: Load Resources On-DemandResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip and BrotliImage & Video Optimization: Modern Formats & TechniquesAdaptive Loading: Optimize for Device & NetworkList Virtualization: Render Large Lists EfficientlyWeb Workers vs Main Thread: Offloading Heavy WorkMemory Leaks in Frontend Apps: Detection & PreventionManaging Third-Party Scripts: Optimization StrategiesHow CDNs Work: Edge Delivery, Caching & PerformanceHTTP Caching Deep Dive: Cache-Control, ETag & RevalidationService Workers & Offline Strategy: Cache First, Network First & Update LifecyclePWA Fundamentals: Manifest, Installability & Offline UXCritical Rendering PathScript Loading: async vs deferEvent Loop: Understanding JavaScript Execution ModelJavaScript Module Systems: CJS vs ESM vs UMDDynamic Module Loading: import() FunctionImport on Interaction: Load When User InteractsImport on Visibility: Lazy Loading with IntersectionObserverBrowser Rendering Pipeline & Layout ThrashingRendering Strategies: CSR vs SSR vs SSG vs ISRStreaming SSR: Progressive HTML StreamingIslands Architecture: Independent Component HydrationReact Server Components: Zero-JS Server RenderingFramework Reactivity: React, Vue, Svelte & SolidHTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC) for Frontend PerformanceDNS Resolution: Path, TTL, Caching & Frontend ImpactCross-Site Scripting (XSS) AttacksCross-Site Request Forgery (CSRF) AttacksCORS Explained: Cross-Origin Resource SharingCORS Preflight in Practice: Credentials, Simple Requests & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? Understanding TLS/SSLAuthorization Best PracticesCookie Security & Session Hardening: SameSite, HttpOnly, Secure
easyPerformance

How CDNs Work: Edge Delivery, Caching & Performance

TL;DRCDN = global edge cache layer. Cache hits serve from nearby PoPs; misses fetch from origin and populate cache.
High Signal
Google
Meta
Netflix
Agoda
Cloudflare
30-Second Answerstart every interview with this

A CDN is a distributed network of edge servers that cache and deliver content closer to users. It improves speed (shorter distance), reduces origin load (fewer requests), boosts reliability (distributed capacity), and adds security (edge protections). The real power lies in smart cache policies.

Instead of every customer traveling to the main factory (origin server) for every item, local warehouses (edge PoPs) keep popular items in stock. When a customer orders, they get it from the nearest warehouse. If the item isn't there, the warehouse quickly restocks from the factory and keeps it for the next customer.

User Request
DNS routes to nearest Edge PoP
Cache Hit → Instant Response
Cache Miss → Fetch from Origin + Cache
Faster Delivery + Lower Origin Load

1How a CDN Works

Client → DNS/Anycast routes to nearest PoP → Edge checks cache key → Hit: serve immediately. Miss: fetch from origin, cache response, return to client.

2Key Benefits

Faster load times, reduced bandwidth/egress costs, higher availability through distribution, and edge-layer security (DDoS protection, WAF).

3Cache Policy Fundamentals

Cache key design, TTL / Cache-Control headers, and purge strategy determine hit ratio, freshness, and cost.

PropertyWithout CDNWith CDN
LatencyHigh (full distance to origin)Low (nearest edge)
SecurityBasicEnhanced at edge
Origin LoadHighLow (cache hits)
ReliabilitySingle point of failureDistributed

Without CDN

Latency

High (full distance to origin)

Security

Basic

Origin Load

High

Reliability

Single point of failure

With CDN

Latency

Low (nearest edge)

Security

Enhanced at edge

Origin Load

Low (cache hits)

Reliability

Distributed

Common questions

  • ›“How does a CDN work?”
  • ›“What are the main benefits of using a CDN?”
  • ›“Explain cache hits vs misses and how TTL affects them.”
  • ›“How would you design caching strategy for a high-traffic site?”

What interviewers look for

  • Clear request flow (DNS → Edge → Origin)
  • Understanding of cache keys, TTL, and purge mechanics
  • Balance between speed, freshness, and cost
  • Connection to frontend performance (LCP, TTFB)

Short answer (60 sec)

A CDN caches content at edge locations worldwide. Requests are routed to the nearest PoP. Cache hits are served instantly; misses fetch from origin and populate the cache. This reduces latency, origin load, and improves reliability and security.

Detailed answer (senior level)

CDNs use Anycast DNS to route users to the closest edge server. Smart cache policies (keys, TTL, purging) determine efficiency. Benefits include faster delivery, lower bandwidth costs, better availability, and edge security. Trade-offs involve staleness risk and cache invalidation complexity. In frontend, CDNs directly improve LCP and TTFB when configured correctly.

  • Thinking a CDN replaces proper origin hosting
  • Overly broad or incorrect cache keys (stale/personalized content)
  • Using very long TTLs without purge strategy
  • Forgetting to set proper Cache-Control headers
  • Assuming all content should be cached equally
Key Takeaways
  • ✓CDN = distributed edge cache layer between users and origin
  • ✓Cache hits serve from nearby PoP for speed and lower origin load
  • ✓Cache key + TTL + purge strategy control effectiveness
  • ✓Major benefits: speed, cost savings, reliability, security
  • ✓Not a replacement for good origin architecture
  • ✓Measure real impact on TTFB, LCP, and origin traffic
  • ✓Policy design matters more than just having a CDN
Previous TopicManaging Third-Party Scripts: Optimization StrategiesNext Topic HTTP Caching Deep Dive: Cache-Control, ETag & Revalidation

On this page