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

เนื้อหาเกี่ยวข้อง — บทความที่เกี่ยวข้อง: Ansible Collection Cache Strategy Redis

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

แนะนำเพิ่มเติม — หนังสือเทรดที่ SiamCafeBook

เนื้อหาเกี่ยวข้อง — ดูเพิ่มเติมเรื่อง C# MAUI Real-time Processing

เนื้อหาเกี่ยวข้อง — ดูเพิ่มเติมเรื่อง Azure Front Door Log Management ELK — คู่มือฉบับสมบูรณ์ 2026