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

Yuriko Hirota

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

บทความ web.dev เกี่ยวกับ bfcache

Yahoo! JAPAN News เป็นหนึ่งในแพลตฟอร์มข่าวที่ได้รับความนิยมสูงสุดในญี่ปุ่น ได้ทุ่มเทปรับปรุงอัตรา Hit ของ 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 > แอปพลิเคชัน > แคชย้อนกลับ/ส่งต่อ (รายละเอียดเพิ่มเติม) หรือใช้ 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): การเปลี่ยนส่วนหัว Cache-control จาก no-store เป็น no-cache จะเปิดใช้ bfcache ได้ Chrome ยังวางแผนที่จะเริ่มแคชสำหรับ bfcache แม้จะมีส่วนหัว no-store ในบางสถานการณ์ด้วย

CCNS มีไว้สำหรับหน้าเว็บที่ไม่ควรแคชไม่ว่าในกรณีใดๆ แต่มีข้อควรระวังว่าหน้าเว็บที่มี CCNS จะไม่สามารถใช้เทคโนโลยีแคชใดๆ ซึ่งรวมถึงเซิร์ฟเวอร์ Edge ของ CDN และแคชในเครื่อง

หากคุณมีส่วนหัว CCNS นี่เป็นโอกาสที่ดีในการพูดคุยเกี่ยวกับกลยุทธ์ Cache-control ที่เหมาะกับเว็บไซต์ของคุณ ความแตกต่างหลักระหว่าง no-store กับ no-cache มีดังนี้

หากคุณสนใจดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือก Cache-control โฟลว์ชาร์ตนี้ช่วยคุณได้

ผลกระทบของ bfcache ต่อตัวเลข

Yahoo! จะวัดผลลัพธ์ของ bfcache 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 และหลีกเลี่ยงรูปแบบที่พบได้บ่อยเหล่านี้และรูปแบบอื่นที่ไม่ค่อยมีคนใช้