แคชย้อนหลังช่วย 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 > แอปพลิเคชัน > แคชย้อนกลับ/ไปข้างหน้า หรือจะใช้ notRestoredReasons API เพื่อดูภาพรวมที่ครอบคลุมมากขึ้นของเครื่องมือบล็อกตามการใช้งานจริงในฟิลด์ก็ได้

วิธีการมีดังนี้ JAPAN News นำตัวบล็อกออกแล้ว

• เครื่องจัดการการยกเลิกการโหลดที่แทนที่: ใช้เหตุการณ์ pagehide แทนเหตุการณ์ unload เนื่องจาก unload เชื่อถือไม่ได้อย่างมาก Permissions-Policy: unload=() เปิดตัวใน Chrome 115 เพื่อให้เว็บไซต์นำตัวแฮนเดิล unload สำหรับต้นทางที่เฉพาะเจาะจงออกได้อย่างน่าเชื่อถือ Chrome วางแผนที่จะเลิกใช้งานunloadแฮนเดิลทีละน้อยunload
• เปลี่ยน cache-control: การเปลี่ยนส่วนหัว Cache-control จาก no-store (CCNS) เป็น no-cache จะเปิดใช้ bfcache Chrome กำลังวางแผนแคชสำหรับ bfcache แม้จะมีส่วนหัว no-store ในบางกรณี

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับcache-controlตัวเลือกได้ที่cache-controlโฟลว์ชาร์ต

การทดสอบ A/B เพื่อแสดงให้เห็นถึงผลลัพธ์

Yahoo! JAPAN News ทำการทดสอบ A/B เป็นเวลา 2 สัปดาห์ โดยแสดงหน้าเว็บเวอร์ชันที่มีการแก้ไข bfcache ในกลุ่มหนึ่ง และแสดงหน้าเว็บเวอร์ชันที่มีหน้าที่ไม่มีสิทธิ์ใช้ bfcache ในอีกกลุ่มหนึ่ง โดยได้ทดสอบเส้นทาง URL ที่มีการเข้าชมจำนวนมากเพื่อให้มั่นใจว่าการทดสอบจะให้ผลลัพธ์ที่มีความหมาย นอกจากนี้ หน้าเว็บทั้ง 2 หน้ายังไม่มีความแตกต่างด้านภาพหรือฟังก์ชันการทำงานอื่นๆ

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

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

รายละเอียดเกี่ยวกับผลกระทบที่ Yahoo! สังเกตได้มีดังนี้ JAPAN News ด้วยการทดสอบ A/B ของ bfcache ดูข้อมูลเพิ่มเติมได้ในกรณีศึกษาของพวกเขา

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

ประสบการณ์ของผู้ใช้ที่ราบรื่น

เมื่อหน้าเว็บโหลดทันที การนำทางจะราบรื่นมากขึ้น

ใน Yahoo! JAPAN News ซึ่งเป็นหนึ่งในเส้นทางของผู้ใช้หลักคือการอ่านบทความหลายบทความ

1. ไปที่รายการบทความ
2. คลิกบทความเพื่ออ่าน
3. เมื่อเสร็จแล้ว ให้กลับไปที่รายการบทความ
4. คลิกบทความอื่นเพื่ออ่าน

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

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

ปัญหานี้จะได้รับการแก้ไขเมื่อการไปยังส่วนต่างๆ แบบย้อนกลับทำงานด้วย bfcache โดยระบบจะกู้คืนตำแหน่งการเลื่อนอย่างถูกต้องและทันที

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

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

กล่าวโดยสรุป ประโยชน์ของ bfcache สำหรับ Yahoo! JAPAN News มีข้อมูลต่อไปนี้

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

ใช้ bfcache เลย

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

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