CDN cho shop online — 3 lớp asset, image, page cho WooCommerce

CDN giảm latency 50-200ms cho khách tỉnh xa, giảm bandwidth origin server 60-70%, cải thiện LCP mobile 30-50%. Cho shop online WooCommerce cần CDN 3 lớp: asset (CSS/JS/font), image (Polish/Optimizer), và page cache (full HTML).

Bài này hướng dẫn setup Cloudflare free từ DNS đến Workers + bypass cart/checkout đúng cách.

3 lớp CDN cần có cho shop online

Shop e-commerce khác blog tĩnh ở chỗ có dynamic page (cart, checkout, my-account) không cache được, đồng thời có image lớn (product gallery 8-12 ảnh/SKU) là phần chiếm phần lớn page weight.

Setup CDN cho shop cần phân tách 3 lớp rõ ràng — mỗi lớp có cache policy riêng. Cào bằng “cache everything” hoặc “no cache” đều sai, dẫn tới stale cart hoặc miss tối ưu hình ảnh.

Lớp 1 — Asset tĩnh CSS/JS/font

• TTL dài hạn 1 tháng: Asset có version hash trong filename (vd `style.abc123.css`) — đổi nội dung tự đổi tên, an toàn cache 1 tháng.
• Brotli compression: Giảm CSS/JS thêm 15-20% so với gzip — Cloudflare bật mặc định ở Speed tab, không cần config thêm.
• Edge cache aggressive: Cache Level “Cache Everything” cho `/wp-content/themes/*` và `/wp-content/plugins/*/assets/*`.

Lớp 2 — Image product gallery

• Auto WebP/AVIF: Cloudflare Polish (Pro plan) auto-convert sang format mới — fallback JPEG cho browser cũ. Giảm 25-50% file size không mất chất lượng visual.
• Resize on-the-fly: Cloudflare Image Resizing (Pro plan) tạo size phù hợp viewport — mobile 320px, tablet 768px, desktop 1200px từ 1 file gốc.
• Lazy load native: WordPress 5.5+ tự thêm `loading=”lazy”` cho img tag — combine với CDN giảm initial load 40-60%.

Lớp 3 — Page cache HTML

• Full page cache cho guest: 90% traffic là guest browse catalog — cache HTML edge serve dưới 50ms thay vì 500-1500ms từ origin.
• Bypass cho logged-in user: Detect cookie `wordpress_logged_in_*` để bypass cache — đảm bảo user thấy account, cart riêng của mình.
• Bypass cho dynamic path: `/cart/`, `/checkout/`, `/my-account/` luôn bypass — cache mấy URL này = order sai customer.

Cloudflare so với BunnyCDN và KeyCDN

3 CDN phổ biến cho shop VN. Cloudflare free tier mạnh nhất, BunnyCDN cheap nhất cho high bandwidth, KeyCDN cân bằng giữa giá và POP coverage.

Setup Cloudflare 5 bước

Cloudflare free tier setup mất 30 phút bao gồm signup, scan DNS, đổi nameserver, đợi propagate. Sau khi active, bật thêm 4-5 setting WooCommerce-specific để cache đúng và không break checkout.

5 bước register và point nameserver

1. Đăng ký cloudflare.com free tier.
2. Add domain → Cloudflare scan DNS records từ hosting hiện tại — verify đầy đủ A, CNAME, MX, TXT.
3. Cloudflare cung cấp 2 nameserver mới (vd `amy.ns.cloudflare.com`).
4. Đổi nameserver tại registrar (Namecheap, GoDaddy, Z.com, Mắt Bão).
5. Đợi 1-24 giờ DNS propagate, verify dashboard hiển thị “Active”.

Config setting cho WooCommerce

# SSL/TLS tab
SSL/TLS encryption mode: Full (Strict)  # Origin có Let's Encrypt valid
Edge Certificates: Universal SSL ON
Always Use HTTPS: ON
Automatic HTTPS Rewrites: ON
Minimum TLS Version: 1.2

# Speed tab
Auto Minify: ON cho JS, CSS, HTML
Brotli compression: ON
Rocket Loader: OFF  # Break WooCommerce checkout JS
Mirage: ON  # Mobile tối ưu hình ảnh

