แคชเว็บไซต์และ CDN คืออะไร: แต่ละชั้นทำอะไร และเมื่อไหร่ที่คุณต้องใช้

ทุกครั้งที่มีคนเปิดหน้าบนเว็บไซต์ WordPress ทั่วไป เซิร์ฟเวอร์จะรัน PHP ดึงข้อมูลจากฐานข้อมูล และประกอบ HTML ขึ้นมา แล้วทำงานเดิมซ้ำ สำหรับผู้เข้าชมคนถัดไป ทั้งที่ไม่มีอะไรเปลี่ยน การแคชเว็บไซต์หยุดการทำซ้ำนี้ ด้วยการเก็บสำเนาสำเร็จรูปไว้หลายจุด ระหว่างเซิร์ฟเวอร์ของคุณ กับหน้าจอของผู้เข้าชม

ถ้าทำดี นี่คือหนึ่งในวิธีเพิ่มความเร็ว ที่ลงทุนน้อยที่สุด ถ้าทำไม่ดี ผู้เข้าชมจะเห็นราคาของเมื่อวาน แบบฟอร์มพัง หรือลูกค้าคนหนึ่ง ได้เห็นตะกร้าของลูกค้าอีกคน

คำตอบสั้น ๆ

• การแคชเว็บไซต์ คือการเก็บสำเนาสำเร็จรูปของไฟล์ หน้าเว็บ หรือผลลัพธ์จากฐานข้อมูล เพื่อไม่ต้องดึงหรือสร้างใหม่อีก
• มีสี่ชั้นที่สำคัญ คือ แคชของเบราว์เซอร์บนอุปกรณ์ของผู้เข้าชม CDN ที่อยู่ใกล้ผู้เข้าชม แคชหน้าเว็บ (page cache) บนเซิร์ฟเวอร์ของคุณ และ object cache ที่อยู่ถัดเข้าไปอีกชั้น
• แคชสิ่งที่เหมือนกันสำหรับทุกคน ห้ามแคชตะกร้า หน้าชำระเงิน พื้นที่บัญชีผู้ใช้ หน้าที่แสดงตอนล็อกอิน หรือเนื้อหาเฉพาะบุคคล
• คุณต้องใช้ CDN เมื่อผู้เข้าชมอยู่ไกลจากเซิร์ฟเวอร์ กระจายอยู่หลายภูมิภาค หรือเข้ามาพร้อมกันเป็นช่วง ๆ
• แก้แล้วไม่เห็นผล? มีสำเนาเก่าเก็บอยู่ที่ไหนสักแห่ง ให้ล้างแคช จากเซิร์ฟเวอร์ไล่ออกมาด้านนอก

แคชเว็บไซต์ทั้งสี่ชั้น

แต่ละชั้นตอบคำขอแทนเซิร์ฟเวอร์ของคุณ และยิ่งอยู่ใกล้ผู้เข้าชมเท่าไร หน้าก็ยิ่งมาถึงเร็วเท่านั้น

แคชของเบราว์เซอร์: สำเนาของผู้เข้าชม

ในการเข้าชมครั้งแรก เบราว์เซอร์จะดาวน์โหลดโลโก้ สไตล์ชีต สคริปต์ และฟอนต์ของคุณ ส่วน header แบบ cache-control จากเซิร์ฟเวอร์ บอกเบราว์เซอร์ว่า จะเก็บไฟล์ไว้ใช้กับหน้าถัดไปหรือไม่ และนานแค่ไหน:

• max-age=31536000 ทำให้ไฟล์ถือว่ายังใหม่ (fresh) อยู่หนึ่งปี (ค่าเป็นวินาที) การเพิ่ม immutable บอกว่าไฟล์จะไม่เปลี่ยน ตราบที่สำเนานั้นยังใหม่อยู่ เบราว์เซอร์จึงไม่ต้องเช็กซ้ำตอนรีโหลด
• no-cache มักถูกเข้าใจผิด ค่านี้อนุญาตให้เก็บ แต่เบราว์เซอร์ต้องเช็กกับเซิร์ฟเวอร์ ก่อนนำมาใช้ซ้ำทุกครั้ง
• no-store หมายถึงห้ามเก็บสำเนาเลย ส่วน private กันไม่ให้ response ไปอยู่ในแคชที่ใช้ร่วมกัน เช่น CDN

