เว็บไซต์ส่วนใหญ่มักจะมีองค์ประกอบที่ไม่ค่อยจะเปลี่ยนแปลงบ่อยนัก เช่น CSS, javascript และรูปภาพ ซึ่งองค์ประกอบเหล่านี้จะต้องใช้เวลาในการโหลดจากเซิฟเวอร์ ทำให้เวลาในการโหลดหน้าเว็บของเราเพิ่มขึ้น HTTP Caching จะทำการแคชไฟล์เหล่านี้ไว้ที่เครื่อง หลังจากมีการแคชไฟล์แล้วหากมีการเข้าเว็บเดิม หรือเรียกใช้ไฟล์เหล่านี้อีก Browser ก็จะใช้ไฟล์ที่ถูกแคชไว้ที่เครื่องทำให้ไม่ต้องเสียเวลาในการโหลดไฟล์จากเครื่องเซิฟเวอร์อีกที ช่วยให้หน้าเว็บของโหลดได้เร็วขึ้น และช่วยลดแบนด์วิธของเซิฟเวอร์เราด้วย (ยิ่งปืนนัดเดียวได้นกสองตัว ^^)
การใช้งาน Browser Caching เราจะต้องมีการเซตค่า HTTP response header เพื่อบอกให้ Browser รู้ว่าเราต้องการให้ Browser แคชไฟล์เหล่านี้ได้ โดยการระบุค่าเหล่านี้กลับไปกับ Response Headers:
– Expires และ Cache-Control: max-age คือ การระบุช่วงเวลาที่ Browser สามารถใช้ไฟล์ที่แคชไว้ที่เครื่อง โดยไม่ต้องไปเช็คกับทางเซิฟเวอร์ว่ามีการแก้ไขไฟล์หรือเปล่า ประมาณว่า ถ้าถึงเวลาค่อยไปโหลดมาจากเซิฟเวอร์ใหม่อีกที
– Last-Modified และ ETag คือ เป็นการระบุลักษณะเฉพาะให้กับไฟล์ เพื่อให้ Browser ตรวจสอบว่าเป็นไฟล์เดียวกันหรือป่าว ในกรณีของ Last-Modified จะเป็นการใช้วันที่ในการตรวจสอบ ส่วนกรณีของ ETag จะเป็นค่าอะไรก็ได้ที่ไม่ซ้ำกันในการระบุไฟล์ (เวอร์ชั่นของไฟล์หรือการ Hashes เนื้อหาของไฟล์)
ซึ่งสองหัวข้อข้างบนนี้ให้เราเลือกใช้อย่างได้อย่างหนึ่งคือ ถ้าใช้ Expires ก็ไม่ต้องใช้ Cache-Control: max-age หรือถ้าใช้ Last-Modified ก็ไม่ต้องใช้ ETag ครับ เพราะหน้าที่ของมันก็เหมือนกันระบุไปทั้งสองอันก็ซ้ำกันเปล่าๆ ครับ