# Caching tab
Cache Level: Standard
Browser Cache TTL: 1 day
Always Online: ON
Development Mode: OFF

Page Rules cho WooCommerce

WooCommerce có dynamic page cần bypass cache. Free tier cho 3 Page Rules — đủ cover 90% case shop.

Pro tier cho 20 rules nếu cần phân tách phức tạp hơn (vd cache khác nhau cho mobile/desktop).

3 Page Rules quan trọng nhất

1. Bypass dynamic pages: Pattern *yourdomain.vn/cart* + */checkout* + */my-account* — Cache Level = Bypass.
2. Cache aggressive uploads: Pattern *yourdomain.vn/wp-content/uploads/* — Cache Level = Cache Everything, Edge TTL = 1 month.
3. Force HTTPS toàn site: Pattern *yourdomain.vn/* — Always Use HTTPS = ON, Auto Minify HTML+JS+CSS.

Pattern matching ưu tiên

Page Rules apply theo thứ tự trên xuống. Rule cụ thể (bypass cart) phải đặt TRƯỚC rule chung (cache everything site) — đảo thứ tự sẽ cache cart, sai logic checkout.

• Rule 1 (specific): Bypass cho cart/checkout/account — đặt cao nhất, match đầu tiên.
• Rule 2 (medium): Cache aggressive cho uploads folder — match thứ hai cho asset.
• Rule 3 (general): Force HTTPS toàn site — match cuối cùng cho mọi URL còn lại.

Tối ưu hình ảnh cho shop e-commerce

Image chiếm 60-70% page weight cho shop. Cloudflare Polish (Pro 20 USD/tháng) auto-convert WebP và lossless compression.

Free tier dùng plugin Smush hoặc ShortPixel pre-optimize trước upload.

Best practice image WooCommerce

• Format WebP/AVIF: WebP nhỏ hơn JPEG 25-35%, AVIF nhỏ hơn JPEG 50% — Polish auto-convert, fallback JPEG cho browser cũ.
• Generate 3 size: Thumbnail 150×150, medium 400×400, large 1200×1200 — WordPress auto qua `add_image_size()` trong functions.php.
• Lazy load native: WordPress 5.5+ thêm `loading=”lazy”` mặc định — verify F12 DevTools thấy attribute trên img tag.
• Responsive srcset: WordPress auto add srcset cho img upload — serve size phù hợp viewport, mobile không tải bản 1200px.
• Quality 80-85% JPEG: Vượt 90% file lớn không cần thiết, dưới 70% thấy blocky — mức lý tưởng 80-85% giữ visual quality.

Workers cho cache HTML và personalization

Cloudflare cache HTML aggressive cho guest user — 90% traffic served từ edge không qua origin. Logged-in user (cart, account) bypass cache.

Workers (free 100k request/ngày) cho custom logic edge — A/B testing, geo-personalization, locale routing.

// Worker script: cache HTML cho guest, bypass logged-in user

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);
  const cookies = request.headers.get('cookie') || '';

  // Bypass cache: logged-in user, dynamic pages
  if (cookies.includes('wordpress_logged_in_') ||
      cookies.includes('woocommerce_cart_hash') ||
      url.pathname.includes('/cart/') ||
      url.pathname.includes('/checkout/') ||
      url.pathname.includes('/my-account/')) {
    return fetch(request);
  }

  // Guest pages: aggressive cache 1 giờ
  const cacheUrl = new URL(request.url);
  const cacheKey = new Request(cacheUrl.toString(), request);
  const cache = caches.default;

  let response = await cache.match(cacheKey);
  if (!response) {
    response = await fetch(request);
    response = new Response(response.body, response);
    response.headers.set('Cache-Control', 'public, max-age=3600');
    response.headers.set('CF-Cache-Status', 'MISS');
    event.waitUntil(cache.put(cacheKey, response.clone()));
  }
  return response;
}

APO và Cache Everything cho shop SME

Cloudflare APO (Automatic Platform Optimization) là feature dedicated cho WordPress giá 5 USD/tháng cho 1 site (10 USD/tháng Free user). APO tự handle cache HTML và bypass logged-in user — không phải write Workers script như phần trên.

Khi nào dùng APO thay vì Workers

• Shop không có DevOps in-house: APO setup 1 click, không cần code — phù hợp shop SME muốn cache HTML mà không phải hire dev viết Workers.
• Shop WordPress chuẩn: APO support sẵn WordPress + WooCommerce cookie pattern — không cần config thêm logic detect logged-in.
• Budget hạn chế dưới Pro plan: 5 USD/tháng APO + Free tier = 5 USD/tháng, thấp hơn Pro 20 USD/tháng nếu chỉ cần cache HTML không cần Polish.

Setup APO 3 bước

1. Cloudflare Dashboard → Speed → Optimization → Automatic Platform Optimization → click “Purchase APO”.
2. Cài plugin “Cloudflare” official trên WordPress → connect với API token (Settings → API Tokens).
3. Plugin auto-detect WooCommerce, setup bypass cho `/cart/`, `/checkout/`, `/my-account/` — verify trong plugin dashboard.

Chiến lược purge cache khi update content

Cache aggressive (TTL 1 giờ HTML) tăng performance nhưng có trade-off: content update không xuất hiện ngay cho khách. Cần chiến lược purge thông minh — không purge toàn bộ (mất hit rate), không purge thiếu (stale content).

3 cách purge có chiến lược

• Purge by URL: Khi update 1 product, purge chỉ URL `yoursite.vn/iphone-15/` và parent category — không touch URL khác. Plugin Cloudflare official handle tự động.
• Purge by tag: Cloudflare Enterprise plan (cao) cho phép tag URL khi serve và purge theo tag — vd tag “category-iphone” purge toàn bộ URL liên quan iPhone.
• Purge by hostname: Khi deploy theme mới, purge toàn bộ hostname `yoursite.vn` — chấp nhận tạm thời mất hit rate đổi lấy theme mới hiển thị ngay.

Cron purge định kỳ giảm risk stale

Setup cron nightly 3h sáng auto-purge toàn bộ HTML cache. Lý do: catch trường hợp content update mà plugin purge miss (edge case rare).

3h sáng traffic thấp, cache rebuild tự nhiên trong 1-2 giờ, không impact UX khách.

5 lỗi phổ biến khi setup CDN cho shop

• Cart/checkout cache stale: Page rule không match đúng URL pattern — re-check pattern với wildcard `*`, đặt rule bypass TRÊN rule cache trong list.
• SSL “Too many redirects”: SSL mode set “Flexible” nhưng origin có SSL → loop redirect — đổi sang “Full (Strict)” và verify origin certificate valid.
• Image break sau enable Polish: Polish convert WebP nhưng theme cache img tag URL cũ — clear theme cache + browser cache, đợi Polish reprocess.
• Rocket Loader break checkout: Rocket Loader async load JS xung đột với WooCommerce checkout script — disable Rocket Loader hoặc exclude path `/checkout/`.
• Origin block Cloudflare IP: Firewall hosting block Cloudflare IP range — whitelist toàn bộ IP từ `cloudflare.com/ips` qua iptables hoặc cPanel firewall.

Câu hỏi thường gặp

Tài nguyên và bước tiếp theo

CDN là layer edge của stack performance shop online. Combine với cache backend (Redis) và optimize database để có full stack tối ưu.

Bài liên quan cùng cụm performance WooCommerce:

• Redis Object Cache cho WooCommerce — setup và hit rate 90% — layer cache database, làm song song với CDN edge.
• Tách database WooCommerce — HyperDB master-slave — scale DB khi shop vượt 100k SKU hoặc 10k đơn/ngày.
• WooCommerce lưu lượng cao — kiến trúc scale — overview kiến trúc full stack cho shop traffic cao.
• Dịch vụ thiết kế website WooCommerce — gói thi công shop kèm setup CDN và cache turnkey.

Cần Web22 setup Cloudflare CDN + Page Rules + Workers + tối ưu hình ảnh cho shop của bạn? Tư vấn shop online WooCommerce chuyên nghiệp — đội DevOps Web22 setup CDN end-to-end và monitor 30 ngày sau go-live.