กฎการใส่เวอร์ชัน อายุแคชที่ยาว ปลอดภัยก็ต่อเมื่อที่อยู่ของไฟล์ เปลี่ยนทุกครั้งที่ไฟล์เปลี่ยน นี่คือเหตุผลที่ WordPress เติมเลข ?ver= ให้สไตล์ชีตและสคริปต์ของธีมและปลั๊กอิน ซึ่งใช้ได้ ตราบที่เลขนั้นเพิ่มขึ้น ทุกครั้งที่มีการเปลี่ยนแปลง ส่วนตัวหน้า HTML เอง ควรมีอายุแคชสั้น หรือใช้ no-cache เพื่อให้ผู้เข้าชมได้หน้าล่าสุดเสมอ

ลองตรวจเอง ใน Chrome DevTools เปิดแผง Network ตรวจว่าไม่ได้ติ๊ก “Disable cache” แล้วรีโหลด ไฟล์ที่ถูกนำมาใช้ซ้ำ จะแสดง “(memory cache)” หรือ “(disk cache)” ในคอลัมน์ Size คลิกไฟล์หนึ่ง เพื่อดู header cache-control ของไฟล์นั้น

Service worker ไปได้ไกลกว่านั้น คือเก็บทั้งหน้าไว้ใช้แบบออฟไลน์ ซึ่งเป็นเรื่องของ progressive web app ที่เว็บไซต์ธุรกิจส่วนใหญ่ไม่จำเป็นต้องมี

CDN: สำเนาใกล้ผู้เข้าชม

CDN คืออะไร? CDN ย่อมาจาก content delivery network คือกลุ่มเซิร์ฟเวอร์ ในหลายสถานที่ ที่เก็บสำเนาเนื้อหาของคุณไว้ใกล้ผู้เข้าชม ถ้าเซิร์ฟเวอร์ที่อยู่ใกล้ มีสำเนาที่ยังใหม่ (cache hit) ก็ตอบได้ทันที ถ้าไม่มี (miss) ก็จะดึงไฟล์จากเซิร์ฟเวอร์ของคุณ ที่เรียกว่า origin แล้วเก็บสำเนาไว้

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

• เฉพาะไฟล์ static CDN ส่งรูปภาพ CSS สคริปต์ และฟอนต์ ส่วนเซิร์ฟเวอร์ของคุณยังสร้างทุกหน้าเอง ความเสี่ยงต่ำ แต่ HTML ยังต้องเดินทางไกลอยู่
• แคชทั้งหน้า (full-page caching) CDN เก็บ HTML ด้วย ผู้เข้าชมส่วนใหญ่ จึงไม่ต้องไปถึงเซิร์ฟเวอร์ของคุณเลย ลดเวลาจนถึงไบต์แรก (TTFB) ได้มากที่สุด แต่ต้องมีกฎให้ข้ามแคช สำหรับผู้เข้าชมที่ล็อกอิน ตะกร้า และหน้าชำระเงิน CDN หลายเจ้า ทำแบบนี้ก็ต่อเมื่อคุณเปิดใช้งาน

Page cache: หน้าสำเร็จรูปบนเซิร์ฟเวอร์

Page cache เก็บ HTML ที่สร้างเสร็จแล้วของแต่ละหน้า และส่งออกไป โดยไม่ต้องรัน PHP หรือแตะฐานข้อมูล ในเว็บไซต์ที่หน้าส่วนใหญ่ เหมือนกันสำหรับทุกคน นี่มักเป็นการเพิ่มความเร็วฝั่งเซิร์ฟเวอร์ ที่มากที่สุด และโฮสติ้งเดิม ก็รองรับผู้เข้าชมได้มากขึ้นมาก

Page cache มาได้จากปลั๊กอินแคช โฮสติ้ง หรือ CDN ให้ใช้แค่ตัวเดียว โฮสติ้ง WordPress แบบ managed ที่แคชในระดับเซิร์ฟเวอร์ มักขอไม่ให้คุณเพิ่มปลั๊กอิน

มีสองพฤติกรรมที่ทำให้เจ้าของเว็บแปลกใจ หลังล้างแคชทั้งหมด แคชจะว่าง (cold) ผู้เข้าชมคนถัดไปของแต่ละหน้า จึงต้องรอระหว่างที่หน้าถูกสร้างใหม่ และผู้ใช้ที่ล็อกอินมักข้ามแคช เว็บไซต์จึงอาจรู้สึกช้าสำหรับคนแก้ไขเว็บ แต่เร็วสำหรับคนอื่น วิธีเพิ่มความเร็วเว็บไซต์ WordPress อธิบายการตั้งค่าอย่างปลอดภัย

