CDN คืออะไร: ความหมายของ CDN เหตุผลที่ควรใช้ และวิธีเชื่อมต่อ WordPress
CDN (Content Delivery Network) คือเครือข่ายส่งเนื้อหาที่เก็บไฟล์จากเซิร์ฟเวอร์ต้นทางไว้บนเซิร์ฟเวอร์ Edge ในหลายภูมิภาค แล้วตอบกลับผู้เข้าชมจากเซิร์ฟเวอร์ที่อยู่ใกล้ที่สุด เราตรวจสอบเฮดเดอร์การตอบกลับของบริการเผยแพร่ไลบรารีสาธารณะอย่าง jsDelivr เพื่อดูว่าเซิร์ฟเวอร์ Edge ตอบกลับจากแคชหรือไม่ พบว่าไฟล์ jQuery ถูกส่งจากสำเนาในแคช ส่วนวิธีเชื่อมต่อ WordPress ทั้งแบบเปลี่ยน URL ไฟล์และแบบพร็อกซี DNS เราเปรียบเทียบตามเอกสารทางการ
1️⃣ ความหมายของ CDN: เซิร์ฟเวอร์ Edge และเซิร์ฟเวอร์ต้นทาง
POP (Point of Presence) หมายถึงศูนย์ข้อมูลที่มีเซิร์ฟเวอร์ Edge ตั้งอยู่ และคำขอของผู้เข้าชมจะถูกส่งไปยัง POP ที่ใกล้ที่สุด
เซิร์ฟเวอร์ Edge ที่ได้รับคำขอจะตอบกลับทันทีถ้ามีไฟล์ที่เก็บไว้ ถ้าไม่มีจะดึงไฟล์จากเซิร์ฟเวอร์ต้นทางมาตอบกลับพร้อมกับเก็บไว้ที่เซิร์ฟเวอร์ Edge ส่วน CloudFront ซึ่งเป็น CDN ของ AWS จะเริ่มส่งให้ผู้เข้าชมทันทีที่ไบต์แรกมาถึงจากเซิร์ฟเวอร์ต้นทาง (ตามเอกสารทางการของ AWS)

