ทำไม CDN ถึงทำให้เว็บช้าลงได้ แทนที่จะเร็วขึ้น
เวลาเราทำเว็บ เรามักจะได้ยินว่าถ้าอยากให้เว็บเร็วขึ้น ต้องใช้ CDN (ระบบกระจายไฟล์ไปเก็บไว้ตามเซิร์ฟเวอร์ทั่วโลก) เพื่อให้คนเข้าชมดึงข้อมูลจากจุดที่ใกล้ที่สุด การติดตั้ง CDN ดูเหมือนเป็นทางลัดที่ใครๆ ก็ทำกันเพื่อเพิ่มความเร็วให้เว็บไซต์
แต่สัปดาห์ที่แล้ว ผมลองเอา CDN มาวางหน้าเว็บตัวเอง ผลที่ได้คือเว็บกลับช้าลงอย่างเห็นได้ชัด ระบบตรวจสอบเว็บที่เคยแจ้งเตือนว่าเว็บผมช้าแค่ 38 หน้า กลับเพิ่มขึ้นเป็น 75 หน้าทันทีหลังจากติดตั้ง
เรื่องนี้สอนให้รู้ว่าการเดาเอาเองโดยไม่คำนวณตัวเลขก่อนนั้นอันตรายมาก วันนี้ผมจะพาไปดูว่าเกิดอะไรขึ้น และทำไมการเพิ่มตัวช่วยบางอย่างถึงกลายเป็นภาระแทน
CDN คืออะไร และทำไมเราถึงใช้มัน
ลองจินตนาการว่าคุณเปิดร้านขายของอยู่ที่กรุงเทพฯ แต่ลูกค้าของคุณกระจายอยู่ทั่วโลก ถ้าลูกค้าจากลอนดอนสั่งของ คุณต้องส่งพัสดุข้ามทวีปไปทุกครั้ง ซึ่งใช้เวลานานมากและเสียค่าขนส่งแพง
CDN หรือ Content Delivery Network (ระบบเครือข่ายเซิร์ฟเวอร์ที่เก็บสำเนาไฟล์ไว้ใกล้ผู้ใช้) เปรียบเหมือนการที่คุณส่งสินค้าไปฝากไว้ที่คลังสินค้าสาขาลอนดอน เมื่อลูกค้าสั่งของ เขาก็แค่ไปหยิบจากคลังใกล้บ้านเขาได้เลย
ในการทำเว็บ เราก็ใช้หลักการเดียวกัน คือการเก็บสำเนาหน้าเว็บไว้ที่เซิร์ฟเวอร์ใกล้ตัวผู้เข้าชมที่สุด ทำให้ผู้ใช้ไม่ต้องรอโหลดข้อมูลจากเซิร์ฟเวอร์หลักที่อยู่ไกลออกไป
เหตุการณ์ก่อนติดตั้ง: ทำไมเว็บถึงช้า
เว็บของผมเป็นเว็บแบบ Static Site (เว็บไซต์ที่สร้างจากไฟล์ HTML สำเร็จรูป ไม่มีการประมวลผลฐานข้อมูล) ซึ่งเซิร์ฟเวอร์หลักอยู่ที่มุมไบ ประเทศอินเดีย การเข้าถึงจากจุดอื่นจึงมีระยะทางที่ไกลเกินไป
ผมตรวจสอบด้วยคำสั่ง curl (เครื่องมือสำหรับส่งคำสั่งผ่านเครือข่ายเพื่อดูข้อมูลการตอบกลับ) เพื่อดูสถานะการเก็บไฟล์ พบว่าระบบตั้งค่าให้เป็น DYNAMIC (สถานะที่ระบุว่าเซิร์ฟเวอร์ไม่เก็บไฟล์ไว้ที่ CDN เลย ต้องไปดึงจากต้นทางตลอด)
# ตรวจสอบสถานะการแคชของหน้าเว็บ
curl -sI https://example.com/ | grep -i 'cache-control|cf-cache-status'
คำสั่งนี้ใช้เพื่อดึงข้อมูลส่วนหัว (Header) ของหน้าเว็บออกมาดู ส่วน grep ช่วยกรองให้เหลือเฉพาะบรรทัดที่บอกสถานะ cf-cache-status ซึ่งผลลัพธ์ที่ได้คือ DYNAMIC แปลว่าทุกครั้งที่มีคนเข้าเว็บ ข้อมูลต้องวิ่งไปดึงจากมุมไบเสมอ
ความผิดพลาดที่เกิดขึ้น: การตั้งค่าที่ยังไม่สมบูรณ์
ผมพยายามแก้ไขด้วยการเพิ่มคำสั่ง Cache-Control (ชุดคำสั่งที่บอกเบราว์เซอร์ว่าควรเก็บไฟล์ไว้นานแค่ไหน) แต่พบว่าแค่ใส่คำสั่งนี้ไปเฉยๆ ระบบ CDN ก็ยังไม่ยอมเก็บไฟล์ HTML ของผมอยู่ดี
ผมต้องเข้าไปตั้งค่า Cache Rule (กฎการกำหนดเงื่อนไขการจัดเก็บข้อมูล) ในระบบ CDN เอง เพื่อบังคับให้มันเก็บไฟล์ HTML เหล่านั้นไว้ที่เซิร์ฟเวอร์ใกล้ตัวผู้ใช้ เมื่อตั้งค่าเสร็จ สถานะก็เปลี่ยนจาก DYNAMIC เป็น HIT (หมายถึงดึงข้อมูลจาก CDN ได้สำเร็จ)
# ตรวจสอบสถานะหลังจากตั้งค่า Cache Rule
# req คือ request หรือการร้องขอข้อมูลจากเซิร์ฟเวอร์
req 1: cf-cache-status: MISS
req 2: cf-cache-status: HIT
req 3: cf-cache-status: HIT
ในตัวอย่างนี้ MISS หมายถึงครั้งแรกที่ระบบยังไม่มีไฟล์จึงต้องวิ่งไปดึงจากต้นทาง ส่วน HIT คือการที่ระบบดึงไฟล์จากที่เก็บใกล้ตัวได้เลย ซึ่งดูเหมือนจะทำงานได้ดีในตอนแรก
ทำไม CDN ถึงทำให้ช้าลง: ความลับของค่า MISS
ความผิดพลาดของผมคือการคิดว่าถ้า HIT จะเร็ว แต่ถ้า MISS ก็แค่ช้าเท่าปกติ ซึ่งจริงๆ แล้วไม่ใช่เลย การที่ CDN ต้องรับหน้าที่ MISS (ไม่มีไฟล์ในระบบ) มันต้องใช้เวลาในการบันทึกไฟล์นั้นลงเครื่องด้วย
ผมวัดความเร็วเปรียบเทียบระหว่างการดึงข้อมูลผ่าน CDN กับการดึงจากเซิร์ฟเวอร์ตรงๆ พบว่าการที่ CDN ต้องมานั่งบันทึกไฟล์ใหม่ทุกครั้งที่ MISS ทำให้มันช้ากว่าการไม่ใช้ CDN เลยประมาณ 85 มิลลิวินาที
นอกจากนี้ Crawler (หุ่นยนต์ของ Google ที่เข้ามาอ่านหน้าเว็บ) มักจะเป็นการเข้าถึงแบบ COLD (คือการเข้าถึงครั้งแรกที่ไม่มีข้อมูลในระบบ) เสมอ ทำให้ทุกครั้งที่หุ่นยนต์มาเก็บข้อมูล มันจะเจอกับสถานะ MISS ตลอดเวลา
วิธีคำนวณก่อนตัดสินใจใช้ CDN
ก่อนที่คุณจะตัดสินใจติดตั้งอะไรเพิ่ม ให้ลองใช้สูตรคำนวณง่ายๆ นี้เสมอ สูตรคือ h × H + (1 − h) × M < B โดยที่ h คืออัตราการสำเร็จ (Hit rate) ที่เราต้องการเพื่อให้คุ้มค่า
Hคือเวลาเมื่อเกิดHIT(เร็ว)Mคือเวลาเมื่อเกิดMISS(ช้ากว่าปกติ)Bคือค่าความเร็วพื้นฐาน (Baseline) ที่คุณมีอยู่เดิม
จากตัวเลขของผม ผมต้องการอัตราการสำเร็จถึง 67% ถึงจะคุ้มค่า แต่ด้วยจำนวนผู้เข้าชมที่น้อยและหน้าเว็บที่เยอะ การจะให้คนเข้าชมซ้ำในหน้าเดิมบ่อยๆ นั้นเป็นไปไม่ได้เลย การติดตั้ง CDN จึงทำให้เว็บช้าลงอย่างเลี่ยงไม่ได้
สรุป: บทเรียนสำหรับโปรแกรมเมอร์มือใหม่
การปรับปรุงประสิทธิภาพ (Performance Tuning) ต้องทำบนพื้นฐานของข้อมูล ไม่ใช่ความรู้สึก อย่าเพิ่งรีบติดตั้งเครื่องมือใหม่เพียงเพราะคนอื่นบอกว่ามันดี ถ้าคุณยังไม่รู้ว่ามันจะส่งผลกระทบต่อ Traffic (จำนวนผู้เข้าชม) ของคุณอย่างไร
สิ่งที่ผมแนะนำให้ทำคือการตรวจสอบผลลัพธ์ด้วยเครื่องมือภายนอกเสมอ อย่าเชื่อตัวเลขที่วัดจากคอมพิวเตอร์ของคุณเองที่อยู่ใกล้เซิร์ฟเวอร์ เพราะมันจะทำให้คุณหลงดีใจว่าเว็บเร็ว ทั้งที่จริงๆ แล้วคนอื่นอาจกำลังรอนานกว่าเดิม
สุดท้ายนี้ หากคุณตัดสินใจใช้ CDN ให้ทำระบบตรวจสอบการอัปเดตไฟล์ด้วยเสมอ เพื่อให้มั่นใจว่าข้อมูลที่ผู้ใช้เห็นคือข้อมูลล่าสุด ไม่ใช่ไฟล์เก่าที่ค้างอยู่ในระบบ
# ตรวจสอบว่าไฟล์บน CDN เป็นเวอร์ชันล่าสุดหรือไม่
LOCAL=$(shasum -a 256 dist/index.html | cut -d' ' -f1) # คำนวณค่ารหัสไฟล์ในเครื่อง
LIVE=$(curl -s https://example.com/ | shasum -a 256 | cut -d' ' -f1) # คำนวณค่ารหัสไฟล์บนเว็บ
if [ "$LOCAL" != "$LIVE" ]; then
echo "ไฟล์บนเซิร์ฟเวอร์ยังไม่อัปเดต"
fi
คำสั่งนี้จะเปรียบเทียบรหัสไฟล์ (Checksum) ในเครื่องเรากับบนเว็บ ถ้าไม่ตรงกันแสดงว่า CDN ยังไม่ยอมอัปเดตไฟล์ใหม่ให้ วิธีนี้จะช่วยให้คุณมั่นใจได้ว่าการ Deploy (เอาโค้ดขึ้นเซิร์ฟเวอร์จริง) ของคุณทำงานได้อย่างถูกต้องจริงๆ
ที่มา: I Added a CDN Cache to My Site and It Got Slower. Here's the Math I Should Have Done First. — freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
