การแคช HTTP จะช่วยให้หน้าเว็บโหลดเร็วขึ้นเมื่อเข้าชมซ้ำ
เมื่อเบราว์เซอร์ขอทรัพยากร เซิร์ฟเวอร์ที่ให้ทรัพยากรจะบอกเบราว์เซอร์ได้ว่าจะจัดเก็บหรือแคชทรัพยากรไว้ชั่วคราวนานเท่าใด เมื่อต้องขอทรัพยากรนั้นหลังจากนั้น เบราว์เซอร์จะใช้สำเนาในเครื่องแทนการรับจากเครือข่าย
วิธีที่การตรวจสอบนโยบายแคชของ Lighthouse ล้มเหลว
Lighthouse จะแจ้งว่าทรัพยากรแบบคงที่ทั้งหมดที่ไม่ได้แคชไว้นั้นไม่เหมาะสม ดังนี้
Lighthouse จะถือว่าทรัพยากรแคชได้ในกรณีต่อไปนี้
- ทรัพยากรอาจเป็นแบบอักษร รูปภาพ ไฟล์สื่อ สคริปต์ หรือสไตล์ชีต
- ทรัพยากรมีรหัสสถานะ HTTP
200,203หรือ206 - ทรัพยากรไม่มีนโยบายว่าไม่ใช้แคชอย่างชัดแจ้ง
เมื่อหน้าเว็บไม่ผ่านการตรวจสอบ Lighthouse จะแสดงผลลัพธ์ในตารางที่มี 3 คอลัมน์ ดังนี้
| URL | ตำแหน่งของทรัพยากรที่แคชได้ |
| TTL ของแคช | ระยะเวลาแคชปัจจุบันของทรัพยากร |
| ขนาดการโอน | ปริมาณข้อมูลโดยประมาณที่ผู้ใช้จะประหยัดได้หากแคชทรัพยากรที่แจ้งว่าไม่เหมาะสมไว้ |
วิธีแคชทรัพยากรแบบคงที่โดยใช้แคช HTTP
กำหนดค่าเซิร์ฟเวอร์ให้แสดงส่วนหัวการตอบกลับ HTTP Cache-Control ดังนี้
Cache-Control: max-age=31536000
คำสั่ง max-age จะบอกเบราว์เซอร์ว่าควรแคชแหล่งข้อมูลเป็นระยะเวลาเท่าใด โดยมีหน่วยเป็นวินาที
ตัวอย่างนี้ตั้งค่าระยะเวลาเป็น 31536000 ซึ่งสอดคล้องกับ 1 ปีคือ
60 วินาที × 60 นาที × 24 ชั่วโมง × 365 วัน = 31536000 วินาที
คุณควรแคชเนื้อหาคงที่ที่เปลี่ยนแปลงไม่ได้เป็นเวลานาน เช่น 1 ปีขึ้นไป
ใช้ no-cache หากทรัพยากรมีการเปลี่ยนแปลงและความใหม่เป็นเรื่องสำคัญ
แต่คุณยังต้องการรับประโยชน์จากการแคชที่รวดเร็ว
เบราว์เซอร์จะยังคงแคชทรัพยากรที่ตั้งค่าเป็น no-cache แต่ตรวจสอบกับเซิร์ฟเวอร์ก่อนเพื่อให้แน่ใจว่าทรัพยากรนั้นยังเป็นปัจจุบัน
ระยะเวลาแคชนานขึ้นไม่ได้ดีเสมอไป ท้ายที่สุดแล้ว คุณเป็นผู้ตัดสินใจว่าระยะเวลาแคชที่เหมาะสมที่สุดสำหรับทรัพยากรของคุณคือเท่าใด
คำสั่งต่างๆ สำหรับการปรับเปลี่ยนวิธีแคชทรัพยากรต่างๆ ของเบราว์เซอร์มีอยู่มากมาย ดูข้อมูลเพิ่มเติมเกี่ยวกับทรัพยากรการแคชได้ในแคช HTTP: คู่มือการป้องกันบรรทัดแรกและการกำหนดค่า Codelab เกี่ยวกับการแคช HTTP
วิธียืนยันการตอบกลับที่แคชไว้ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
หากต้องการดูว่าเบราว์เซอร์ดึงทรัพยากรใดจากแคช ให้เปิดแท็บเครือข่ายในเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome โดยทำดังนี้
- กด
Control+Shift+J(หรือCommand+Option+Jใน Mac) เพื่อเปิด DevTools - คลิกแท็บเครือข่าย
คอลัมน์ขนาดใน Chrome DevTools จะช่วยยืนยันว่าทรัพยากรได้มีการแคชแล้ว
Chrome จะแสดงทรัพยากรที่ขอมากที่สุดจากแคชหน่วยความจำซึ่งรวดเร็วมาก แต่จะถูกล้างออกเมื่อเบราว์เซอร์ปิด
หากต้องการยืนยันว่ามีการตั้งค่าส่วนหัว Cache-Control ของทรัพยากรตามที่คาดไว้ ให้ตรวจสอบข้อมูลส่วนหัว HTTP ของทรัพยากร ดังนี้
- คลิก URL ของคำขอในคอลัมน์ชื่อของตารางคำขอ
- คลิกแท็บส่วนหัว
Cache-Control ผ่านแท็บส่วนหัว
คำแนะนำเฉพาะสแต็ก
Drupal
ตั้งค่าอายุสูงสุดของแคชในเบราว์เซอร์และพร็อกซีในหน้าการดูแลระบบ » การกำหนดค่า » การพัฒนา อ่านเกี่ยวกับแคช Drupal และการเพิ่มประสิทธิภาพ
Joomla
ดูแคช