เซิร์ฟเวอร์ Edge จะเก็บเฉพาะไฟล์ที่ผู้เข้าชมขอ ดังนั้นแม้จะเป็นไฟล์เดียวกัน คำขอแรกของเซิร์ฟเวอร์ Edge แต่ละเครื่องก็ยังส่งต่อไปถึงเซิร์ฟเวอร์ต้นทาง
การดึงไฟล์เมื่อมีคำขอเข้ามาแบบนี้เรียกว่าวิธี pull และยังมีวิธี push ที่คุณอัปโหลดไฟล์ไว้บน CDN ล่วงหน้า
2️⃣ เหตุผลที่ใช้ CDN: ระยะทางและภาระของเซิร์ฟเวอร์ต้นทาง
ยิ่งผู้เข้าชมกับเซิร์ฟเวอร์อยู่ห่างกันมาก เวลาไป-กลับ (RTT) ของแต่ละคำขอก็ยิ่งนานขึ้น เมื่อเปิดหน้าเว็บหนึ่งหน้า นอกจาก HTML แล้วยังมีคำขอรูปภาพ CSS และ JavaScript เกิดขึ้นพร้อมกัน ถ้าเซิร์ฟเวอร์ Edge ที่อยู่ใกล้เป็นผู้ตอบกลับ เวลาไป-กลับของทุกคำขอก็จะสั้นลง
คำขอที่เซิร์ฟเวอร์ Edge ตอบกลับแล้วจะไม่ถูกส่งไปถึงเซิร์ฟเวอร์ต้นทาง ทำให้การใช้ CPU และปริมาณการรับส่งข้อมูล (แบนด์วิดท์) ของเซิร์ฟเวอร์ต้นทางลดลงด้วย ถ้าเชื่อมต่อ DNS ผ่านพร็อกซีของ Cloudflare IP ของเซิร์ฟเวอร์ต้นทางจะไม่ถูกเปิดเผย และการโจมตี DDoS ก็จะถูกบล็อกที่ CDN ก่อน (ตามเอกสารทางการของ Cloudflare)
เว็บไซต์ที่ผู้เข้าชมรวมตัวอยู่ในภูมิภาคเดียวกับเซิร์ฟเวอร์ต้นทางจะได้ประโยชน์จากระยะทางน้อย สำหรับเว็บไซต์แบบนี้ ประโยชน์ที่ใหญ่กว่าของ CDN คือการลดภาระของเซิร์ฟเวอร์ต้นทางและประหยัดปริมาณการรับส่งข้อมูล มากกว่าการลดเวลาตอบกลับ
3️⃣ ไฟล์ที่ถูกแคช: ไฟล์สแตติกและ HTML
ในการตั้งค่าเริ่มต้น Cloudflare จะแคชเฉพาะไฟล์สแตติกอย่างรูปภาพ CSS และ JavaScript ที่กำหนดจากนามสกุลไฟล์ (ตามเอกสารทางการของ Cloudflare) ส่วน HTML ของหน้าเว็บและ JSON ไม่อยู่ในแคชเริ่มต้น จึงยังเป็นเซิร์ฟเวอร์ต้นทางที่ตอบกลับแม้จะเชื่อมต่อ Cloudflare แล้ว
ถ้าต้องการแคช HTML ด้วย คุณต้องสร้างกฎแคชแยกต่างหากบน CDN ในกรณีนี้ให้ยกเว้นหน้าที่เนื้อหาต่างกันในแต่ละคน เช่น หน้าของผู้ใช้ที่ล็อกอินหรือตะกร้าสินค้า ออกจากกฎ เพื่อไม่ให้หน้าจอของผู้เข้าชมคนอื่นปะปนมา
4️⃣ การเชื่อมต่อ WordPress: เปลี่ยน URL ไฟล์และพร็อกซี DNS
เมื่อเชื่อมต่อ CDN กับ WordPress คุณจะเปลี่ยนเฉพาะ URL ของไฟล์สแตติกเป็น URL ของ CDN หรือตั้งค่า DNS ของโดเมนไปที่พร็อกซีของ CDN เพื่อให้ทุกคำขอผ่าน CDN
| วิธีการ | จุดที่เชื่อมต่อ | คำขอที่ผ่าน CDN | IP ของเซิร์ฟเวอร์ต้นทาง |
|---|---|---|---|
| เปลี่ยน URL ไฟล์ | ใส่ที่อยู่ CDN (CNAME) ในการตั้งค่า CDN ของปลั๊กอินแคช | ไฟล์สแตติกอย่างรูปภาพ CSS และ JavaScript | เปิดเผยตามเดิม |
| พร็อกซี DNS | เชื่อมต่อเรคคอร์ด DNS ของโดเมนกับพร็อกซีของ CDN | คำขอ HTTP และ HTTPS ทั้งหมดของเว็บไซต์ | ซ่อนอยู่หลัง CDN |
ในวิธีเปลี่ยน URL ไฟล์ คุณจะใส่ที่อยู่ (CNAME) ที่ผู้ให้บริการ CDN มอบให้ในการตั้งค่า CDN ของปลั๊กอินแคชอย่าง WP Rocket เมื่อใส่แล้ว URL ของรูปภาพ CSS และ JavaScript ใน HTML ของหน้าเว็บจะเปลี่ยนเป็น URL ของ CDN (ตามเอกสารทางการของ WP Rocket) ส่วน HTML ยังคงเป็นเซิร์ฟเวอร์ต้นทางที่ตอบกลับ

