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