ตั้งค่า CDN สำหรับ WordPress บน Shared Hosting

ทำให้เว็บเปิดเร็วในทุกประเทศด้วย CDN ตั้งค่าผ่าน Plugin ไม่ต้องรู้ Command Line หรือใช้ SSH

ตั้งค่า CDN สำหรับ WordPress บน Shared Hosting

CDN คืออะไร และทำไมจึงสำคัญสำหรับ WordPress

CDN (Content Delivery Network) คือเครือข่ายเซิร์ฟเวอร์ที่กระจายอยู่ในหลายประเทศทั่วโลก มีหน้าที่เก็บ (Cache) และแจกจ่ายเนื้อหาสถิต เช่น รูปภาพ CSS JavaScript และ Font ไปยังผู้เยี่ยมชมผ่านเซิร์ฟเวอร์ที่ใกล้พวกเขามากที่สุด แทนที่จะส่งข้อมูลมาจากเซิร์ฟเวอร์ Hosting ของคุณเพียงจุดเดียว

WordPress บน Shared Hosting มักได้รับผลกระทบจาก Server Load ที่สูงเมื่อมีผู้เยี่ยมชมพร้อมกัน CDN ช่วยลดปัญหานี้โดยตรง เพราะไฟล์ขนาดใหญ่จะถูกแจกจ่ายจาก CDN Edge ไม่ใช่จาก Hosting ของคุณ

ประโยชน์ที่ได้รับจากการใช้ CDN กับ WordPress:

ข้อควรรู้: CDN เหมาะที่สุดสำหรับเว็บที่มีรูปจำนวนมาก หรือมีผู้เยี่ยมชมจากต่างประเทศ สำหรับเว็บไทยที่มีผู้เยี่ยมชมในประเทศเป็นส่วนใหญ่ ก็ยังได้ประโยชน์จากการลด Load บน Shared Server

เปรียบเทียบ Cloudflare กับ BunnyCDN สำหรับ Shared Hosting

CDN ยอดนิยมสำหรับ WordPress มี 2 ตัวเลือกหลักที่เหมาะสำหรับ Shared Hosting ได้แก่ Cloudflare และ BunnyCDN แต่ละตัวมีจุดเด่นแตกต่างกัน:

หัวข้อCloudflare (Free)BunnyCDN (Pay-as-you-go)
ราคาฟรี (มีแผน Pro $20/เดือน)$0.01–0.03 ต่อ GB
วิธีตั้งค่าเปลี่ยน Nameserver ทั้งโดเมนสร้าง Pull Zone แล้วใช้ CDN URL
DDoS Protectionรวมอยู่แล้ว (ทุกแผน)มีเฉพาะแผน Enterprise
Edge Locations300+ เมือง100+ เมือง
Cache HTML Pageได้ (ต้องตั้งค่าเพิ่ม)ไม่รองรับโดยตรง (เฉพาะ Static)
ความเหมาะสมเว็บทั่วไป เริ่มต้นเว็บ Traffic สูง ต้องการ Performance

Cloudflare — แนะนำสำหรับผู้เริ่มต้น

Cloudflare ทำงานในระดับ DNS: เมื่อเปลี่ยน Nameserver ของโดเมนมาชี้ที่ Cloudflare ทราฟฟิกทั้งหมดจะผ่าน Cloudflare ก่อน ซึ่งจะ Cache ไฟล์สถิตและป้องกัน DDoS โดยอัตโนมัติ Free Plan เพียงพอสำหรับเว็บ WordPress ขนาดกลาง

BunnyCDN — เหมาะสำหรับเว็บ Traffic สูง

BunnyCDN ใช้ระบบ Pull Zone: สร้าง Zone ที่ดึงไฟล์จากเว็บต้นทางแล้ว Cache ไว้ที่ Edge ราคาคิดตามปริมาณข้อมูลจริงที่ใช้ เหมาะสำหรับเว็บที่มีรูปขนาดใหญ่และ Traffic สูง ค่าใช้จ่ายประหยัดกว่า CDN แบบ Fixed Price

