คู่มือนี้จะแสดงวิธีใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อทำสิ่งต่อไปนี้
- ทดสอบว่าคุณเพิ่มประสิทธิภาพหน้าเว็บเพื่อการโหลดทันทีหรือไม่เมื่อใช้ปุ่มย้อนกลับและไปข้างหน้าของเบราว์เซอร์
- ระบุปัญหาที่อาจทำให้หน้าเว็บของคุณไม่มีสิทธิ์สำหรับการแคชประเภทนี้
Back/Forward Cache (หรือ bfcache) คือการเพิ่มประสิทธิภาพเบราว์เซอร์ที่เปิดใช้การนำทางกลับและไปข้างหน้าแบบทันที ดูข้อมูลเพิ่มเติมได้ที่ Back/Forward Cache
ทดสอบ Back-Forward Cache
หากต้องการทดสอบ Back-Forward Cache ให้ทำตามขั้นตอนต่อไปนี้
ในหน้า เปิด DevTools แล้วไปที่แอปพลิเคชัน > บริการที่ทำงานอยู่เบื้องหลัง > Back/Forward Cache
คลิกทดสอบแคชย้อนหลัง
Chrome จะนำคุณไปยัง
chrome://terms/และกลับไปที่หน้าของคุณโดยอัตโนมัติหรือจะคลิกปุ่มย้อนกลับและไปข้างหน้าของเบราว์เซอร์ก็ได้
หาก Back-Forward Cache ใช้งานได้กับหน้าที่ไม่มีปัญหา คุณจะเห็นข้อความต่อไปนี้
ไม่เช่นนั้นคุณจะเห็นรายการปัญหา
หากต้องการดูว่าปัญหาใดที่ส่งผลต่อเฟรม ให้ขยายส่วนเฟรม 
แก้ไขปัญหาที่ทำให้ไม่สามารถแคชได้
หากหน้าเว็บไม่มีสิทธิ์ใช้การแคชย้อนหลัง แท็บแคชย้อนหลังจะแสดงรายการที่มีสาเหตุ 3 ประเภท ดังนี้
- นำไปปฏิบัติได้ คุณแก้ไขปัญหาเหล่านี้เพื่อเปิดใช้การแคชได้ เช่น หยุดใช้เหตุการณ์
unload - รอการสนับสนุน Chrome ยังไม่รองรับฟีเจอร์เหล่านี้ จึงป้องกันการแคชได้ แต่เมื่อมีการสนับสนุนแล้ว Chrome จะนำข้อจำกัดเหล่านี้ออก
- ดำเนินการไม่ได้ คุณแก้ไขปัญหาเหล่านี้ในหน้านี้ไม่ได้ บางอย่างที่อยู่นอกเหนือการควบคุมของหน้าป้องกันการแคช
หากต้องการดูว่าเฟรมใดเป็นตัวบล็อก ให้ขยายส่วนที่เกี่ยวข้องใต้คําอธิบายปัญหา
ปัญหาที่พบได้ทั่วไปซึ่งทำให้ใช้การแคชย้อนหลัง
เหตุผลหลัก 2 ประการที่ป้องกันไม่ให้ bfcache ทำงาน ได้แก่
ส่วนหัว
Cache-Control: no-storeเราแนะนำให้ใช้ค่าของส่วนหัวนี้สำหรับหน้าเว็บที่มีข้อมูลส่วนตัว สำหรับหน้าเว็บที่คุณต้องการความใหม่พอสมควร ให้ใช้
no-cacheหรือใช้เวลาในการแคชสั้นๆ เช่นmax-age=60ตัวแฮนเดิลการยกเลิกการโหลดที่มีปัญหา
Chrome มีแผนที่จะเลิกใช้งานตัวแฮนเดิลการยกเลิกการโหลดและขอแนะนำว่าอย่าใช้เหตุการณ์
unloadประกาศส่วนหัวการตอบกลับ HTTP
Permissions-Policy: unload=()เพื่อให้แน่ใจว่าเว็บไซต์ไม่ได้ใช้ตัวแฮนเดิลการยกเลิกการโหลด เช่น ป้องกันไม่ให้ส่วนขยายเพิ่มเหตุการณ์unload