WordPress WooCommerce Edge Computing — เพิ่ม Performance ร้านค้าออนไลน์ด้วย Edge

WooCommerce และ Edge Computing คืออะไร

WooCommerce เป็น open source e-commerce plugin สำหรับ WordPress ที่ใช้มากที่สุดในโลก มี market share มากกว่า 36% ของร้านค้าออนไลน์ทั้งหมด รองรับทุกประเภทสินค้าทั้ง physical products, digital downloads, subscriptions และ bookings

Edge Computing สำหรับ WooCommerce หมายถึงการ process requests ใกล้กับผู้ใช้มากที่สุด แทนที่จะส่ง request ทุกอย่างกลับไปที่ origin server ใช้ CDN edge nodes, edge functions และ edge caching เพื่อลด latency และเพิ่ม performance

ประโยชน์ของ Edge Computing สำหรับ WooCommerce ได้แก่ ลด Time to First Byte (TTFB) จาก 500ms+ เหลือ 50-100ms, รองรับ traffic spikes (flash sales, campaigns) ได้ดีขึ้น, ลด load บน origin server ประหยัด hosting costs, ปรับปรุง Core Web Vitals (LCP, FID, CLS) ส่งผลดีต่อ SEO, personalization ที่ edge (geo-based pricing, language) และ DDoS protection ที่ edge network

ติดตั้ง WooCommerce พร้อม Edge Optimization

ขั้นตอนติดตั้งและ optimize

# === WooCommerce Edge Setup ===

# 1. WordPress + WooCommerce Installation
# ===================================
# Using Docker for local development
cat > docker-compose.yml << 'EOF'
version: '3'
services:
  wordpress:
    image: wordpress:6.4-php8.2-apache
    ports:
      - "8080:80"
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: wp
      WORDPRESS_DB_PASSWORD: wp_pass
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - wp_data:/var/www/html
      - ./custom-plugins:/var/www/html/wp-content/plugins/custom
    depends_on:
      - db
      - redis

  db:
    image: mariadb:11
    environment:
      MYSQL_ROOT_PASSWORD: root_pass
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wp
      MYSQL_PASSWORD: wp_pass
    volumes:
      - db_data:/var/lib/mysql

  redis:
    image: redis:7-alpine
    ports:
      - "6379:6379"

  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
    depends_on:
      - wordpress

volumes:
  wp_data:
  db_data:
EOF

docker-compose up -d

# 2. Install WooCommerce via WP-CLI
docker exec wordpress wp plugin install woocommerce --activate
docker exec wordpress wp plugin install redis-cache --activate
docker exec wordpress wp plugin install wp-super-cache --activate

# 3. Nginx Edge Caching Configuration
cat > nginx.conf << 'NGINXEOF'
worker_processes auto;

events {
    worker_connections 4096;
}

http {
    include mime.types;
    
    # Cache zone
    proxy_cache_path /var/cache/nginx levels=1:2 
        keys_zone=woo_cache:100m max_size=10g inactive=60m;
    
    # Rate limiting
    limit_req_zone $binary_remote_addr zone=api:10m rate=30r/s;
    limit_req_zone $binary_remote_addr zone=checkout:10m rate=5r/s;
    
    upstream wordpress {
        server wordpress:80;
        keepalive 32;
    }
    
    server {
        listen 80;
        server_name shop.example.com;
        
        # Static assets — aggressive caching
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2|webp)$ {
            proxy_pass http://wordpress;
            proxy_cache woo_cache;
            proxy_cache_valid 200 30d;
            add_header X-Cache-Status $upstream_cache_status;
            add_header Cache-Control "public, max-age=2592000";
        }
        
        # Product pages — short cache
        location ~ ^/product/ {
            proxy_pass http://wordpress;
            proxy_cache woo_cache;
            proxy_cache_valid 200 5m;
            proxy_cache_bypass $cookie_woocommerce_items_in_cart;
            add_header X-Cache-Status $upstream_cache_status;
        }
        
        # Cart and Checkout — no cache
        location ~ ^/(cart|checkout|my-account)/ {
            proxy_pass http://wordpress;
            proxy_no_cache 1;
            proxy_cache_bypass 1;
            limit_req zone=checkout burst=10;
        }
        
        # WooCommerce REST API
        location ~ ^/wp-json/wc/ {
            proxy_pass http://wordpress;
            limit_req zone=api burst=50;
            proxy_cache woo_cache;
            proxy_cache_valid 200 1m;
        }
        
        # Default
        location / {
            proxy_pass http://wordpress;
            proxy_cache woo_cache;
            proxy_cache_valid 200 10m;
            proxy_cache_bypass $cookie_wordpress_logged_in;
        }
    }
}
NGINXEOF

