Back/Forward Cache (หรือ bfcache) คือการเพิ่มประสิทธิภาพเบราว์เซอร์ที่เปิดใช้การนำทางย้อนกลับและไปข้างหน้าแบบทันที เครื่องมือนี้ช่วยปรับปรุงประสบการณ์การท่องเว็บของผู้ใช้ได้อย่างมาก โดยเฉพาะสำหรับเว็บไซต์ที่เกี่ยวข้องกับการนำทางกลับไปกลับมาหลายรายการ
บทความ web.dev เกี่ยวกับ bfcache
Yahoo! JAPAN News ซึ่งเป็นหนึ่งในแพลตฟอร์มข่าวที่ได้รับความนิยมสูงสุดในญี่ปุ่น ได้ร่วมกันผนึกกำลังกันเพื่อปรับปรุงอัตราการเข้าถึง Bfcache จนส่งผลให้ประสบการณ์ของผู้ใช้และการปรับปรุงธุรกิจเพิ่มขึ้นอย่างมาก โดยเฉพาะอย่างยิ่ง ผลการทดสอบ A/B ขององค์กรแสดงให้เห็นว่า หน้าเว็บที่ใช้ bfcache มีรายได้จากโฆษณาเพิ่มขึ้น 9%
กรณีศึกษานี้จะอธิบายว่า Yahoo! JAPAN News นำตัวบล็อกการใช้ bfcache ออก และพิจารณาว่า bfcache ปรับปรุงประสบการณ์ของผู้ใช้ได้อย่างไร
การนำตัวบล็อกสำหรับ bfcache ออก
bfcache มีให้บริการตั้งแต่ Chrome 86 และใช้ได้กับเบราว์เซอร์สมัยใหม่ทั้งหมดด้วย อย่างไรก็ตาม หากต้องการใช้ประโยชน์จาก bfcache อย่างเต็มที่ จะต้องมีการนำตัวบล็อกที่อาจเกิดขึ้นในเว็บไซต์ออก ตัวบล็อกครั้งใหญ่ที่ Yahoo! JAPAN News ประสบปัญหาต่อไปนี้
- การใช้เครื่องจัดการ
unload
- การใช้คำสั่ง
no-store
กับส่วนหัวCache-control
คุณตรวจสอบตัวบล็อกหลักๆ ในเว็บไซต์ของคุณได้โดยไปที่เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome > แอปพลิเคชัน > Back-Forward Cache (รายละเอียดเพิ่มเติม) หรือใช้ notRestoredReasons
API เพื่อดูตัวบล็อกที่ครอบคลุมมากขึ้นโดยอิงตามการใช้งานจริงในพื้นที่
โดย Yahoo! JAPAN News ได้นำบล็อกเนื้อหาออก
- ยกเลิกการโหลดตัวแฮนเดิล: ใช้เหตุการณ์
pagehide
แทนเหตุการณ์unload
เนื่องจากเหตุการณ์unload
ไม่น่าเชื่อถือมาก นอกจากนี้permission-policy: unload
ยังเปิดตัวใน Chrome 115 เพื่อให้เว็บไซต์นำตัวแฮนเดิลunload
สำหรับต้นทางที่เจาะจงออกได้อย่างน่าเชื่อถือ นอกจากนี้ Chrome ยังวางแผนที่จะค่อยๆ เลิกใช้งานเครื่องจัดการunload
ด้วย Cache-control: no-store
(หรือเรียกสั้นๆ ว่า CCNS): การเปลี่ยนส่วนหัวCache-control
จากno-store
เป็นno-cache
จะเปิดใช้ bfcache ได้ Chrome วางแผนที่จะเริ่มแคชสำหรับ bfcache แม้จะมีส่วนหัวno-store
ในบางกรณี
CCNS มีไว้สำหรับหน้าเว็บที่ไม่ควรแคชไม่ว่าในกรณีใดๆ ซึ่งมาพร้อมกับคำเตือนว่าหน้าที่มี CCNS จะไม่สามารถใช้ประโยชน์จากเทคโนโลยีการแคชใดๆ ได้ ซึ่งรวมถึงเซิร์ฟเวอร์ CDN Edge และแคชในเครื่อง
หากคุณมีส่วนหัว CCNS นี่เป็นโอกาสที่ดีในการพูดคุยเกี่ยวกับกลยุทธ์ Cache-control
ที่เหมาะสมสำหรับเว็บไซต์ของคุณ ความแตกต่างหลักระหว่าง no-store
และ no-cache
มีดังนี้
หากสนใจดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือก Cache-control
โฟลว์ชาร์ตนี้จะช่วยคุณได้
ผลกระทบของ bfcache ในตัวเลข
ในการวัดผลลัพธ์ของ bfcache, Yahoo! JAPAN News ทำการทดสอบ A/B เป็นเวลา 2 สัปดาห์ โดยแสดงหน้าเว็บเวอร์ชันหนึ่งที่มีการแก้ไข bfcache ให้กับกลุ่มหนึ่ง และเวอร์ชันที่มีหน้าที่ไม่มีสิทธิ์ใช้ bfcache แก่อีกกลุ่ม พวกเขาเลือกเส้นทาง URL ที่มีปริมาณการเข้าชมสูงเพื่อให้การทดสอบบรรลุผลลัพธ์ที่มีความหมาย และไม่มีความแตกต่างด้านภาพหรือฟังก์ชันอื่นๆ ระหว่าง 2 เวอร์ชัน
นี่เป็นวิดีโอเปรียบเทียบเว็บไซต์กับ bfcache และไม่มี bfcache คุณจะเห็นว่าเว็บไซต์ที่เปิดใช้ bfcache โหลดได้เร็วขึ้นมากในระหว่างการนำทางย้อนกลับหรือไปข้างหน้า
สิ่งที่มีแนวโน้มเป็นอย่างดีก็คือกลุ่มที่เปิดใช้ bfcache มีการดูหน้าเว็บและรายได้จากโฆษณาเพิ่มขึ้นอย่างมาก โดยเฉพาะบนอุปกรณ์เคลื่อนที่
ต่อไปนี้เป็นรายละเอียดเกี่ยวกับผลกระทบที่เกิดขึ้นโดย Yahoo! JAPAN News กับการทดสอบ A/B ของ bfcache (ดูข้อมูลเพิ่มเติมได้ในบทความกรณีศึกษา)
เมื่อการนำทางย้อนกลับระหว่างหน้าต่างๆ เริ่มทำงานได้ทันทีด้วย bfcache ผู้ใช้มีแนวโน้มที่จะอยู่ที่หน้าเว็บนานขึ้น ดังนั้นจึงเพิ่มจำนวนการดูโฆษณา ซึ่งทำให้มีรายได้จากโฆษณาเพิ่มขึ้น
bfcache ช่วยยกระดับประสบการณ์การใช้งานที่ราบรื่นบนเว็บไซต์
การนำทางจะราบรื่นขึ้นเมื่อหน้าเว็บโหลดได้ทันที
ใน Yahoo! JAPAN News เส้นทางหลักอย่างหนึ่งของผู้ใช้มีดังนี้
- ไปที่รายการบทความ
- คลิกบทความใดบทความหนึ่งเพื่ออ่าน
- กลับไปที่รายการบทความ
- คลิกบทความอื่นเพื่ออ่าน
ก่อน bfcache เมื่อผู้ใช้อ่านบทความเสร็จ (ขั้นตอนที่ 2) ผู้ใช้ต้องรอให้หน้ารายการบทความโหลดอีกครั้ง วิธีนี้อาจเป็นอุปสรรคสำหรับผู้ใช้ที่ต้องการกลับไปที่รายการบทความเพื่อเลือกบทความอื่นมาอ่าน
สาเหตุที่ทำให้เกิดข้อผิดพลาดอีกประการหนึ่งระหว่างการนำทางย้อนหลังคือตำแหน่งการเลื่อน ในทางปฏิบัติ เบราว์เซอร์จะพยายามคืนค่าตำแหน่งการเลื่อนเมื่อมีการนำทางย้อนหลัง อย่างไรก็ตาม เนื่องจากมีโฆษณาที่เพิ่มแบบไดนามิกหรือการเปลี่ยนแปลงเลย์เอาต์อื่นๆ ตำแหน่งการเลื่อนจึงมักได้รับการคืนค่าอย่างไม่ถูกต้อง ซึ่งอาจทำให้ผู้ใช้สูญเสียตำแหน่งไปหรือแม้กระทั่งออกจากหน้า กรณีนี้จะไม่เป็นปัญหาเมื่อการไปยังส่วนต่างๆ แบบย้อนกลับขับเคลื่อนโดย bfcache เพราะตำแหน่งการเลื่อนได้รับการกู้คืนอย่างถูกต้องและทันที
ตอนนี้เมื่อใช้ bfcache แล้ว อุปสรรคในเส้นทางของผู้ใช้จึงหายไปแล้ว ผู้ใช้จึงย้อนกลับไปยังหน้ารายการบทความและเลือกบทความอื่นอ่านได้ทันทีโดยไม่ต้องรอให้หน้ารายการบทความโหลดขึ้น
สิ่งเดียวกันจะเกิดขึ้นเมื่อผู้ใช้เรียกดูจากบทความหนึ่งไปยังอีกบทความหนึ่งและย้อนกลับมาโดยตรง
สรุปแล้วคือประโยชน์ของการใช้ bfcache สำหรับ Yahoo! JAPAN News ประกอบด้วย
- การดูหน้าเว็บเพิ่มขึ้น: ผู้ใช้มีแนวโน้มที่จะไปยังส่วนต่างๆ ภายในเว็บไซต์มากขึ้นเมื่อหน้าเว็บถูกแคชไว้ด้วย bfcache
- รายได้เพิ่มขึ้น: เนื่องจากมีการเพิ่มขึ้นการดูหน้าเว็บต่อเซสชัน การแสดงโฆษณาก็เพิ่มขึ้น ซึ่งส่งผลให้มีรายได้เพิ่มขึ้น 9% ในอุปกรณ์เคลื่อนที่เมื่อเทียบกับกลุ่มทดสอบที่ไม่มี bfcache
บทสรุป
พูดง่ายๆ ก็คือ bfcache ไม่เพียงช่วยให้เว็บไซต์ทันใจ แต่ยังลดอุปสรรคในประสบการณ์ของผู้ใช้โดยรวมและเพิ่มการมีส่วนร่วมภายในเว็บไซต์ด้วย
ทีม Chrome ยังคงตรวจสอบตัวบล็อก bfcache อย่างต่อเนื่อง โดยเฉพาะอย่างยิ่ง 2 เหตุผลที่ระบุไว้ในบทความนี้เนื่องจากเป็นสาเหตุที่พบบ่อยที่ไม่ได้ใช้ bfcache ในอนาคต การอัปเดตเหล่านี้อาจปิดกั้นการใช้ bfcache ไม่ได้ แต่ไม่จำเป็นต้องรอจนกว่าจะถึงวันดังกล่าว คุณสามารถใช้ประโยชน์จาก bfcache ได้โดยดูที่ตัวบล็อก bfcache และหลีกเลี่ยงรูปแบบที่พบบ่อยและรูปแบบที่พบไม่บ่อยอื่นๆ