Object cache: เรียกฐานข้อมูลน้อยลง

Object cache เก็บผลลัพธ์ query ฐานข้อมูลไว้ในหน่วยความจำ (มักใช้ Redis หรือ Memcached) คำขอที่ซ้ำกัน จึงไม่ต้องไปถึงฐานข้อมูล ส่วน object cache ที่มากับ WordPress อยู่ได้แค่การโหลดหน้าครั้งเดียว ส่วนแบบถาวร (persistent) จะเก็บผลลัพธ์ไว้ข้ามคำขอ

Object cache ช่วยในจุดที่ page cache ช่วยไม่ได้ คือ ผู้ใช้ที่ล็อกอิน ตะกร้าและหน้าชำระเงินของ WooCommerce การค้นหาในเว็บไซต์ และเว็บไซต์ขนาดใหญ่ สำหรับเว็บไซต์แนะนำธุรกิจขนาดเล็ก ประโยชน์มีไม่มาก และต้องได้รับการรองรับจากโฮสต์ จึงควรถามเรื่องนี้ ตอน เลือกเว็บโฮสติ้งให้เว็บเร็ว

สิ่งที่ห้ามแคช

แคชสิ่งที่เหมือนกันทุกตัวอักษร สำหรับผู้เข้าชมทุกคน ห้ามแคชสิ่งที่เป็นของคนคนเดียว หรือของช่วงเวลาเดียว:

• หน้าตะกร้า หน้าชำระเงิน และหน้าบัญชีผู้ใช้
• ทุกอย่างที่แสดงให้ผู้ใช้ที่ล็อกอิน
• เนื้อหาเฉพาะบุคคล เช่น ราคาที่ขึ้นอยู่กับว่าใครกำลังดู
• หน้ายืนยัน ที่แสดงซ้ำสิ่งที่คนเพิ่งส่งมา
• หน้าล็อกอิน หน้ารีเซ็ตรหัสผ่าน และหน้าพรีวิว

แคชรู้จักหน้าเหล่านี้ ผ่านการยกเว้น URL คุกกี้ และ header ตอนล็อกอิน WordPress จะตั้งคุกกี้ที่ขึ้นต้นด้วย wordpress_logged_in_ และปลั๊กอินแคชส่วนใหญ่ จะข้ามแคชเมื่อเห็นคุกกี้นี้ ส่วน WooCommerce จะทำเครื่องหมายหน้าตะกร้า หน้าชำระเงิน และหน้าบัญชี ว่าห้ามแคช

กับดักอยู่ที่ฝั่ง CDN CDN ไม่รู้อะไรเลย เรื่องการล็อกอินหรือตะกร้าของ WordPress ถ้าคุณไม่ได้ตั้งค่าไว้ ถ้าตั้งให้แคชทุกหน้า โดยไม่สนใจ header ที่เว็บไซต์ส่งมา และไม่มีกฎข้ามแคช สำหรับคุกกี้และ path เหล่านั้น CDN อาจส่งตะกร้าของลูกค้าคนหนึ่ง ให้ผู้เข้าชมคนถัดไป นั่นคือเหตุการณ์ละเมิดความเป็นส่วนตัว ไม่ใช่แค่บั๊ก

ทดสอบความผิดพลาดแบบเงียบ ๆ อีกสองแบบด้วย:

• โทเค็นความปลอดภัยหมดอายุ แบบฟอร์มบางตัวฝังโทเค็นความปลอดภัยของ WordPress (nonce) ซึ่งโดยค่าเริ่มต้น จะหมดอายุ 12 ถึง 24 ชั่วโมงหลังถูกสร้างขึ้น ถ้าแคชหน้านานกว่าประมาณ 12 ชั่วโมง แบบฟอร์มอาจใช้ไม่ได้ ให้ตั้งอายุแคชให้สั้นกว่านั้น หรือใช้แบบฟอร์มที่ดึงโทเค็นใหม่เอง
• ภาษาหรือสกุลเงินที่สลับด้วยคุกกี้ URL แยกตามภาษา แคชได้โดยไม่มีปัญหา แต่ถ้าคุกกี้เป็นตัวสลับภาษาหรือสกุลเงิน บน URL เดียวกัน แคชต้องแยกตามคุกกี้นั้นด้วย ไม่อย่างนั้น ผู้เข้าชมจะได้เวอร์ชันไหนก็ตาม ที่ถูกเก็บไว้ก่อน