echo "WooCommerce with edge caching installed"

CDN และ Edge Caching สำหรับ WooCommerce

ตั้งค่า CDN และ edge caching

#!/usr/bin/env python3
# woo_cdn_config.py — CDN Configuration for WooCommerce
import json
import logging
from typing import Dict, List

logging.basicConfig(level=logging.INFO)
logger = logging.getLogger("cdn")

class WooCDNConfig:
    def __init__(self, provider="cloudflare"):
        self.provider = provider
        self.rules = []
    
    def generate_cache_rules(self):
        rules = [
            {
                "name": "Static Assets",
                "match": "*.js, *.css, *.png, *.jpg, *.webp, *.svg, *.woff2",
                "edge_ttl": 2592000,  # 30 days
                "browser_ttl": 604800,  # 7 days
                "cache_level": "cache_everything",
            },
            {
                "name": "Product Images",
                "match": "/wp-content/uploads/*",
                "edge_ttl": 604800,  # 7 days
                "browser_ttl": 86400,  # 1 day
                "cache_level": "cache_everything",
                "image_optimization": True,
            },
            {
                "name": "Product Pages",
                "match": "/product/*",
                "edge_ttl": 300,  # 5 minutes
                "browser_ttl": 60,
                "cache_level": "cache_everything",
                "bypass_on_cookie": "woocommerce_items_in_cart",
            },
            {
                "name": "Category Pages",
                "match": "/product-category/*",
                "edge_ttl": 600,  # 10 minutes
                "browser_ttl": 120,
                "cache_level": "cache_everything",
            },
            {
                "name": "Cart & Checkout - No Cache",
                "match": "/cart/*, /checkout/*, /my-account/*",
                "edge_ttl": 0,
                "cache_level": "bypass",
            },
            {
                "name": "WooCommerce AJAX",
                "match": "/?wc-ajax=*",
                "edge_ttl": 0,
                "cache_level": "bypass",
            },
            {
                "name": "REST API - Short Cache",
                "match": "/wp-json/wc/v3/products*",
                "edge_ttl": 60,
                "cache_level": "cache_everything",
                "vary": "Accept-Encoding",
            },
        ]
        self.rules = rules
        return rules
    
    def generate_page_rules(self):
        """Generate Cloudflare Page Rules"""
        return [
            {
                "url": "shop.example.com/wp-admin/*",
                "settings": {"cache_level": "bypass", "security_level": "high"},
            },
            {
                "url": "shop.example.com/wp-login.php",
                "settings": {"cache_level": "bypass", "security_level": "under_attack"},
            },
            {
                "url": "shop.example.com/product/*",
                "settings": {
                    "cache_level": "cache_everything",
                    "edge_cache_ttl": 300,
                    "browser_cache_ttl": 60,
                },
            },
        ]
    
    def generate_worker_script(self):
        """Cloudflare Worker for advanced edge logic"""
        return """
// Cloudflare Worker for WooCommerce Edge
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);
  
  // Skip cache for logged-in users
  const cookies = request.headers.get('Cookie') || '';
  if (cookies.includes('wordpress_logged_in') || 
      cookies.includes('woocommerce_items_in_cart')) {
    return fetch(request);
  }
  
  // Geo-based currency
  const country = request.cf?.country || 'TH';
  const currency = getCurrency(country);
  
  // Check cache
  const cacheKey = new Request(url.toString() + '?currency=' + currency);
  const cache = caches.default;
  let response = await cache.match(cacheKey);
  
  if (!response) {
    response = await fetch(request);
    
    if (response.ok && !url.pathname.includes('/cart')) {
      const cloned = response.clone();
      // Cache for 5 minutes
      const headers = new Headers(cloned.headers);
      headers.set('Cache-Control', 'public, max-age=300');
      response = new Response(cloned.body, { ...cloned, headers });
      event.waitUntil(cache.put(cacheKey, response.clone()));
    }
  }
  
  return response;
}

function getCurrency(country) {
  const map = { TH: 'THB', US: 'USD', JP: 'JPY', GB: 'GBP' };
  return map[country] || 'USD';
}"""
    
    def estimate_savings(self, monthly_pageviews, origin_ttfb_ms=500):
        cache_hit_rate = 0.75  # 75% cache hit rate
        edge_ttfb_ms = 50
        
        cached_views = monthly_pageviews * cache_hit_rate
        uncached_views = monthly_pageviews * (1 - cache_hit_rate)
        
        avg_ttfb = (cached_views * edge_ttfb_ms + uncached_views * origin_ttfb_ms) / monthly_pageviews
        
        return {
            "monthly_pageviews": monthly_pageviews,
            "cache_hit_rate": f"{cache_hit_rate * 100}%",
            "origin_ttfb_ms": origin_ttfb_ms,
            "edge_ttfb_ms": edge_ttfb_ms,
            "avg_ttfb_ms": round(avg_ttfb, 1),
            "ttfb_improvement": f"{round((1 - avg_ttfb / origin_ttfb_ms) * 100, 1)}%",
            "origin_requests_saved": cached_views,
            "bandwidth_saved_pct": f"{cache_hit_rate * 100}%",
        }