เมื่อใช้วิธีพร็อกซี DNS ผู้ให้บริการ CDN จะเป็นผู้จัดการ DNS ของโดเมน Cloudflare ยังมีวิธีเชื่อมต่อพร็อกซีโดยไม่ต้องย้ายเนมเซิร์ฟเวอร์ เพียงเพิ่มเรคคอร์ด CNAME ที่ผู้ให้บริการ DNS เดิม วิธีนี้ใช้ได้เฉพาะแพ็กเกจ Business ขึ้นไป (ตามเอกสารทางการของ Cloudflare)
5️⃣ ตรวจสอบแคชฮิต: เฮดเดอร์ cf-cache-status และ age
คุณตรวจสอบได้จากเฮดเดอร์การตอบกลับว่า CDN ตอบกลับไฟล์จากแคชหรือไม่ ด้านล่างคือคำสั่งที่ใช้ตรวจสอบเฮดเดอร์การตอบกลับของไฟล์ jQuery ที่ jsDelivr เผยแพร่ และผลลัพธ์
curl -sI https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js | grep -iE "^(cache-control|cf-cache-status|age|server):"cache-control: public, max-age=31536000, s-maxage=31536000, immutable
age: 45920
cf-cache-status: HIT
server: cloudflare[server: cloudflare] แสดงว่าเซิร์ฟเวอร์ Edge ของ Cloudflare เป็นผู้ส่งการตอบกลับนี้ และ [cf-cache-status: HIT] ที่ Cloudflare ใส่มาหมายถึงตอบกลับจากแคช [age: 45920] แสดงว่าไฟล์นี้ถูกเก็บในแคชมาประมาณ 12 ชั่วโมง 45 นาทีแล้ว [max-age=31536000] คือคำสั่งของเซิร์ฟเวอร์ต้นทางว่าเก็บไฟล์ไว้ได้ 1 ปี
ถ้าค่าที่ได้คือ [MISS] [DYNAMIC] หรือ [BYPASS] แทนที่จะเป็น [HIT] คำขอจะไปถึงไหน ดูได้โดยกดปุ่มค่าในไดอะแกรมด้านล่าง
cf-cache-status: HITcf-cache-status: MISScf-cache-status: DYNAMICcf-cache-status: BYPASSCache-Control: no-store หรือ private🔢 FAQ & เนื้อหาแนะนำ
แคช
แคช: ความหมายและทุกด้านที่ใช้การแคช
บทความแบ่งประเภทการใช้แคช ตั้งแต่เบราว์เซอร์จนถึงภายในเซิร์ฟเวอร์ รวมถึงแคชของเซิร์ฟเวอร์ Edge ใน CDN
Varnish
ติดตั้งและตั้งค่า Varnish Cache บน Apache และ Nginx
บทความติดตั้งและตั้งค่าแคชแบบ Reverse Proxy อย่าง Varnish ไว้หน้า Apache และ Nginx
Cloudflare
ตั้งค่า CDN ของ Cloudflare: แพ็กเกจ Pro
บทความเชื่อมต่อ Cloudflare กับ WordPress ด้วยวิธีพร็อกซี DNS แล้วพูดถึงความต่างด้านความเร็วและการตั้งค่าระหว่างแพ็กเกจ Free กับ Pro
ℹ️ ประกาศเรื่องลิงก์แอฟฟิลิเอต
เนื้อหาของเว็บไซต์นี้มีลิงก์แอฟฟิลิเอต หากผู้เข้าชมซื้อสินค้าหรือบริการผ่านลิงก์เหล่านี้ เว็บไซต์นี้จะได้รับค่าคอมมิชชันจากผู้ขาย ในกระบวนการนี้ ราคาที่ผู้ซื้อจ่าย(ราคาจะลดลงเมื่อมีโปรโมชัน↓)จะไม่สูงขึ้นแต่อย่างใด ราคา ส่วนลด และข้อมูลสต็อกที่แสดงเป็นข้อมูล ณ เวลาที่เขียนและอาจต่างจากความเป็นจริง โปรดตรวจสอบกับผู้ขายอีกครั้งก่อนซื้อ การเลือกและการประเมินสินค้าเขียนตามเกณฑ์ของเราเอง และการได้รับค่าคอมมิชชันหรือไม่ไม่มีผลต่อลำดับการแนะนำหรือเนื้อหาการประเมิน