CDN là gì — vì sao web load nhanh ở Hà Nội nhưng chậm ở Mỹ (hoặc ngược lại)

Hiểu đơn giản nhất

Tưởng tượng bạn có xưởng sản xuất bia ở Hà Nội. Người Hà Nội mua bia → vận chuyển 10 phút. Người Sài Gòn mua bia → vận chuyển 30 giờ (1.700 km). Người Mỹ mua → vận chuyển 30 ngày tàu container.

Cách 1 — Không CDN: Mọi đơn hàng đều ship từ Hà Nội. Khách xa = lâu + đắt + dễ hư.

Cách 2 — Có CDN: Bạn thuê kho vệ tinh ở Sài Gòn + Bangkok + Singapore + LA + Tokyo. Mỗi kho có sẵn 100 thùng bia bán chạy. Khách Sài Gòn order → kho Sài Gòn ship 10 phút (không cần đợi từ Hà Nội).

CDN làm điều tương tự cho web content:

• Origin server (xưởng gốc) — server thật của bạn lưu HTML, ảnh, video, JS, CSS
• POP (Point of Presence) — kho vệ tinh ở 100-300 thành phố trên thế giới
• Edge cache — bản copy của file ở mỗi POP

User Hà Nội xem ảnh blog → fetch từ Cloudflare POP HCM (~10ms), không phải từ origin US (~150ms).

Tại sao bạn cần biết

• Web load 100-500ms vs 3-5 giây — khoảng cách CDN tạo ra cho khách xa. Bounce rate giảm 30-50% khi load < 2 giây.
• Tiết kiệm 50-90% bandwidth origin. Cloudflare cache 80% request → bill hosting giảm đáng kể. Web 1M page view/tháng có thể giảm $200 → $40.
• DDoS protection MIỄN PHÍ. Cloudflare hấp thụ attack ở quy mô khổng lồ — bot Trung Quốc spam 100k request/giây không hạ được web bạn.
• Hide origin IP. Khi proxy bật, hacker scan IP server chính không tìm thấy → tăng security đáng kể.
• HTTPS miễn phí. Cloudflare Universal SSL bật 1 click, không cần Certbot.
• Hiểu khi nào KHÔNG nên cache. Cart, dashboard, user profile = data per-user → KHÔNG cache HTML. Sai = 2 user thấy data của nhau.

Cách CDN hoạt động

Bước 1: User request file

User Hà Nội mở vietcodex.com. Browser cần fetch:

• HTML (động — từ origin)
• CSS, JS (static — cacheable)
• Ảnh hero, logo (static — cacheable)
• Font (static — cacheable)

Bước 2: DNS lookup → CDN POP gần nhất

DNS của Cloudflare là anycast — cùng IP 104.16.x.x được announce từ 300 POP. Router internet tự chọn POP gần user nhất.

User HN → DNS trả IP của POP Hà Nội (Cloudflare có POP HN từ 2023).

Bước 3: Browser fetch từ POP

User → POP HN (5-10ms) → POP có file?

Cache HIT (POP có sẵn):

• POP trả file ngay → user nhận trong 5-20ms
• Không tốn bandwidth origin

Cache MISS (POP chưa có):

• POP fetch file từ origin (HN → US 150ms hoặc HN → VN origin 5ms)
• POP cache lại với TTL (4 giờ - 1 tuần)
• User chờ 1 lần, các user sau cùng POP được HIT

Bước 4: TTL hết → re-fetch

POP cache giữ file đến TTL. Sau đó:

• User mới request → POP fetch lại origin → check file đổi chưa
• Nếu file không đổi (ETag/Last-Modified match) → 304 Not Modified, dùng cache cũ
• Nếu đổi → fetch mới + cache lại

Cloudflare — CDN phổ biến nhất

Cloudflare có ~20% market share toàn cầu, free tier rộng nhất. Setup 5 phút:

Setup Cloudflare cho domain mới

