กรณีศึกษา

Instagram และ Facebook ให้การเล่นทันทีและเพิ่มการมีส่วนร่วมของผู้ใช้ด้วย Media3 PreloadManager

ใช้เวลาอ่าน 4 นาที
Mayuri Khinvasara Khabya
วิศวกรนักพัฒนาซอฟต์แวร์สัมพันธ์

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

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

ช่องว่างของเวลาในการตอบสนองในวิดีโอแบบสั้น

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

เส้นทางข้างหน้าด้วย Media3 PreloadManager

Jetpack Media3 จึงได้เปิดตัว PreloadManager เพื่อรับมือกับการเปลี่ยนแปลงพฤติกรรมการบริโภคจากการเพิ่มขึ้นของเนื้อหาแบบสั้นและข้อจำกัดของสถาปัตยกรรมการเล่นเนื้อหาแบบยาวแบบเดิม คอมโพเนนต์นี้ช่วยให้นักพัฒนาแอปสามารถใช้แคชดิสก์ได้มากขึ้น โดยมีการควบคุมและการปรับแต่งแบบละเอียดเพื่อให้สื่อพร้อมในหน่วยความจำก่อนที่ผู้ใช้จะกดเล่น อ่านชุดบล็อกนี้เพื่อทําความเข้าใจรายละเอียดทางเทคนิคเกี่ยวกับการเล่นสื่อด้วย PreloadManager

วิธีที่ Meta ทำให้การเล่นเป็นแบบเรียลไทม์อย่างแท้จริง

ความซับซ้อนที่มีอยู่

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

การผสานรวม Media3 PreloadManager

ทีมไคลเอ็นต์ Media Foundation ของ Meta ได้ผสานรวม Jetpack Media3 PreloadManager เข้ากับ Facebook และ Instagram เพื่อให้เล่นได้ทันทีอย่างแท้จริง โดยเลือกใช้ DefaultPreloadManager เพื่อรวมระบบการโหลดล่วงหน้าและการเล่นการผสานรวมนี้ต้องมีการปรับโครงสร้างสถาปัตยกรรมที่มีอยู่ของ Meta เพื่อให้แชร์ทรัพยากรได้อย่างมีประสิทธิภาพระหว่างอินสแตนซ์ PreloadManager กับ ExoPlayer การเปลี่ยนแปลงเชิงกลยุทธ์นี้ทำให้เราได้เปรียบด้านสถาปัตยกรรมที่สำคัญ นั่นคือความสามารถในการทำงานแบบขนานสำหรับงานการโหลดล่วงหน้า และการจัดการวิดีโอจำนวนมากโดยใช้โปรแกรมเล่นอินสแตนซ์เดียว ซึ่งช่วยเพิ่มความสามารถในการโหลดล่วงหน้าได้อย่างมาก ในขณะเดียวกันก็ลดความซับซ้อนของหน่วยความจำสูงในแนวทางก่อนหน้า

colinKho.png

การเพิ่มประสิทธิภาพและการปรับประสิทธิภาพ

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

การปรับแต่งการใช้งานให้เข้ากับรูปแบบ UI ที่เฉพาะเจาะจง

Meta ใช้กลยุทธ์การโหลดล่วงหน้าที่แตกต่างกันและปรับแต่งลักษณะการทำงานให้ตรงกับรูปแบบ UI เฉพาะของแต่ละแอป ดังนี้

  • ฟีดข่าวของ Facebook: UI จะจัดลำดับความสำคัญของวิดีโอที่กำลังแสดง โดยผู้จัดการจะโหลดวิดีโอปัจจุบันล่วงหน้าเท่านั้นเพื่อให้วิดีโอเริ่มเล่นทันทีที่ผู้ใช้หยุดเลื่อน การมุ่งเน้นที่ "ปัจจุบันเท่านั้น" นี้จะลดร่องรอยของข้อมูลและหน่วยความจำในสภาพแวดล้อมที่ผู้ใช้อาจเห็นโพสต์แบบคงที่จำนวนมากระหว่างวิดีโอ แม้ว่าปัจจุบันระบบจะออกแบบมาให้โหลดวิดีโอที่กำลังรับชมล่วงหน้าเท่านั้น แต่ก็สามารถปรับให้โหลดวิดีโอที่กำลังจะเผยแพร่ (ในอนาคต) ล่วงหน้าได้ด้วย 
  • Instagram Reels: เป็นสภาพแวดล้อมวิดีโอล้วนที่ผู้ใช้ปัดในแนวตั้ง สำหรับ UI นี้ ทีมได้ใช้กลยุทธ์ "การโหลดล่วงหน้าแบบอยู่ติดกัน" PreloadManager จะเก็บวิดีโอถัดไปไว้ในหน่วยความจำทันทีหลังจากที่รีลปัจจุบันพร้อมใช้งาน แนวทางแบบ 2 ทิศทางนี้ช่วยให้มั่นใจได้ว่าไม่ว่าผู้ใช้จะปัดขึ้นหรือลง การเปลี่ยนผ่านจะยังคงเกิดขึ้นทันทีและราบรื่น ผลลัพธ์คือการปรับปรุงคุณภาพของประสบการณ์ (QoE) อย่างมาก ซึ่งรวมถึงการปรับปรุงการเริ่มเล่นและเวลาจนถึงเฟรมแรกสำหรับผู้ใช้

การปรับขนาดสำหรับระบบนิเวศอุปกรณ์ทั่วโลกที่หลากหลาย

