What is CDN and How Does It Work?

CDN (Content Delivery Network) is distributed server network used for fast delivery of static content (images, styles, scripts, videos, etc.) to users worldwide.

Essence: site content is cached and duplicated on many servers located in different points of planet (so-called edge servers). User loads resources from server closest to them, not from main hosting.

Why is CDN Needed?

Loading Acceleration

Content loads from closest server → faster render and page responsiveness.

Reducing Main Server Load

CDN serves all heavy files (CSS, JS, fonts, images), freeing backend.

Increased Reliability

If one of CDN servers is unavailable — user will get resource from nearest available.

Security

CDN can include DDoS attack protection, traffic filtering and SSL encryption.

What Can Be Stored in CDN?

• Static files: .css, .js, .html
• Fonts (.woff, .ttf)
• Images (.jpg, .png, .svg, .webp)
• Video and audio
• SPA bundles (React, Vue, Angular)

Popular CDN Examples

• Google Fonts, Font Awesome, Bootstrap CDN, etc.

CDN Usage Example

Connecting Bootstrap via CDN

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
/>