config = WooCDNConfig()
rules = config.generate_cache_rules()
print("Cache Rules:", json.dumps(rules[:3], indent=2))
print("\nSavings:", json.dumps(config.estimate_savings(1000000), indent=2))

Performance Optimization

เพิ่ม performance สำหรับ WooCommerce

# === WooCommerce Performance Optimization ===

# 1. Redis Object Cache
# ===================================
# wp-config.php additions:
# define('WP_REDIS_HOST', 'redis');
# define('WP_REDIS_PORT', 6379);
# define('WP_REDIS_DATABASE', 0);
# define('WP_REDIS_MAXTTL', 86400);

# Enable Redis cache
# wp redis enable

# 2. Database Optimization
# ===================================
cat > optimize_db.sql << 'SQL'
-- Clean up WooCommerce transients
DELETE FROM wp_options WHERE option_name LIKE '%_transient_%';

-- Optimize product queries
CREATE INDEX idx_product_visibility ON wp_postmeta (meta_key, meta_value(20))
WHERE meta_key = '_visibility';

CREATE INDEX idx_product_stock ON wp_postmeta (meta_key, meta_value(10))
WHERE meta_key = '_stock_status';

-- Clean old sessions
DELETE FROM wp_woocommerce_sessions 
WHERE session_expiry < UNIX_TIMESTAMP();

-- Optimize tables
OPTIMIZE TABLE wp_posts, wp_postmeta, wp_options, 
    wp_woocommerce_order_items, wp_woocommerce_order_itemmeta;

-- Analyze slow queries
-- SET GLOBAL slow_query_log = 'ON';
-- SET GLOBAL long_query_time = 1;
SQL

# 3. PHP Performance
# ===================================
cat > php-optimization.ini << 'INI'
; PHP performance settings for WooCommerce
opcache.enable=1
opcache.memory_consumption=256
opcache.interned_strings_buffer=16
opcache.max_accelerated_files=10000
opcache.validate_timestamps=0
opcache.save_comments=1
opcache.fast_shutdown=1

; Memory
memory_limit=512M
max_execution_time=300
max_input_vars=5000

; Upload
upload_max_filesize=64M
post_max_size=64M
INI

# 4. Image Optimization Pipeline
# ===================================
#!/usr/bin/env python3
# image_optimizer.py

# import subprocess
# from pathlib import Path
# 
# def optimize_product_images(upload_dir):
#     """Optimize WooCommerce product images"""
#     formats = ['*.jpg', '*.jpeg', '*.png']
#     optimized = 0
#     saved_bytes = 0
#     
#     for fmt in formats:
#         for img in Path(upload_dir).rglob(fmt):
#             original_size = img.stat().st_size
#             
#             if img.suffix.lower() in ['.jpg', '.jpeg']:
#                 # JPEG optimization
#                 subprocess.run([
#                     'jpegoptim', '--strip-all', '--max=85',
#                     str(img)
#                 ], capture_output=True)
#             elif img.suffix.lower() == '.png':
#                 # PNG optimization
#                 subprocess.run([
#                     'optipng', '-o2', str(img)
#                 ], capture_output=True)
#             
#             # Generate WebP version
#             webp_path = img.with_suffix('.webp')
#             subprocess.run([
#                 'cwebp', '-q', '80', str(img), '-o', str(webp_path)
#             ], capture_output=True)
#             
#             new_size = img.stat().st_size
#             saved_bytes += original_size - new_size
#             optimized += 1
#     
#     return {"optimized": optimized, "saved_mb": round(saved_bytes / 1e6, 1)}

# 5. Lazy Loading and Prefetch
# ===================================
# Add to functions.php:
# // Preconnect to CDN
# function woo_preconnect_cdn() {
#     echo '';
#     echo '';
#     // Prefetch next product page
#     echo '';
# }
# add_action('wp_head', 'woo_preconnect_cdn', 1);

echo "Performance optimization complete"

Edge Functions สำหรับ E-Commerce

Edge functions สำหรับ WooCommerce

// === Edge Functions for WooCommerce ===

