แสดงเนื้อหาแบบคงที่ที่มีนโยบายแคชที่มีประสิทธิภาพ

การแคช HTTP จะช่วยให้หน้าเว็บโหลดเร็วขึ้นเมื่อเข้าชมซ้ำ

เมื่อเบราว์เซอร์ขอทรัพยากร เซิร์ฟเวอร์ที่ให้ทรัพยากรจะบอกเบราว์เซอร์ได้ว่าจะจัดเก็บหรือแคชทรัพยากรไว้ชั่วคราวนานเท่าใด เมื่อต้องขอทรัพยากรนั้นหลังจากนั้น เบราว์เซอร์จะใช้สำเนาในเครื่องแทนการรับจากเครือข่าย

Lighthouse จะแจ้งว่าทรัพยากรแบบคงที่ทั้งหมดที่ไม่ได้แคชไว้นั้นไม่เหมาะสม ดังนี้

ภาพหน้าจอของเนื้อหาแบบคงที่ของ Lighthouse Serve ที่มีการตรวจสอบนโยบายแคชที่มีประสิทธิภาพ

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 โดยทำดังนี้

  1. กด Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิด DevTools
  2. คลิกแท็บเครือข่าย

คอลัมน์ขนาดใน Chrome DevTools จะช่วยยืนยันว่าทรัพยากรได้มีการแคชแล้ว

คอลัมน์ขนาด

Chrome จะแสดงทรัพยากรที่ขอมากที่สุดจากแคชหน่วยความจำซึ่งรวดเร็วมาก แต่จะถูกล้างออกเมื่อเบราว์เซอร์ปิด

หากต้องการยืนยันว่ามีการตั้งค่าส่วนหัว Cache-Control ของทรัพยากรตามที่คาดไว้ ให้ตรวจสอบข้อมูลส่วนหัว HTTP ของทรัพยากร ดังนี้

  1. คลิก URL ของคำขอในคอลัมน์ชื่อของตารางคำขอ
  2. คลิกแท็บส่วนหัว
การตรวจสอบส่วนหัว Cache-Control ผ่านแท็บส่วนหัว
การตรวจสอบส่วนหัว Cache-Control ผ่านแท็บส่วนหัว

คำแนะนำเฉพาะสแต็ก

Drupal

ตั้งค่าอายุสูงสุดของแคชในเบราว์เซอร์และพร็อกซีในหน้าการดูแลระบบ » การกำหนดค่า » การพัฒนา อ่านเกี่ยวกับแคช Drupal และการเพิ่มประสิทธิภาพ

Joomla

ดูแคช

WordPress

ดูการแคชของเบราว์เซอร์

แหล่งข้อมูล