การตั้ง Header Cache-Control บน CDN เพื่อความเร็วสูงสุด

แม้เว็บไซต์จะใช้ CDN แล้ว แต่ถ้าไม่มีการตั้งค่า Cache-Control Header อย่างเหมาะสม ไฟล์ต่าง ๆ เช่น CSS, JS, รูปภาพ อาจยังถูกโหลดซ้ำทุกครั้งที่ผู้ใช้เข้าชมหน้าเว็บ ซึ่งไม่เพียงแต่ทำให้เว็บช้ากว่าที่ควรจะเป็น แต่ยังทำให้เซิร์ฟเวอร์ทำงานหนักโดยไม่จำเป็น

การตั้งค่า Cache-Control อย่างถูกต้องจึงเป็นจุดสำคัญที่ช่วยให้เว็บไซต์โหลดเร็วขึ้นอย่างยั่งยืน โดยเฉพาะเมื่อใช้งานร่วมกับ CDN ชั้นนำ

Cache-Control คืออะไร

Cache-Control คือ HTTP Header ที่กำหนดว่าบราวเซอร์และ CDN จะเก็บไฟล์ได้นานแค่ไหน ก่อนจะโหลดใหม่จากเซิร์ฟเวอร์หลัก ช่วยลดการร้องขอซ้ำ ๆ และทำให้เว็บตอบสนองเร็วขึ้น

ตัวเลือกที่นิยมใช้งาน เช่น การกำหนดอายุไฟล์ด้วย max-age และการระบุว่าไฟล์ไม่เปลี่ยนบ่อยด้วย immutable

แนวทางการตั้งค่า Cache ที่แนะนำ

• CSS และ JavaScript: ควรกำหนดอายุการเก็บไว้ในแคชนาน เช่น 1 ปี พร้อมใส่ version ควบคุม
  
  

• รูปภาพ: สามารถแคชได้นานระดับเดียวกับ CSS หากเปลี่ยนชื่อไฟล์ทุกครั้งที่มีการอัปเดต
  
  

• HTML: ไม่ควรแคชนาน เพราะเนื้อหามีแนวโน้มเปลี่ยนบ่อย ควรใช้ TTL ประมาณ 10–30 นาที
  
  

• API หรือ JSON: ควรใช้แบบควบคุมละเอียดตามความเหมาะสมของแต่ละ endpoint
  
  

การใช้ ETag และ Last-Modified

การเปิดใช้งาน ETag หรือ Last-Modified ช่วยให้บราวเซอร์ตรวจสอบว่าไฟล์ที่มีในเครื่องยังเป็นเวอร์ชันล่าสุดหรือไม่ หากยังไม่เปลี่ยน ระบบจะไม่โหลดใหม่ ช่วยลดการใช้ทรัพยากรลงได้

ควรเลือกใช้เพียงอย่างใดอย่างหนึ่งเพื่อหลีกเลี่ยงความซ้ำซ้อน และไม่กระทบประสิทธิภาพของแคช

การเปิดใช้ Gzip หรือ Brotli

การบีบอัดไฟล์ด้วย Gzip หรือ Brotli ช่วยลดขนาด HTML, CSS และ JavaScript ทำให้ส่งข้อมูลได้น้อยลงและเร็วขึ้น

ผู้ให้บริการ CDN หลายรายเปิดใช้งานให้โดยอัตโนมัติ แต่ในบางระบบ อาจต้องเปิดเองหรือกำหนดระดับการบีบอัด

ตัวอย่างการตั้งค่าใน CDN เช่น Cloudflare

ในระบบอย่าง Cloudflare สามารถตั้งค่า Cache ได้ผ่านหน้า Dashboard เช่น

• ใช้ Page Rules เพื่อกำหนด Cache Level รายหน้า

• ตั้งค่า Edge Cache TTL สำหรับ HTML หน้าแรก

• เปิด Brotli Compression เพื่อให้ส่งข้อมูลน้อยลง
  
  

กรณีศึกษา: เว็บไซต์ภาครัฐใช้ Cache-Control ผ่าน Cloudflare ลดโหลดเซิร์ฟเวอร์ได้จริง

เว็บไซต์ของหน่วยงานภาครัฐแห่งหนึ่ง พบว่าเว็บไซต์ยังช้ากว่าที่ควร แม้จะใช้ Cloudflare แล้ว ตรวจสอบพบว่าไม่มีการตั้ง Cache-Control จากต้นทาง ทำให้ CDN ไม่สามารถเก็บไฟล์ไว้ได้

เมื่อทีมพัฒนาเพิ่มการตั้งค่า Cache-Control สำหรับไฟล์ Static เช่น CSS และ JavaScript และตั้ง Edge Cache TTL สำหรับหน้า HTML บางส่วนใน Cloudflare ผลลัพธ์ที่ได้คือ

• ไฟล์ไม่ถูกโหลดซ้ำเกินจำเป็น

• การโหลดจากเซิร์ฟเวอร์หลักลดลงถึง 40 เปอร์เซ็นต์

• ความเร็วเว็บไซต์เพิ่มขึ้นอย่างชัดเจน โดยเฉพาะบนมือถือ

• คะแนน PageSpeed Insights เพิ่มจาก 68 ไปที่ 92
  
  

สรุป

การตั้ง Cache-Control Header อย่างถูกต้อง เป็นสิ่งที่ควรทำควบคู่กับการใช้งาน CDN เพราะช่วยลดการโหลดไฟล์ซ้ำโดยไม่จำเป็น ประหยัดแบนด์วิดท์ และเพิ่มความเร็วให้กับเว็บไซต์ทั้งในและนอกประเทศ