ปัญหาคลาสสิคของคนที่ทำงานเกี่ยวข้องกับเว็บของบริษัท คือการที่ทีมเว็บแจ้งอัปเดตข้อมูลแต่พอเราเข้าไปดูกลับยังไม่พบการอัปเดต เมื่อแจ้งปัญหานี้ไป ทางทีมเว็บก็มีการตอบกลับมาว่าให้เคลียร์แคชด้วย แล้ว cache เนี่ยมันคืออะไร? เคลียร์ยังไง? สิ่งที่ผู้ดูแลเว็บไซต์ต้องอธิบายบ่อยมากที่สุดคือเรื่องแคชนี่แหละ
Table of Contents
แคช คืออะไร ทำไมต้องมีแคชให้วุ่นวาย?
แคช (Cache) คือ คอนเซปต์การ provide ข้อมูลชุดเดิมที่มีการ request ซ้ำๆ โดยที่ไม่ผ่านการประมวลผลบน server ทุกครั้งที่มีการ request ช่วยลดภาระการทำงานของ server เนื่องจากข้อมูลที่ส่งไปก็เป็นชุดเดิมอยู่ดี สิ่งที่เกิดขึ้นคือเมื่อผู้ใช้เข้าเว็บ ระบบจะไปประมวลผลที่ server แล้วบันทึกไฟล์นั้นไว้ เมื่อมีการเข้าซ้ำ จะไม่ไปประมวลผลที่ server แต่จะหยิบ cache มาแสดงแทน
คอนเซปต์นี้จึงเป็นสิ่งสำคัญมากสำหรับเว็บคอนเทนต์ อย่างพวกเว็บบริษัทหรือเว็บสำนักข่าว ที่เป็นเว็บ static หากหน้าเว็บไม่ได้มีการอัปเดตเราก็ buffer ข้อมูลชุดเดิมเตรียมไว้ แล้วส่งให้ผู้เข้าชมเว็บไซต์ โดยที่ไม่ต้องให้ server ประมวลผลทุกครั้งที่มีคนเข้าชม
cache นั้นมีหลายระดับ โดยแคชที่เป็นประเด็นในบทความนี้ ที่ user หรือทีม marketing ตบตีกับทีมเว็บอยู่เป็นประจำคือ private cache ที่อยู่บน web browser นี่แหละ
การเข้าเว็บไซต์ครั้งแรก (full site load)
เมื่อผู้ใช้เข้าหน้าเว็บไซต์ครั้งแรก browser ไปโหลดข้อมูลทั้งหมดจากหน้า URL ที่คุณเข้า แล้วเซฟไฟล์จากหน้าเว็บเอาไว้ในเครื่อง (ไฟล์ที่คุณจะเห็นคนเดียว เลยเรียกมันว่า private cache)
ในภาพด้านล่างเราจะเห็นว่า มีการส่งข้อมูลขนาด 8.5 MB ในการเรียกหน้าเว็บ เป็นการโหลดทั้งหน้า
การเข้าเว็บไซต์ครั้งถัดไป (memory cache load)
หากมีการเรียกหน้าเดิมซ้ำในหน้าเดิมเวลาใกล้กัน browser จะไม่ได้เรียกข้อมูลใหม่ทั้งหมด แต่จะนำไฟล์ที่เซฟไว้ในเครื่องนี่แหละมาเสิร์ฟให้ผู้เข้าชมแทน ระบบจะโหลดไฟล์จาก server ให้น้อยที่สุดเพื่อที่ต้องการแสดงผลอย่างรวดเร็ว
ในภาพด้านล่างเป็นการเข้าเว็บหน้าเดิมซ้ำในเวลาใกล้เคียงกัน จะดาวน์โหลดข้อมูลใหม่เพียง 55 kB เท่านั้น แล้วถ้าดูในกรอบสีเหลือง เราจะเห็นว่าพวกลไฟล์ภาพหรือ style ต่างๆ จะมาจาก memory cache เกือบทั้งหมดเลย สิ่งที่เราเห็นจากการเข้าเว็บครั้งถัดไปจึงเป็นข้อมูลที่มาจากไฟล์ในเครื่องเรานั่นเอง
เราจะเห็นว่า cache เป็นความหวังดีที่ browser แต่ละเจ้าให้ความสำคัญกับประสบการณ์ผู้ใช้ แต่ข้อเสียคือเมื่อคอนเทนต์บนเว็บไซต์มีการอัปเดต แต่ browser ที่รักไม่ทราบว่ามีข้อมูลใหม่ แล้วส่งไฟล์ข้อมูลเดิมที่เจ้าของเครื่องเคยเข้าไว้ให้พวกเค้าชม เป็นที่มาของปัญหานี้นั่นเอง
การเคลียร์ cache บน web browser กันเถอะ
การ reload หน้าบน web browser โดยการกดปุ่ม refresh หรือ กด F5 จะยังไม่ได้เป็นการเคลียร์แคชที่ browser (สำหรับ static website ทั่วไปส่วนใหญ่) ทำให้เราไม่พบการอัปเดตตามข้อมูลบนเว็บจริง เพราะ browser จะยังเสิร์ฟ cache ให้คุณอยู่ นอกจากว่าคุณจะรอจนไฟล์นั้นหมดอายุไปแล้วโหลดข้อมูลใหม่ (cache มีอายุจำกัดอยู่ด้วยครับ)
ดังนั้นเราจึงต้องกด hard reload เพื่อให้ browser นั้นโหลดข้อมูลใหม่แทน cache file เดิม ซึ่งโดย browser เจ้าตลาดที่เราใช้กันนั้น สามารถ hard reload ด้วย hot key ดังนั้น
- Windows: CTRL + R
- macOS: CMD + Shift + R
อีกหนึ่งวืธีคือเราสามารถเข้าผ่าน private browser หรือ incognito mode ได้ เพื่อที่จะให้เกิด full site load ไม่โหลดและไม่เก็บข้อมูลจาก cache
- Windows: CTRL + Shift + N
- macOS: CMD + Shift + N
สรุปความวุ่นวายจาก cache
cache file โดยพื้นที่ฐานแล้วถูกสร้างมาอำนวยความสะดวกให้กับทั้งผู้ใช้และผู้ดูแลเว็บไซต์ โดย cache ในฝั่งของ server นั้นไม่มีปัญหาอะไรหรอก ส่วนใหญ่เมื่อระบบเว็บอัปเดตก็จะไป trigger ให้ purge cache โดยอัติโนมัติ
แต่ก็หลายครั้งเหมือนกัน ที่ cache บน web browser นี่แหละ เจ้าปัญหาที่ทำให้ทีม marketing กับ web admin ต้องเรียกคุยกันเนื่องจากอัปเดตแล้วดันเห็นหน้าเว็บแสดงผลไม่เหมือนกันซะอย่างนั้น ฮ่าฮ่า