Back-Forward Cache ช่วย Yahoo! ได้อย่างไร JAPAN News มีรายได้เพิ่มขึ้น 9% ในอุปกรณ์เคลื่อนที่

Yuriko Hirota

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 ประสบปัญหาต่อไปนี้

1. การใช้เครื่องจัดการ unload
2. การใช้คำสั่ง 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 เส้นทางหลักอย่างหนึ่งของผู้ใช้มีดังนี้

1. ไปที่รายการบทความ
2. คลิกบทความใดบทความหนึ่งเพื่ออ่าน
3. กลับไปที่รายการบทความ
4. คลิกบทความอื่นเพื่ออ่าน

ก่อน bfcache เมื่อผู้ใช้อ่านบทความเสร็จ (ขั้นตอนที่ 2) ผู้ใช้ต้องรอให้หน้ารายการบทความโหลดอีกครั้ง วิธีนี้อาจเป็นอุปสรรคสำหรับผู้ใช้ที่ต้องการกลับไปที่รายการบทความเพื่อเลือกบทความอื่นมาอ่าน

สาเหตุที่ทำให้เกิดข้อผิดพลาดอีกประการหนึ่งระหว่างการนำทางย้อนหลังคือตำแหน่งการเลื่อน ในทางปฏิบัติ เบราว์เซอร์จะพยายามคืนค่าตำแหน่งการเลื่อนเมื่อมีการนำทางย้อนหลัง อย่างไรก็ตาม เนื่องจากมีโฆษณาที่เพิ่มแบบไดนามิกหรือการเปลี่ยนแปลงเลย์เอาต์อื่นๆ ตำแหน่งการเลื่อนจึงมักได้รับการคืนค่าอย่างไม่ถูกต้อง ซึ่งอาจทำให้ผู้ใช้สูญเสียตำแหน่งไปหรือแม้กระทั่งออกจากหน้า กรณีนี้จะไม่เป็นปัญหาเมื่อการไปยังส่วนต่างๆ แบบย้อนกลับขับเคลื่อนโดย bfcache เพราะตำแหน่งการเลื่อนได้รับการกู้คืนอย่างถูกต้องและทันที

ตอนนี้เมื่อใช้ bfcache แล้ว อุปสรรคในเส้นทางของผู้ใช้จึงหายไปแล้ว ผู้ใช้จึงย้อนกลับไปยังหน้ารายการบทความและเลือกบทความอื่นอ่านได้ทันทีโดยไม่ต้องรอให้หน้ารายการบทความโหลดขึ้น

สิ่งเดียวกันจะเกิดขึ้นเมื่อผู้ใช้เรียกดูจากบทความหนึ่งไปยังอีกบทความหนึ่งและย้อนกลับมาโดยตรง

สรุปแล้วคือประโยชน์ของการใช้ bfcache สำหรับ Yahoo! JAPAN News ประกอบด้วย

• การดูหน้าเว็บเพิ่มขึ้น: ผู้ใช้มีแนวโน้มที่จะไปยังส่วนต่างๆ ภายในเว็บไซต์มากขึ้นเมื่อหน้าเว็บถูกแคชไว้ด้วย bfcache
• รายได้เพิ่มขึ้น: เนื่องจากมีการเพิ่มขึ้นการดูหน้าเว็บต่อเซสชัน การแสดงโฆษณาก็เพิ่มขึ้น ซึ่งส่งผลให้มีรายได้เพิ่มขึ้น 9% ในอุปกรณ์เคลื่อนที่เมื่อเทียบกับกลุ่มทดสอบที่ไม่มี bfcache

บทสรุป

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

ทีม Chrome ยังคงตรวจสอบตัวบล็อก bfcache อย่างต่อเนื่อง โดยเฉพาะอย่างยิ่ง 2 เหตุผลที่ระบุไว้ในบทความนี้เนื่องจากเป็นสาเหตุที่พบบ่อยที่ไม่ได้ใช้ bfcache ในอนาคต การอัปเดตเหล่านี้อาจปิดกั้นการใช้ bfcache ไม่ได้ แต่ไม่จำเป็นต้องรอจนกว่าจะถึงวันดังกล่าว คุณสามารถใช้ประโยชน์จาก bfcache ได้โดยดูที่ตัวบล็อก bfcache และหลีกเลี่ยงรูปแบบที่พบบ่อยและรูปแบบที่พบไม่บ่อยอื่นๆ