ทดสอบแคชย้อนหลัง

Sofia Emelianova
Sofia Emelianova
GitHub

คู่มือนี้จะแสดงวิธีใช้ เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อทำสิ่งต่อไปนี้

  • ทดสอบว่าคุณได้เพิ่มประสิทธิภาพหน้าเว็บให้โหลดทันทีเมื่อใช้ปุ่มย้อนกลับและไปข้างหน้าของเบราว์เซอร์หรือไม่
  • ระบุปัญหาที่อาจทําให้หน้าเว็บไม่มีสิทธิ์ใช้การแคชประเภทนี้

Back-Forward Cache (หรือ bfcache) คือการเพิ่มประสิทธิภาพเบราว์เซอร์ที่ช่วยให้ไปข้างหน้าและย้อนกลับไปยังส่วนต่างๆ ได้ทันที ดูข้อมูลเพิ่มเติมได้ที่แคชย้อนกลับ/ไปข้างหน้า

ทดสอบแคชย้อนหลัง

หากต้องการทดสอบแคชย้อนกลับ/ไปข้างหน้า ให้ทำตามขั้นตอนต่อไปนี้

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

    แท็บแคชย้อนหลัง

  2. คลิกทดสอบแคชย้อนหลัง

    Chrome จะนําคุณไปยัง chrome://terms/ และกลับไปที่หน้าเว็บโดยอัตโนมัติ

    หรือจะคลิกปุ่มย้อนกลับและไปข้างหน้าของเบราว์เซอร์ก็ได้

หากแคชย้อนกลับ/ไปข้างหน้าทํางานกับหน้าเว็บของคุณโดยไม่มีปัญหา คุณจะเห็นข้อความต่อไปนี้

แสดงจากแคชย้อนหลังได้สําเร็จ

ไม่เช่นนั้น คุณจะเห็นรายการปัญหา

หากต้องการดูว่าปัญหาใดส่งผลต่อเฟรมใด ให้ขยายส่วนเฟรม ไอคอนขยาย

ส่วนเฟรมที่ขยายแล้ว

แก้ปัญหาที่ทําให้แคชไม่ได้

หากหน้าเว็บไม่มีสิทธิ์ใช้แคชย้อนกลับ/ไปข้างหน้า แท็บ แคชย้อนกลับ/ไปข้างหน้าจะแสดงรายการสาเหตุ 3 ประเภทต่อไปนี้

ไม่มีสิทธิ์ใช้ Back-Forward Cache

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

หากต้องการดูว่าเฟรมใดเป็นเฟรมที่บล็อก ให้ขยายส่วนที่เกี่ยวข้องใต้คำอธิบายของปัญหา

เฟรมที่บล็อก

ปัญหาที่พบบ่อยซึ่งป้องกันไม่ให้แคชย้อนกลับ/ไปข้างหน้า

สาเหตุหลัก 2 ประการที่ทําให้ bfcache ไม่ทํางาน ได้แก่

  • ส่วนหัว Cache-Control: no-store

    เราขอแนะนําให้ใช้ค่าส่วนหัวนี้กับหน้าที่มีข้อมูลส่วนบุคคลและข้อมูลส่วนตัว สําหรับหน้าที่ต้องการให้ข้อมูลล่าสุดพอสมควร ให้ใช้ no-cache หรือเวลาแคชสั้นๆ เช่น max-age=60

  • ตัวแฮนเดิลการยกเลิกการโหลดที่เป็นปัญหา

    Chrome วางแผนที่จะเลิกใช้งานเครื่องจัดการการยกเลิกการโหลด และขอแนะนําว่าอย่าใช้เหตุการณ์ unload

    ประกาศส่วนหัวการตอบกลับ HTTP Permissions-Policy: unload=() เพื่อให้แน่ใจว่าเว็บไซต์ไม่ได้ใช้ตัวแฮนเดิลการยกเลิกการโหลด และป้องกันไม่ให้ส่วนขยายเพิ่มเหตุการณ์ unload ตัวอย่างเช่น