การปรับขนาดกองซ้อนวิดีโอที่มีประสิทธิภาพสูงในอุปกรณ์หลายพันล้านเครื่องต้องใช้มากกว่าการโหลดล่วงหน้าแบบรุกราน แต่ต้องใช้ความอัจฉริยะ Meta พบความท้าทายเบื้องต้นเกี่ยวกับแรงกดดันด้านหน่วยความจำและการเลื่อนช้า โดยเฉพาะอย่างยิ่งในฮาร์ดแวร์ระดับกลางถึงระดับล่าง จึงได้สร้างระบบการตรวจหาความเครียดของอุปกรณ์ขึ้นมาโดยอิงจากการใช้งาน Media3 ตอนนี้แอปจะตรวจสอบสัญญาณ I/O และ CPU แบบเรียลไทม์ หากอุปกรณ์ทำงานหนัก ระบบจะหยุดการโหลดล่วงหน้าชั่วคราวเพื่อจัดลำดับความสำคัญของการตอบสนองของ UI

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

mirabelHu.png

การปรับปรุงสถาปัตยกรรมและคุณภาพของโค้ด

นอกเหนือจากเมตริกที่ผู้ใช้เห็นแล้ว การย้ายข้อมูลไปยัง Media3 ยังPreloadManager มอบประโยชน์ด้านสถาปัตยกรรมในระยะยาวอีกด้วย แม้ว่ากระบวนการผสานรวมและการปรับแต่งจะต้องมีการทำซ้ำหลายครั้งเพื่อปรับสมดุลประสิทธิภาพ แต่โค้ดเบสที่ได้นั้นดูแลรักษาง่ายกว่า ทีมพบว่า API PreloadManager ผสานรวมกับระบบนิเวศ Media3 ที่มีอยู่ได้อย่างราบรื่น ทำให้แชร์ทรัพยากรได้ดียิ่งขึ้น สําหรับ Meta การนํา Media3 PreloadManager มาใช้เป็นการลงทุนเชิงกลยุทธ์ในอนาคตของการบริโภควิดีโอ 

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

ผลกระทบที่เกิดขึ้นกับ Instagram และ Facebook

สถาปัตยกรรมเชิงรุกช่วยให้เกิดการปรับปรุงที่วัดผลได้ทันทีในทั้ง 2 แพลตฟอร์ม 

  • Facebook มีการเริ่มเล่นที่เร็วขึ้น อัตราการหยุดเล่นลดลง และเซสชันที่ไม่ดีลดลง (เช่น การบัฟเฟอร์ซ้ำ เวลาเริ่มต้นล่าช้า คุณภาพต่ำลง ฯลฯ) ซึ่งโดยรวมแล้วส่งผลให้เวลาในการรับชมสูงขึ้น 
  • Instagram มีการเล่นที่เร็วขึ้นและเวลาในการรับชมโดยรวมเพิ่มขึ้น การขจัดเวลาในการตอบสนองของการเข้าร่วม (ช่วงเวลาตั้งแต่การกระทำของผู้ใช้จนถึงการแสดงเฟรมแรก) ช่วยเพิ่มเมตริกการมีส่วนร่วมโดยตรง การหยุดชะงักที่น้อยลงเนื่องจากการบัฟเฟอร์ที่ลดลงหมายความว่าผู้ใช้ดูเนื้อหามากขึ้น ซึ่งแสดงให้เห็นผ่านเมตริกการมีส่วนร่วม
beforeAfterPreload.gif

ข้อมูลสำคัญด้านวิศวกรรมในวงกว้าง

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

  • จัดลำดับความสำคัญของการโหลดล่วงหน้าอัจฉริยะ

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

  • ปรับการติดตั้งใช้งานให้สอดคล้องกับรูปแบบ UI

ปรับแต่งลักษณะการทำงานของการโหลดล่วงหน้าตาม UI ของแอป เช่น ใช้โฟกัส "ปัจจุบันเท่านั้น" สำหรับฟีดแบบผสม เช่น Facebook เพื่อประหยัดหน่วยความจำ และใช้กลยุทธ์ "โหลดล่วงหน้าแบบต่อเนื่อง" สำหรับสภาพแวดล้อมแนวตั้ง เช่น Instagram Reels

preloadingStrategy.png
  • ใช้ประโยชน์จาก Media3 เพื่อให้โค้ดมีประสิทธิภาพในระยะยาว

การผสานรวมกับ Media3 API แทนโซลูชันการแคชที่กำหนดเองจะช่วยให้แชร์ทรัพยากรระหว่างเพลเยอร์กับ PreloadManager ได้ดียิ่งขึ้น ซึ่งจะช่วยให้คุณจัดการวิดีโอหลายรายการด้วยอินสแตนซ์เพลเยอร์เดียวได้ ซึ่งส่งผลให้ฐานของโค้ดพร้อมรับมือกับอนาคตและทีมวิศวกรสามารถดูแลรักษาและเพิ่มประสิทธิภาพได้ง่ายขึ้นเมื่อเวลาผ่านไป รวมถึงได้รับสิทธิประโยชน์จากการอัปเดตฟีเจอร์ล่าสุดด้วย

  • ใช้การเพิ่มประสิทธิภาพที่รับรู้ถึงอุปกรณ์

ขยายการเข้าถึงตลาดโดยการทดสอบบนอุปกรณ์ต่างๆ ซึ่งรวมถึงรุ่นระดับกลางถึงระดับล่าง ใช้สัญญาณแบบเรียลไทม์ เช่น CPU, หน่วยความจำ และ I/O เพื่อปรับฟีเจอร์และการใช้ทรัพยากรแบบไดนามิก

ดูข้อมูลเพิ่มเติม

หากต้องการเริ่มต้นใช้งานและดูข้อมูลเพิ่มเติม ให้ไปที่ 

ตอนนี้คุณก็รู้เคล็ดลับในการเล่นทันทีแล้ว ไปลองใช้กันเลย

เขียนโดย

อ่านต่อ