สำหรับ Shared Hosting ขนาดเล็กถึงกลาง เราแนะนำให้เริ่มต้นด้วย Cloudflare Free Plan ก่อน เพราะไม่มีค่าใช้จ่ายและตั้งค่าได้ภายใน 15 นาที

ขั้นตอนตั้งค่า Cloudflare ให้ WordPress บน Shared Hosting

ขั้นตอนทั้งหมดทำผ่าน Cloudflare Dashboard ในเบราว์เซอร์ ไม่ต้องใช้ SSH หรือแก้ไขไฟล์ใดๆ บน Server โดยตรง

ขั้นที่ 1: สมัครสมาชิก Cloudflare และเพิ่มโดเมน

เข้าไปที่ cloudflare.com คลิก "Sign up" ป้อน Email และรหัสผ่าน แล้วยืนยัน Email จากนั้นคลิก "Add a Site" แล้วทำตามนี้:

  1. ป้อนชื่อโดเมน (เช่น example.com) แล้วคลิก "Add Site"
  2. เลือก Free Plan คลิก "Continue"
  3. Cloudflare จะ Scan DNS Records อัตโนมัติ รอประมาณ 60 วินาที
  4. ตรวจสอบรายการ DNS Records ที่แสดงว่าครบถ้วน โดยเฉพาะ A Record ที่ชี้ไปยัง IP ของ Hosting
  5. คลิก "Continue" เพื่อไปขั้นตอนเปลี่ยน Nameserver

ขั้นที่ 2: เปลี่ยน Nameserver ที่ Domain Registrar

Cloudflare จะแสดง Nameserver 2 ตัว (รูปแบบ xxx.ns.cloudflare.com) ให้คัดลอกมาแล้วเข้าไปที่ Registrar ที่ซื้อโดเมน:

  1. Login เข้า Registrar (Namecheap, GoDaddy, NameSilo, หรือ Registrar ไทย)
  2. เปิดหน้า Domain Management ของโดเมนนั้น
  3. ค้นหา "Nameserver" หรือ "DNS Settings"
  4. เลือก "Custom Nameservers" แล้วลบ Nameserver เดิมออก
  5. ใส่ Nameserver ของ Cloudflare 2 ตัวที่คัดลอกมา
  6. กดบันทึก
เคล็ดลับ: การเปลี่ยน Nameserver ใช้เวลา 5–48 ชั่วโมง (DNS Propagation) ระหว่างรอเว็บยังทำงานปกติอยู่ ไม่มี Downtime

ขั้นที่ 3: ตั้งค่า SSL/TLS Mode ให้ถูกต้อง

