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