การตั้งค่า Cache Level และ Browser Cache TTL ที่เหมาะสมบน Cloudflare ช่วยเพิ่มประสิทธิภาพอย่างมีนัยสำคัญ ทั้งลด Bandwidth ของ VPS และก่อต่างขชดเซิร์ฟเวอร์

Cache Level คืออะไร?

Cache Level คือการตั้งค่าว่า Cloudflare จะตัดสินใจว่าจะ Cache ไฟล์ใดเป็นไฟล์เดียวกัน โดยเฉพาะเมื่อมี Query String เข้ามา

No Query String

Cache เฉพาะ URL ที่ไม่มี Query String เช่น example.com/image.jpg ไฟล์ที่มี Query String เช่น example.com/image.jpg?v=2 จะไม่ถูก Cache เหมาะสมหูเว็บที่ใช้ Cache-busting ผ่าน Query String

Ignore Query String

Cache ไฟล์ทูกไฟล์โดยไม่สนใจว่ามี Query String หรือเปล่า เหมาะสมหูท่ีเว็บบน Cache ที่แทบไม่เปลี่ยนและไม่ได้ใช้ Query String เพื่อควบคุมเวอร์ชั่น

Standard (ค่าเริ่มต้น)

Cache ไฟล์ Static ที่รู้จักทั้งหมด โดยพิจารณา URL แต่ละ URL เป็นคนละคน (URL ที่ต่าง Query String ถือเป็นคนละไฟล์) เหมาะสำหรับเว็บทั่วไป

Browser Cache TTL คืออะไร?

Browser Cache TTL (Time To Live) คือระยะเวลาที่ Cloudflare บอกให้ Browser ของผู้เยี่ยมชมเก็บไฟล์ไว้โดยไม่ต้องดึงจากเซิร์ฟเวอร์อีก แสดงผ่าน Cache-Control: max-age Header

ตั้งค่าได้ที่ Cloudflare Dashboard → Caching → Configuration → Browser Cache TTL

ค่าที่แนะนำตามประเภทไฟล์:

Respect Existing Headers คืออะไร?

หากตั้งค่า Browser Cache TTL เป็น Respect Existing Headers Cloudflare จะใช้ค่า Cache-Control Header จาก Origin Server (เช่น VPS) โดยตรง เหมาะสำหรับเผยแพร่ควบคุม Cache-Control จากอัพพลิเคชันเอง

เคล็ดลับการตั้งค่าสำหรับ VPS

สำหรับเว็บไซต์ที่ใช้งานบน VPS แนะนำการตั้งค่าดังนี้:

1. ตั้ง Cache Level เป็น Standard สำหรับเว็บทั่วไป
2. ตั้ง Browser Cache TTL เป็น 1 day สำหรับไฟล์ Static ทั่วไป
3. หากเว็บเป็น WordPress ใช้ Page Rules หรือ Cache Rules เพื่อตั้งค่า Cache Everything
4. ตรวจสอบ CF-Cache-Status Header เพื่อยืนยันว่า Cache ทำงานอยู่

การตั้งค่า Cache-Control Header บนเซิร์ฟเวอร์ ให้นัก Cache

สำหรับ Nginx บน VPS สามารถเพิ่ม Cache-Control Header อัตโนมัติ:

location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff|woff2)$ {
    expires 30d;
    add_header Cache-Control "public, no-transform";
}

สำหรับ Apache:

<FilesMatch "\.(jpg|jpeg|png|gif|ico|css|js|woff|woff2)$">
    Header set Cache-Control "max-age=2592000, public"
</FilesMatch>

สรุป

การตั้งค่า Cache Level และ Browser Cache TTL เป็นพื้นฐานสำคัญของการเร่งความเร็วเว็บด้วย Cloudflare เมื่อตั้งค่าได้ถูกต้อง Browser ของผู้เยี่ยมชมจะเก็บไฟล์ไว้ในเครื่อง ทำให้ VPS ทำงานเบาลงและเว็บไซต์โหลดเร็วขึ้นอย่างมีนัยสำคัญ