// 1. Geo-Based Pricing at Edge
// ===================================
// Cloudflare Worker / Netlify Edge Function

async function handleGeoPrice(request) {
  const url = new URL(request.url);
  const country = request.cf?.country || 'TH';
  
  // Currency mapping
  const currencies = {
    TH: { code: 'THB', rate: 1, symbol: '฿' },
    US: { code: 'USD', rate: 0.028, symbol: '$' },
    JP: { code: 'JPY', rate: 4.2, symbol: 'Â¥' },
    GB: { code: 'GBP', rate: 0.022, symbol: '£' },
  };
  
  const currency = currencies[country] || currencies['TH'];
  
  // Get original response
  const response = await fetch(request);
  
  if (!url.pathname.startsWith('/product/')) {
    return response;
  }
  
  let html = await response.text();
  
  // Inject currency data
  const script = `
    `;
  
  html = html.replace('', script + '');
  
  return new Response(html, {
    headers: {
      ...Object.fromEntries(response.headers),
      'X-Country': country,
      'X-Currency': currency.code,
    },
  });
}

// 2. A/B Testing for Product Pages
// ===================================
// async function handleABTest(request) {
//   const url = new URL(request.url);
//   
//   if (!url.pathname.startsWith('/product/')) {
//     return fetch(request);
//   }
//   
//   // Get variant from cookie or assign new one
//   const cookies = parseCookies(request.headers.get('Cookie') || '');
//   let variant = cookies['woo_ab'] || (Math.random() < 0.5 ? 'A' : 'B');
//   
//   const response = await fetch(request);
//   let html = await response.text();
//   
//   if (variant === 'B') {
//     // Variant B: Different CTA button
//     html = html.replace(
//       'Add to cart',
//       'Buy Now — Free Shipping'
//     );
//     html = html.replace(
//       'btn-primary',
//       'btn-success btn-lg'
//     );
//   }
//   
//   const headers = new Headers(response.headers);
//   headers.set('Set-Cookie', `woo_ab=; Path=/; Max-Age=604800`);
//   headers.set('X-AB-Variant', variant);
//   
//   return new Response(html, { status: response.status, headers });
// }

// 3. Cart Fragment Caching
// ===================================
// async function handleCartFragment(request) {
//   const url = new URL(request.url);
//   
//   // Only cache cart fragments for anonymous users
//   if (url.searchParams.get('wc-ajax') === 'get_refreshed_fragments') {
//     const cookies = request.headers.get('Cookie') || '';
//     
//     if (!cookies.includes('woocommerce_items_in_cart')) {
//       // Return empty cart fragment from edge
//       return new Response(JSON.stringify({
//         fragments: {
//           '.widget_shopping_cart_content': '
No products in the cart.
'
//         },
//         cart_hash: ''
//       }), {
//         headers: { 'Content-Type': 'application/json' }
//       });
//     }
//   }
//   
//   return fetch(request);
// }

console.log("Edge functions for WooCommerce defined");

Monitoring และ Analytics

Monitor performance ของ WooCommerce

#!/usr/bin/env python3
# woo_monitor.py — WooCommerce Performance Monitor
import json
import logging
from datetime import datetime
from typing import Dict, List

logging.basicConfig(level=logging.INFO)
logger = logging.getLogger("woo_monitor")