ลองตรวจเอง ใส่สินค้าลงตะกร้า แล้วเปิดหน้าตะกร้าในหน้าต่างส่วนตัว ตะกร้าต้องว่างเปล่า และลองส่งแบบฟอร์ม บนหน้าที่ถูกแคชไว้หนึ่งวัน

ต้องใช้ CDN ไหม?

ขึ้นอยู่กับว่าผู้เข้าชม อยู่ห่างจากเซิร์ฟเวอร์ของคุณแค่ไหน และทราฟฟิกเข้ามาในลักษณะไหน

ลองตรวจเอง ดูใน Google Analytics ว่าผู้เข้าชมมาจากที่ไหน แล้ววัดเวลาจนถึงไบต์แรก (TTFB) จากสถานที่เหล่านั้น ด้วย WebPageTest ส่วน PageSpeed Insights แสดง TTFB ของผู้เข้าชมจริง เมื่อ Google มีข้อมูลพอ ตามที่อธิบายไว้ใน วิธีอ่านผล PageSpeed Insights ส่วน web.dev ของ Google แนะนำ 0.8 วินาทีหรือน้อยกว่า เป็นเป้าหมายคร่าว ๆ ถ้าดีเมื่อใกล้เซิร์ฟเวอร์ แต่แย่เมื่อไกลออกไป แปลว่าควรใช้ CDN ถ้าแย่ทุกที่ ให้ดูโฮสติ้งและ page cache ก่อน

ประโยชน์ข้างเคียงและข้อควรระวัง

• จัดการ HTTPS ให้ CDN หลายเจ้าออกและต่ออายุใบรับรอง TLS ให้อัตโนมัติ และรองรับโปรโตคอลใหม่ ๆ เช่น HTTP/3
• ป้องกันทราฟฟิกท่วม เครือข่ายขนาดใหญ่ รับทราฟฟิกที่จะทำให้เซิร์ฟเวอร์เดียวล่มได้ และมักมีการป้องกัน denial-of-service ขั้นพื้นฐานมาด้วย ซึ่งเป็นส่วนเสริม ไม่ได้แทนพื้นฐานใน คู่มือความปลอดภัย WordPress
• ลดภาระโฮสติ้ง CDN บางเจ้ายังส่งหน้าที่แคชไว้ต่อไปได้ ระหว่างที่เซิร์ฟเวอร์ของคุณล่มชั่วคราว

ข้อควรระวังคือ CDN เป็นอีกชั้นที่ต้องตั้งค่า จ่ายเงิน และแก้ปัญหา CDN แบบครอบทั้งเว็บไซต์ส่วนใหญ่ ต้องชี้ DNS ของโดเมนไปที่ CDN จึงควรวางแผนอย่างรอบคอบ เหมือน การย้ายไปโฮสต์ใหม่ และควรเข้ารหัสการเชื่อมต่อตลอดทาง จนถึงเซิร์ฟเวอร์ของคุณ ถ้า CDN เชื่อมต่อกับ origin ผ่าน HTTP ธรรมดา ในขณะที่ WordPress บังคับ HTTPS คุณอาจเจอ redirect วนไม่รู้จบ

ทำไมแก้แล้วไม่เห็นผล?

คุณบันทึกหน้าแล้ว แต่เวอร์ชันเก่ายังแสดงอยู่ ไม่ว่าจะสำหรับคุณหรือเพื่อนร่วมงาน แปลว่ามีแคชกำลังส่งสำเนาเก่า การลบสำเนานั้นเรียกว่า purge

ล้างแคชเว็บไซต์ตามลำดับที่ถูกต้อง

ล้างจากเซิร์ฟเวอร์ไล่ออกมาด้านนอก เพราะแต่ละชั้นเติมสำเนา จากชั้นที่อยู่ข้างหลัง ถ้า purge CDN ก่อน CDN อาจดึงหน้าเก่า กลับมาจาก page cache ของคุณทันที

1. Object cache เฉพาะเมื่อการเปลี่ยนเมนู widget หรือการตั้งค่า ดูเหมือนค้างอยู่
2. Page cache ในปลั๊กอินแคช หรือแผงควบคุมโฮสติ้ง
3. CDN สำหรับ URL ที่เปลี่ยน หรือทั้งหมด หลังเปลี่ยนดีไซน์
4. เบราว์เซอร์ของคุณ ด้วยการ hard reload (Ctrl+Shift+R หรือ Cmd+Shift+R บน Mac ในเบราว์เซอร์ส่วนใหญ่) หรือหน้าต่างส่วนตัว ข้อนี้มีผลแค่กับเบราว์เซอร์ของคุณเอง