1. Đăng ký cloudflare.com (free)
2. Add Site → nhập yourdomain.com
3. Cloudflare scan DNS records hiện tại của bạn
4. Cloudflare cấp 2 nameserver (vd tia.ns.cloudflare.com + pete.ns.cloudflare.com)
5. Đổi nameserver tại nhà đăng ký domain (Namecheap/GoDaddy/PA Vietnam)
6. Đợi 5 phút - 24 giờ propagate
7. Cloudflare email "Site is now active"

Sau đó trong dashboard:

• DNS → bật Proxy (cloud cam) cho A/CNAME record của @ và www
• SSL/TLS → chọn Full (strict) nếu origin có HTTPS, Full nếu HTTP
• Speed → Optimization → bật Auto Minify, Brotli, Early Hints
• Caching → Configuration → set Browser Cache TTL = 4 hours

Free tier giới hạn

• ✅ Unlimited bandwidth
• ✅ Unlimited request
• ✅ DDoS protection (Layer 7)
• ✅ Universal SSL
• ❌ KHÔNG có WAF custom rules (cần $20/tháng Pro)
• ❌ KHÔNG có Image Optimization (cần Pro)
• ❌ KHÔNG có per-request analytics (chỉ aggregate)

Cho 95% web vừa-nhỏ, free tier đủ.

Các loại content có thể cache

Header Cache-Control quan trọng nhất

Backend gửi:

Cache-Control: public, max-age=300, s-maxage=3600, stale-while-revalidate=600

Image Optimization với CDN

CDN modern (Cloudflare Images, Vercel Image, Bunny Optimizer) tự động:

1. Format conversion — JPG → AVIF/WebP cho browser hỗ trợ (giảm 30-50% size)
2. Resize on-the-fly — gửi URL ?w=400 để fetch ảnh 400px width
3. Lazy load tag — chỉ load ảnh khi user scroll tới
4. Blur placeholder — preview blur 10x10px trong khi ảnh chính load

Một ảnh blog 2MB JPG → CDN serve 200KB AVIF + responsive resize → 90% bandwidth saved.

Ví dụ thực tế: vietcodex.com với Cloudflare

User Hà Nội mở https://vietcodex.com/dich-vu:

1. DNS lookup → Cloudflare POP HN (anycast)
2. Browser fetch HTML từ POP HN
   - POP cache HIT? Có (HTML cached 5 phút sau khi build)
   - Latency 5-10ms
3. Browser parse HTML → fetch:
   - /_next/static/css/app.abc123.css → POP HIT, 5ms
   - /_next/static/chunks/main.def456.js → POP HIT, 5ms
   - /wiki/co-ban/cookies-session-token/hero.webp → POP HIT, 8ms
4. Tổng FCP (First Contentful Paint): ~150-300ms

Cùng request từ Tokyo:
- POP Tokyo có cache giống HN (Cloudflare sync)
- Latency tương tự ~150-300ms

Cùng request không có CDN:
- TCP handshake từ Tokyo tới origin HN: 80ms
- HTML fetch: 250ms
- 3 file static (4 round trip each): 300ms × 3 = 900ms
- Tổng: ~1.500ms (5x chậm hơn)

Cái gì có thể sai

Chọn CDN

Tóm tắt 1 dòng

CDN = kho vệ tinh global cho web content. User gần POP nào thì load từ POP đó, giảm latency 100-500ms cho static + tiết kiệm 50-90% bandwidth origin. Cloudflare free tier đủ cho 95% web vừa-nhỏ, bonus DDoS protection + SSL miễn phí. Cache HTML cho landing/blog, KHÔNG cache cho dashboard per-user. Cache invalidation là việc khó nhất — set TTL ngắn cho HTML, dài cho static asset có hash filename.

Đọc tiếp

• Cloud, VPS, Shared Hosting — chọn nhà cho web theo quy mô — CDN pair với hosting để tăng tốc
• Caching toàn cảnh — 5 tầng cache giữa user và database — CDN là 1 tầng trong stack cache (sắp có)
• Core Web Vitals — 3 số Google chấm điểm tốc độ — CDN giúp cải thiện LCP đáng kể (sắp có)
• Domain, Hosting, DNS — 3 thứ phải mua riêng — đổi nameserver sang Cloudflare là bước 1