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

Yuriko Hirota

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

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

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 ไม่น่าเชื่อถือมาก นอกจากนี้ Permissions-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: no-store	Cache-control: 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 (ดูข้อมูลเพิ่มเติมได้ในบทความกรณีศึกษา)

เมตริก	% การเพิ่มขึ้น (อุปกรณ์เคลื่อนที่)	% การเพิ่มขึ้น (เดสก์ท็อป)
อัตรา Hit ของ bfcache	+54.03 จุด (0.04% → 54.07%)	+47.28 จุด (0.02% → 47.30%)
การดูหน้าเว็บ	+2.26%	+0.65%
รายได้จากโฆษณา	+9.0%	+0.6%

เมื่อการไปยังหน้าก่อนหน้า/ถัดไประหว่างหน้าเว็บเป็นไปอย่างรวดเร็วด้วย 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 และหลีกเลี่ยงรูปแบบที่พบบ่อยเหล่านี้และรูปแบบอื่นๆ ที่พบไม่บ่อย