WordPress WooCommerce CDN Configuration

WooCommerce CDN Setup

WordPress WooCommerce CDN Cloudflare Cache Static Files Image CSS JS Performance DDoS SSL Speed Core Web Vitals LCP FCP

Cloudflare Configuration

# === Cloudflare CDN for WooCommerce ===

# Cloudflare Page Rules (สำคัญมาก)
# Rule 1: *example.com/wp-admin/*
#   → Cache Level: Bypass
#   → Security Level: High
#
# Rule 2: *example.com/cart/*
#   → Cache Level: Bypass
#
# Rule 3: *example.com/checkout/*
#   → Cache Level: Bypass
#
# Rule 4: *example.com/my-account/*
#   → Cache Level: Bypass
#
# Rule 5: *example.com/*
#   → Cache Level: Cache Everything
#   → Edge Cache TTL: 2 hours
#   → Browser Cache TTL: 4 hours

# .htaccess Cache-Control Headers
# 
#   ExpiresActive On
#   ExpiresByType image/jpeg "access plus 1 year"
#   ExpiresByType image/png "access plus 1 year"
#   ExpiresByType image/webp "access plus 1 year"
#   ExpiresByType text/css "access plus 1 month"
#   ExpiresByType application/javascript "access plus 1 month"
#   ExpiresByType font/woff2 "access plus 1 year"
# 

from dataclasses import dataclass

@dataclass
class CacheRule:
    path: str
    cache_action: str
    edge_ttl: str
    browser_ttl: str
    reason: str

rules = [
    CacheRule("/wp-admin/*",
        "Bypass (ห้าม Cache)",
        "N/A",
        "N/A",
        "Admin Panel ต้อง Dynamic ทุก Request"),
    CacheRule("/cart/*",
        "Bypass",
        "N/A",
        "N/A",
        "Cart เป็น Per-user Session Data"),
    CacheRule("/checkout/*",
        "Bypass",
        "N/A",
        "N/A",
        "Checkout มี Payment Token Session"),
    CacheRule("/my-account/*",
        "Bypass",
        "N/A",
        "N/A",
        "User Private Data Orders Address"),
    CacheRule("/wp-content/uploads/*",
        "Cache Everything",
        "1 month",
        "1 year",
        "รูปสินค้า Static ไม่เปลี่ยนบ่อย"),
    CacheRule("/*.css /*.js",
        "Cache Everything",
        "1 week",
        "1 month",
        "CSS JS Static Files Version ด้วย Query String"),
    CacheRule("/ (Homepage + Product Pages)",
        "Cache Everything",
        "2 hours",
        "4 hours",
        "HTML Cache + Purge เมื่อ Update"),
]

print("=== Cache Rules ===")
for r in rules:
    print(f"  [{r.path}] Action: {r.cache_action}")
    print(f"    Edge TTL: {r.edge_ttl} | Browser TTL: {r.browser_ttl}")
    print(f"    Reason: {r.reason}")

WooCommerce Plugin Setup

# === WP Rocket + Cloudflare Setup ===

# wp-config.php
# define('WP_CACHE', true);
# define('WP_MEMORY_LIMIT', '256M');
# define('WP_MAX_MEMORY_LIMIT', '512M');

# WP Rocket Settings:
# Cache → Enable Caching for Mobile
# Cache → Cache Lifespan: 10 hours
# File Optimization → Minify CSS ✓
# File Optimization → Combine CSS ✓ (ระวัง Break)
# File Optimization → Minify JS ✓
# File Optimization → Defer JS ✓
# Media → LazyLoad Images ✓
# Media → LazyLoad iframes ✓
# CDN → Enable CDN ✓
# CDN → CDN URL: cdn.example.com (ถ้าใช้ Pull Zone)
# Cloudflare → API Key → Auto Purge

@dataclass
class PluginConfig:
    plugin: str
    setting: str
    value: str
    impact: str

configs = [
    PluginConfig("WP Rocket",
        "Page Cache",
        "Enabled + Mobile Cache + 10h Lifespan",
        "TTFB ลด 50-70% HTML Cached"),
    PluginConfig("WP Rocket",
        "File Optimization",
        "Minify CSS/JS + Defer JS + Remove Unused CSS",
        "Page Size ลด 30-50%"),
    PluginConfig("WP Rocket",
        "Media",
        "LazyLoad Images + iframes + WebP",
        "Initial Load ลด 40-60%"),
    PluginConfig("WP Rocket",
        "CDN",
        "Cloudflare APO หรือ Bunny CDN URL",
        "Static Files จาก CDN Edge"),
    PluginConfig("ShortPixel",
        "Image Optimization",
        "Lossy + WebP + Resize Max 2048px",
        "Image Size ลด 60-80%"),
    PluginConfig("WP-Optimize",
        "Database",
        "Clean Revisions + Transients + Spam Weekly",
        "Database Query เร็วขึ้น 20-30%"),
]

print("=== Plugin Configuration ===")
for c in configs:
    print(f"  [{c.plugin}] {c.setting}")
    print(f"    Value: {c.value}")
    print(f"    Impact: {c.impact}")

Performance Monitoring

# === Core Web Vitals Monitoring ===

@dataclass
class WebVital:
    metric: str
    good: str
    needs_improvement: str
    poor: str
    woo_tips: str

vitals = [
    WebVital("LCP (Largest Contentful Paint)",
        "< 2.5s",
        "2.5s - 4.0s",
        "> 4.0s",
        "Preload Hero Image WebP CDN Cache Critical CSS"),
    WebVital("FID (First Input Delay) / INP",
        "< 100ms / < 200ms",
        "100-300ms / 200-500ms",
        "> 300ms / > 500ms",
        "Defer JS Remove Unused Plugins Reduce DOM Size"),
    WebVital("CLS (Cumulative Layout Shift)",
        "< 0.1",
        "0.1 - 0.25",
        "> 0.25",
        "Set Image Dimensions Font Display Swap Reserve Space"),
    WebVital("TTFB (Time to First Byte)",
        "< 200ms",
        "200ms - 600ms",
        "> 600ms",
        "Page Cache Redis Object Cache CDN Edge Cache"),
    WebVital("Total Page Size",
        "< 1.5MB",
        "1.5MB - 3MB",
        "> 3MB",
        "Image Optimization Minify Lazy Load Remove Bloat"),
]

print("=== Core Web Vitals ===")
for v in vitals:
    print(f"  [{v.metric}]")
    print(f"    Good: {v.good} | Needs Improvement: {v.needs_improvement} | Poor: {v.poor}")
    print(f"    WooCommerce Tips: {v.woo_tips}")

เคล็ดลับ

• Bypass: ห้าม Cache Cart Checkout My-account wp-admin
• APO: ใช้ Cloudflare APO $5/เดือน Cache HTML อัตโนมัติ
• WebP: แปลงรูปเป็น WebP ลดขนาด 25-35%
• Redis: ใช้ Redis Object Cache ลด Database Query
• HPOS: เปิด WooCommerce HPOS เร็วขึ้น 30-50%

CDN คืออะไร

Content Delivery Network Cache ใกล้ User ลด Latency Cloudflare Bunny CloudFront Static Files Image CSS JS DDoS SSL Speed SEO

สรุป

WordPress WooCommerce CDN Cloudflare Cache Rules Bypass Cart Checkout WP Rocket WebP Redis HPOS Core Web Vitals Performance Production