กรณีศึกษา

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

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

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

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

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

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

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

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

วิธีที่ Meta บรรลุการเล่นทันทีอย่างแท้จริง

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

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

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

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

colinKho.png

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

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

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

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

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

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

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

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

mirabelHu.png

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

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

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

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

ตอนนี้คุณก็รู้เคล็ดลับสำหรับการเล่นทันทีแล้ว ลองเลย

เขียนโดย

อ่านต่อ