class WooPerformanceMonitor:
    def __init__(self):
        self.metrics = []
    
    def collect_metrics(self):
        return {
            "timestamp": datetime.utcnow().isoformat(),
            "performance": {
                "ttfb_ms": 85,
                "fcp_ms": 1200,
                "lcp_ms": 2100,
                "cls": 0.05,
                "fid_ms": 45,
            },
            "cache": {
                "hit_rate_pct": 78.5,
                "edge_requests": 150000,
                "origin_requests": 32500,
                "bandwidth_saved_gb": 45.2,
            },
            "woocommerce": {
                "orders_per_hour": 25,
                "cart_abandonment_pct": 68.5,
                "avg_page_load_ms": 1800,
                "product_pages_cached_pct": 92,
                "checkout_errors": 3,
            },
            "infrastructure": {
                "cpu_usage_pct": 35,
                "memory_usage_pct": 62,
                "db_queries_per_page": 45,
                "redis_hit_rate_pct": 95,
            },
        }
    
    def analyze_core_web_vitals(self, metrics):
        cwv = metrics["performance"]
        
        scores = {
            "lcp": "good" if cwv["lcp_ms"] < 2500 else "needs_improvement" if cwv["lcp_ms"] < 4000 else "poor",
            "fid": "good" if cwv["fid_ms"] < 100 else "needs_improvement" if cwv["fid_ms"] < 300 else "poor",
            "cls": "good" if cwv["cls"] < 0.1 else "needs_improvement" if cwv["cls"] < 0.25 else "poor",
        }
        
        all_good = all(s == "good" for s in scores.values())
        
        return {
            "scores": scores,
            "overall": "passed" if all_good else "needs_work",
            "recommendations": self._get_cwv_recommendations(cwv, scores),
        }
    
    def _get_cwv_recommendations(self, cwv, scores):
        recs = []
        if scores["lcp"] != "good":
            recs.append("Optimize LCP: preload hero images, use CDN for product images")
        if scores["fid"] != "good":
            recs.append("Optimize FID: defer non-critical JS, minimize WooCommerce AJAX calls")
        if scores["cls"] != "good":
            recs.append("Optimize CLS: set image dimensions, avoid dynamic content injection")
        if not recs:
            recs.append("All Core Web Vitals are good")
        return recs
    
    def generate_report(self):
        metrics = self.collect_metrics()
        cwv = self.analyze_core_web_vitals(metrics)
        
        return {
            "report_date": datetime.utcnow().isoformat(),
            "metrics": metrics,
            "core_web_vitals": cwv,
            "edge_performance": {
                "cache_hit_rate": metrics["cache"]["hit_rate_pct"],
                "origin_offload": round(
                    (1 - metrics["cache"]["origin_requests"] / metrics["cache"]["edge_requests"]) * 100, 1
                ),
                "bandwidth_saved": metrics["cache"]["bandwidth_saved_gb"],
            },
        }

monitor = WooPerformanceMonitor()
report = monitor.generate_report()
print(json.dumps(report, indent=2))

# === Prometheus Metrics ===
# woo_ttfb_seconds{page_type="product"}
# woo_cache_hit_ratio
# woo_orders_total
# woo_cart_abandonment_ratio
# woo_checkout_errors_total
# woo_db_queries_per_page
# woo_redis_hit_ratio

# === Grafana Dashboard ===
# Panels: TTFB trend, Cache hit rate, Orders/hour,
# Core Web Vitals, Error rate, DB query count

FAQ คำถามที่พบบ่อย

Q: Edge caching กับ WooCommerce ใช้ได้ไหม เพราะมี dynamic content เยอะ?

A: ได้ แต่ต้อง configure ถูก WooCommerce มี static content (product pages, category pages, images) ที่ cache ได้ 70-80% ของ traffic ส่วน dynamic content (cart, checkout, my-account, AJAX requests) ต้อง bypass cache ใช้ cookie-based cache bypass (woocommerce_items_in_cart) สำหรับ logged-in users ส่ง requests ตรงไป origin สำหรับ anonymous users ใช้ edge cache เต็มที่

Q: CDN ไหนเหมาะกับ WooCommerce ที่สุด?

A: Cloudflare เหมาะที่สุดสำหรับ WooCommerce มี free tier ที่ดี, APO (Automatic Platform Optimization) สำหรับ WordPress โดยเฉพาะ ($5/month), Workers สำหรับ edge logic, built-in DDoS protection ทางเลือกอื่น Fastly สำหรับ enterprise (VCL configuration ยืดหยุ่น), AWS CloudFront + Lambda@Edge สำหรับ AWS ecosystem, Bunny CDN ราคาถูกและ performance ดี สำหรับร้านค้าในไทย เลือก CDN ที่มี POP ใน Bangkok (Cloudflare, AWS)

Q: Redis Object Cache ช่วย WooCommerce อย่างไร?

A: WooCommerce ใช้ database queries เยอะมาก (50-100+ queries per page) Redis cache ผลลัพธ์ของ queries ที่ซ้ำๆ ไว้ใน memory ลด database load 60-80% ลด page load time 30-50% เหมาะสำหรับ product data, session data, transients, WooCommerce fragments ติดตั้งง่ายด้วย Redis Object Cache plugin ค่า Redis server ประมาณ $5-15/month สำหรับ managed Redis

Q: วิธีรับมือ traffic spike จาก flash sale?

A: เตรียม 3 ส่วน CDN/Edge ตั้ง cache TTL สั้นลง (1-2 นาที) สำหรับ product pages ที่ลดราคา, pre-warm cache ก่อน sale เริ่ม Origin Server scale up instance ก่อน sale (horizontal scaling), เพิ่ม Redis memory, optimize slow queries Queue System ใช้ queue สำหรับ checkout (WooCommerce Queue-it plugin) ป้องกัน overselling, rate limit ที่ edge สำหรับ bot protection ทดสอบ load test ก่อน sale จริงเสมอ