อาการ สาเหตุ และวิธีแก้

การป้องกันดีกว่าการ purge การตั้งค่าที่ดี จะล้างหน้าที่แก้ไข และหน้าที่แสดงรายการของหน้านั้น ทันทีที่คุณเผยแพร่

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

CDN กับเว็บโฮสติ้งเหมือนกันไหม?

ไม่ใช่ โฮสติ้งคือที่ที่เว็บไซต์ของคุณอยู่ และที่ที่หน้าถูกสร้างขึ้น ส่วน CDN อยู่ด้านหน้า และส่งสำเนาออกไป คุณยังต้องมีเซิร์ฟเวอร์ origin และถ้า origin ช้า ทุกครั้งที่แคช miss ก็จะช้าตาม

แคชเว็บไซต์ช่วย SEO ไหม?

ช่วยทางอ้อม การแคชช่วยลดเวลาตอบสนอง ของเซิร์ฟเวอร์เป็นหลัก ซึ่งส่งผลต่อ Largest Contentful Paint หนึ่งใน Core Web Vitals ของ Google เอกสารเรื่องการ crawl ของ Google ก็บอกว่า การตอบสนองที่เร็วและเสถียร ของเซิร์ฟเวอร์ ทำให้ Google crawl เว็บไซต์ขนาดใหญ่ได้มากขึ้น แต่การแคชชดเชยเนื้อหาที่อ่อนไม่ได้

ใช้ปลั๊กอินแคชสองตัวพร้อมกันได้ไหม?

ไม่ได้ page cache สองตัวจะขัดกัน และทำให้หาต้นเหตุของปัญหาได้ยาก ฟีเจอร์เสริมของปลั๊กอินเหล่านี้ เช่น การ minify หรือหน่วงการโหลดสคริปต์ มักทำให้เลย์เอาต์พัง จึงควรเปิดทีละอย่าง และเช็กหน้าสำคัญหลังเปิดแต่ละอย่าง

ขั้นตอนต่อไป

การตั้งค่าแคชที่ดี สำหรับเว็บไซต์ธุรกิจทั่วไป:

• Page cache ชั้นเดียว พร้อม purge อัตโนมัติเมื่ออัปเดต
• อายุแคชบนเบราว์เซอร์ที่ยาว สำหรับไฟล์ที่มีเวอร์ชัน และสั้นหรือ no-cache สำหรับ HTML
• กฎข้ามแคชที่ทดสอบแล้ว สำหรับตะกร้า บัญชีผู้ใช้ ผู้ใช้ที่ล็อกอิน และหน้าเฉพาะบุคคล
• Object cache แบบถาวร ถ้าคุณมีผู้ใช้ที่ล็อกอิน ร้านค้า หรือเว็บไซต์ขนาดใหญ่
• CDN ถ้ากลุ่มเป้าหมายกระจายตัว หรือทราฟฟิกพุ่งเป็นช่วง ๆ โดยเชื่อมระบบ purge ไว้ด้วย

คู่มือเพิ่มความเร็วเว็บไซต์ แสดงว่าการแคชอยู่ตรงไหน เมื่อเทียบกับรูปภาพ สคริปต์ และโฮสติ้ง การตั้งค่าแคช ก็อาจคลาดเคลื่อนไปตามเวลาด้วย ปลั๊กอินใหม่ หรือกฎ CDN ที่ไม่มีใครบันทึกไว้ อาจทำให้หน้าหยุดถูกแคชแบบเงียบ ๆ หรือแคชหน้าที่ไม่ควรแคช แผนดูแลเว็บไซต์ ของเรา ดูแลให้ WordPress อัปเดตและถูกเฝ้าระวังอยู่เสมอ และแผน Growth เพิ่มงานปรับความเร็วรายเดือน ซึ่งเป็นที่ที่การตรวจแคชควรอยู่

ไม่แน่ใจว่าหน้าของคุณถูกส่งจากแคชหรือไม่ หรือ CDN จะคุ้มค่าไหม? ขอ ตรวจสอบเว็บไซต์ฟรี แล้วบอกเราว่าลูกค้าของคุณอยู่ที่ไหน เพื่อให้การตรวจความเร็ว สะท้อนผู้เข้าชมจริงของคุณ