นี่คือขั้นตอนที่คนมักพลาดและทำให้เว็บมีปัญหา SSL ต้องตั้งค่า SSL Mode ให้ตรงกับ Certificate ที่ Hosting ของคุณมี:

  1. เข้า Cloudflare Dashboard เลือกโดเมนของคุณ
  2. คลิก "SSL/TLS" ในเมนูซ้าย
  3. เลือก Mode ที่เหมาะสม:
    • Flexible — Hosting ไม่มี SSL Certificate (เว็บ HTTP) ให้เลือกนี้
    • Full — Hosting มี SSL แต่เป็น Self-signed ให้เลือกนี้
    • Full (Strict) — Hosting มี SSL Certificate จาก CA จริง (Let's Encrypt) ให้เลือกนี้
คำเตือน: หาก Hosting มี Let's Encrypt Certificate อยู่แล้ว ให้เลือก "Full (Strict)" เท่านั้น การเลือก "Flexible" จะทำให้เกิด Redirect Loop ที่ทำให้เว็บเปิดไม่ได้

ขั้นที่ 4: เปิดใช้ Cache และ Performance Features

Cloudflare Free Plan มี Feature ที่ต้องเปิดด้วยตนเอง เข้า Dashboard แล้วตั้งค่าดังนี้:

  1. เมนู Caching > Configuration: ตั้ง "Browser Cache TTL" เป็น "1 month"
  2. เมนู Speed > Optimization: เปิด "Auto Minify" สำหรับ JavaScript, CSS, HTML
  3. เมนู Speed > Optimization: เปิด "Brotli" (การบีบอัดไฟล์ที่ดีกว่า GZIP)
  4. เมนู Caching > Cache Rules: สร้าง Rule ให้ Cache ไฟล์ใน /wp-content/uploads/ เป็นเวลา 30 วัน

ตั้งค่า BunnyCDN Pull Zone สำหรับ WordPress

หากเลือกใช้ BunnyCDN ให้ทำตามขั้นตอนนี้ เหมาะสำหรับเว็บที่ต้องการควบคุม CDN ละเอียดและมี Traffic สูงกว่า 10 GB ต่อเดือน

ขั้นที่ 1: สมัครและสร้าง Pull Zone

เข้า bunny.net คลิก "Sign Up" แล้ว Login จากนั้น:

  1. คลิก "CDN" ในเมนูซ้าย แล้วคลิก "Add Pull Zone"
  2. ตั้งชื่อ Pull Zone (เช่น mysite-assets) ชื่อนี้จะเป็นส่วนหนึ่งของ CDN URL
  3. ช่อง "Origin URL" ใส่ URL เว็บต้นทาง เช่น https://example.com
  4. เลือก Region ที่ต้องการ (Asia Pacific สำหรับเว็บไทย)
  5. คลิก "Add Pull Zone"

ขั้นที่ 2: รับ CDN Hostname และตั้งค่า WordPress

หลังสร้าง Pull Zone BunnyCDN จะให้ Hostname รูปแบบนี้:

mysite-assets.b-cdn.net

ทดสอบว่า CDN ทำงานโดยเปิด URL ของรูปใน Browser:

https://mysite-assets.b-cdn.net/wp-content/uploads/2026/06/photo.jpg

ถ้าแสดงรูปได้ปกติ แสดงว่า Pull Zone ทำงานถูกต้อง

ขั้นที่ 3: เปลี่ยน URL WordPress ให้ชี้ไปยัง CDN

ติดตั้ง Plugin CDN Enabler (ฟรี) หรือ WP Rocket เพื่อเปลี่ยน URL อัตโนมัติ:

Plugin จะแทนที่ URL ของไฟล์รูป CSS และ JavaScript ทุกไฟล์ในหน้าให้ชี้ไปยัง CDN โดยอัตโนมัติ

ติดตั้งและตั้งค่า Plugin CDN สำหรับ WordPress

Plugin ช่วยให้การตั้งค่า CDN ง่ายขึ้นมาก โดยเฉพาะการ Purge Cache อัตโนมัติเมื่ออัปเดตเนื้อหา มี Plugin แนะนำดังนี้:

WP Rocket — ครบจบในตัวเดียว (แนะนำ)

WP Rocket เป็น Premium Plugin ที่รวม Caching, Minification, Lazy Load, CDN Integration และ Preloading ไว้ครบ ราคาเริ่มต้น $59/ปี สำหรับ 1 เว็บ การตั้งค่า CDN:

  1. ไปที่ WP Rocket > CDN
  2. เปิดสวิตช์ "Enable Content Delivery Network"
  3. ช่อง "CDN CNAME(s)" ใส่ Hostname ของ CDN (เช่น cdn.example.com หรือ mysite.b-cdn.net)
  4. กด "Save Changes"

Cloudflare Super Page Cache — ฟรีสำหรับ Cloudflare

Plugin นี้เชื่อมต่อกับ Cloudflare API โดยตรง ทำให้ Cloudflare Cache หน้า WordPress HTML ได้โดยอัตโนมัติ ซึ่ง Free Plan ปกติไม่รองรับ:

  1. ติดตั้ง Plugin "Cloudflare Super Page Cache" จาก WordPress.org
  2. เข้า Settings > Cloudflare Super Page Cache
  3. กรอก Cloudflare API Token และ Zone ID (ดูได้จาก Cloudflare Dashboard)
  4. เปิด "Enable Page Cache" และเลือก Cache Lifetime ที่ต้องการ

W3 Total Cache — ฟรีครบฟีเจอร์

W3 Total Cache รองรับ CDN หลายแบบทั้ง Cloudflare, BunnyCDN, Amazon CloudFront และอื่นๆ:

  1. ไปที่ Performance > General Settings
  2. เลือก "Enable" ที่หัวข้อ CDN
  3. เลือกประเภท CDN ที่ใช้ (Generic Mirror สำหรับ BunnyCDN)
  4. กรอก CDN Hostname แล้วกด "Save all settings"
คำแนะนำ: ไม่ควรใช้ Caching Plugin หลายตัวพร้อมกัน เลือกเพียงตัวเดียวที่เหมาะสมกับงบประมาณและความต้องการ

ตั้งค่า Cache Header ใน .htaccess เพื่อเพิ่มประสิทธิภาพ CDN

Cache Header คือ HTTP Response Header ที่บอกให้ Browser และ CDN รู้ว่าควรเก็บ Cache ไฟล์ไว้นานเท่าใด การตั้งค่านี้ช่วยให้ CDN ทำงานมีประสิทธิภาพสูงขึ้นอย่างเห็นได้ชัด

เพิ่ม Cache Header ผ่านไฟล์ .htaccess

ไฟล์ .htaccess อยู่ในโฟลเดอร์ public_html บน Shared Hosting ให้แก้ไขดังนี้:

  1. เข้า File Manager ใน Control Panel ของ Hosting (DirectAdmin หรือ cPanel)
  2. คลิก "Settings" แล้วเปิด "Show Hidden Files" เพื่อให้แสดงไฟล์ที่ขึ้นต้นด้วยจุด (.)
  3. เข้าโฟลเดอร์ public_html แล้วค้นหาไฟล์ .htaccess
  4. คลิกขวา > Edit แล้วเพิ่มโค้ดด้านล่างไว้ที่ท้ายไฟล์ (ก่อน # END WordPress)
# CDN Cache Headers

  ExpiresActive On
  ExpiresByType image/jpg "access plus 30 days"
  ExpiresByType image/jpeg "access plus 30 days"
  ExpiresByType image/png "access plus 30 days"
  ExpiresByType image/gif "access plus 30 days"
  ExpiresByType image/webp "access plus 30 days"
  ExpiresByType image/svg+xml "access plus 30 days"
  ExpiresByType text/css "access plus 7 days"
  ExpiresByType application/javascript "access plus 7 days"
  ExpiresByType font/woff2 "access plus 30 days"
  ExpiresByType font/woff "access plus 30 days"



  
    Header set Cache-Control "max-age=2592000, public"
    Header unset ETag
  
  
    Header set Cache-Control "max-age=3600, public, must-revalidate"

โค้ดนี้ตั้งให้ไฟล์รูปและ Font Cache ไว้ 30 วัน ไฟล์ CSS/JS Cache 7 วัน และหน้า HTML Cache 1 ชั่วโมง เป็นค่าที่สมดุลระหว่างความเร็วและความสด (Freshness) ของเนื้อหา

เคล็ดลับ: เมื่ออัปเดต CSS หรือ JavaScript ให้เพิ่ม Version String ต่อท้าย URL เช่น style.css?v=2.1 เพื่อบังคับให้ CDN และ Browser โหลดไฟล์ใหม่แทนไฟล์ที่ Cache ไว้

เพิ่มประสิทธิภาพ CDN ด้วยการบีบอัดรูปและ Lazy Load

CDN ช่วยให้รูปโหลดเร็วขึ้น แต่ถ้ารูปต้นฉบับขนาดใหญ่เกินไป CDN ก็ส่งไฟล์ใหญ่ได้เร็วขึ้นเท่านั้น วิธีที่ได้ผลจริงคือรวม CDN เข้ากับการบีบอัดรูปและ Lazy Load

บีบอัดรูปก่อนอัปโหลดขึ้น WordPress

Plugin ที่แนะนำสำหรับบีบอัดรูปบน WordPress:

เปิด Lazy Load รูปและ Video

Lazy Load คือการโหลดรูปเฉพาะเมื่อผู้ใช้ Scroll มาถึง ช่วยลด Time to Interactive ของหน้า:

หากต้องการ Shared Hosting ที่รองรับ CDN ได้เต็มประสิทธิภาพ asiagb.com มีแพ็กเกจ Shared Hosting ความเร็วสูงพร้อม DirectAdmin ทุกแผน ตั้งค่า Cloudflare และ BunnyCDN ได้ทันทีโดยไม่ต้องติดต่อทีม Support

ตรวจสอบว่า CDN ทำงานถูกต้อง

หลังจากตั้งค่า CDN เสร็จแล้ว ควรตรวจสอบให้แน่ใจว่า CDN รับหน้าที่ Serve ไฟล์จริงๆ ไม่ใช่ Browser Cache ของคุณเอง

ตรวจสอบผ่าน Chrome DevTools

# วิธีตรวจสอบ CDN ด้วย Chrome DevTools
1. กด F12 เพื่อเปิด DevTools
2. ไปที่แท็บ "Network"
3. กด Ctrl+Shift+R (หรือ Cmd+Shift+R บน Mac) เพื่อ Hard Reload
4. คลิกที่รูปหรือไฟล์ CSS ใดก็ได้

# สำหรับ Cloudflare — ตรวจสอบ Response Headers:
cf-cache-status: HIT        ← Cache ทำงานปกติ
cf-ray: 8a3b4c5d6e7f8g9h    ← ผ่าน Cloudflare แล้ว
server: cloudflare          ← ยืนยันว่า Serve จาก Cloudflare

# สำหรับ BunnyCDN — ตรวจสอบ URL ของไฟล์:
https://mysite-assets.b-cdn.net/wp-content/uploads/photo.jpg
# ต้องเห็น .b-cdn.net ใน URL แทน Domain เว็บต้นฉบับ

# cf-cache-status ที่ควรได้รับ:
HIT   = ไฟล์ถูก Cache ที่ Edge Server (ดีที่สุด)
MISS  = ไฟล์ยังไม่ถูก Cache (ครั้งแรก หรือ Cache หมดอายุ)
REVALIDATED = ตรวจสอบแล้วว่าไฟล์ยังใหม่ ไม่ต้อง Download ใหม่

ตรวจสอบด้วย curl บน Terminal

# ตรวจสอบ CDN Headers ด้วย curl
curl -I https://example.com/wp-content/uploads/2026/06/photo.jpg

# Output ที่ควรเห็นสำหรับ Cloudflare:
HTTP/2 200
cf-cache-status: HIT
cache-control: max-age=2592000, public
cf-ray: 8a3b4c5d6e7f-BKK
Tip: ทดสอบจากหลาย Location ด้วยเครื่องมือเช่น KeyCDN Performance Test (tools.keycdn.com/performance) เพื่อดูว่า CDN ส่งไฟล์เร็วในแต่ละภูมิภาคหรือไม่

ตรวจสอบ PageSpeed Score หลังเปิด CDN

ใช้ Google PageSpeed Insights (pagespeed.web.dev) เปรียบเทียบคะแนนก่อนและหลังเปิด CDN โดยทั่วไปคาดว่าจะเห็นการปรับปรุงในหมวด:

แก้ปัญหาที่พบบ่อย

ปัญหาที่ผู้ใช้พบบ่อยเมื่อตั้งค่า CDN สำหรับ WordPress บน Shared Hosting และวิธีแก้ไขที่ได้ผล:

Error: "ERR_NAME_NOT_RESOLVED" หรือเว็บเปิดไม่ได้หลังเปลี่ยน Nameserver

สาเหตุ: Nameserver ยังไม่ Propagate เสร็จ หรือพิมพ์ Nameserver ผิด

วิธีแก้:

Error: "SSL_ERROR_RX_RECORD_TOO_LONG" หรือ Mixed Content Warning

สาเหตุ: SSL Mode ใน Cloudflare ไม่ตรงกับ Configuration ของ Hosting หรือ WordPress URL ยังเป็น HTTP

วิธีแก้:

Error: "รูปภาพไม่แสดงหลังเปิด BunnyCDN" หรือ URL รูปไม่เปลี่ยนเป็น CDN

สาเหตุ: Plugin ไม่ได้เปลี่ยน URL ให้ชี้ไปยัง CDN Hostname ที่ถูกต้อง

วิธีแก้:

Error: WordPress Login Loop หรือ Admin Dashboard เข้าไม่ได้หลังเปิด CDN

สาเหตุ: Cloudflare Cache หน้า WordPress Admin หรือหน้า Login ทำให้ Session ทำงานผิดพลาด

วิธีแก้:

Error: CDN Cache ไม่ Clear หลังอัปเดตเนื้อหา WordPress

สาเหตุ: CDN ยังแสดงเนื้อหาเก่าเพราะ Cache ยังไม่หมดอายุหรือไม่ได้รับ Purge Signal

วิธีแก้:

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

Q: ทำไม WordPress ยังช้าอยู่แม้จะเปิด CDN แล้ว?

A: CDN ช่วยเพิ่มความเร็วของไฟล์สถิต (รูป CSS JavaScript) แต่ไม่ได้เร่ง Time to First Byte (TTFB) ของหน้า HTML ที่ต้องประมวลผลด้วย PHP และ Database หากหน้าโหลดช้ายังต้องใช้ Page Caching Plugin เพิ่ม เช่น WP Rocket หรือ W3 Total Cache เพื่อ Cache หน้า HTML ให้เป็นไฟล์ Static ด้วย นอกจากนี้ควรตรวจสอบจำนวน Plugin ที่ใช้ เพราะ Plugin มากเกินไปทำให้ Query Database สูงและทำให้ TTFB ช้า

Q: Cloudflare Free กับแบบจ่ายเงิน (Pro $20/เดือน) ต่างกันอย่างไรสำหรับ WordPress?

A: สำหรับ Shared Hosting ขนาดเล็กถึงกลาง Cloudflare Free Plan เพียงพอสำหรับ CDN ปกติ ความแตกต่างหลักของ Pro Plan คือ: WAF Rules ครบกว่า (ป้องกัน Attack ได้ละเอียดกว่า), Image Optimization (Polish) ที่บีบอัดรูป JPEG/PNG อัตโนมัติ, Mobile Redirect และ Cache Analytics ที่ละเอียดกว่า ถ้าเว็บมี Traffic ไม่เกิน 10,000 Visit/เดือน ให้ใช้ Free Plan ก่อนได้เลย

Q: CDN ช่วยเพิ่ม SEO จริงหรือไม่?

A: ใช่ อย่างน้อย 2 ทางตรง ได้แก่ (1) PageSpeed Score สูงขึ้น ซึ่ง Google ใช้เป็น Ranking Factor ทั้งบน Desktop และ Mobile (2) Core Web Vitals ดีขึ้น โดยเฉพาะ LCP (Largest Contentful Paint) ที่วัดความเร็วโหลดรูปหลักของหน้า CDN ช่วยลด LCP ได้อย่างมีนัยสำคัญ นอกจากนี้ Cloudflare ยังช่วย HTTPS Redirect ซึ่ง Google Prefer มากกว่า HTTP

บทความที่เกี่ยวข้อง