Studi Kasus

Instagram dan Facebook menghadirkan pemutaran instan dan meningkatkan engagement pengguna dengan Media3 PreloadManager

Waktu baca: 4 menit

Dalam dunia media sosial yang dinamis, perhatian pengguna dapat diperoleh atau hilang dengan cepat. Aplikasi Meta (Facebook dan Instagram) adalah salah satu platform sosial terbesar di dunia dan melayani miliaran pengguna secara global. Bagi Meta, menghadirkan video secara lancar bukan hanya fitur, tetapi juga inti dari pengalaman pengguna mereka. Video berdurasi singkat, terutama Feed Berita Facebook dan Reel Instagram, telah menjadi pendorong utama engagement. Platform ini memungkinkan ekspresi kreatif dan konsumsi konten yang cepat; menghubungkan dan menghibur orang di seluruh dunia. 

Postingan blog ini akan memandu Anda dalam perjalanan Meta mentransformasi pemutaran video untuk miliaran orang dengan menghadirkan pemutaran instan yang sebenarnya.

Perbedaan latensi dalam video bentuk pendek

Video pendek menghasilkan interaksi yang sangat cepat karena pengguna men-scroll feed mereka dengan cepat. Menyediakan transisi yang lancar antara video dalam feed yang terus berubah menimbulkan hambatan unik untuk pemutaran instan. Oleh karena itu, kita memerlukan solusi yang melampaui strategi pemutaran reaktif standar dan caching disk tradisional.

Jalur ke depan dengan PreloadManager Media3

Untuk mengatasi perubahan kebiasaan konsumsi dari peningkatan konten pendek dan batasan arsitektur pemutaran konten panjang tradisional, Jetpack Media3 memperkenalkan PreloadManager. Komponen ini memungkinkan developer melampaui caching disk, menawarkan kontrol dan penyesuaian terperinci untuk menjaga media tetap siap di memori sebelum pengguna memutar. Baca seri blog ini untuk memahami detail teknis tentang pemutaran media dengan PreloadManager.

Cara Meta mencapai pemutaran instan yang sebenarnya

Kompleksitas yang Ada

Sebelumnya, Meta menggunakan kombinasi pemanasan (untuk menyiapkan pemutar) dan pengambilan data sebelumnya (untuk menyimpan konten dalam cache di disk) untuk pengiriman video. Meskipun metode ini membantu meningkatkan efisiensi jaringan, metode ini menimbulkan tantangan yang signifikan. Pemanasan memerlukan pembuatan beberapa instance pemutar secara berurutan, yang menggunakan memori yang signifikan dan membatasi pra-pemuatan hanya untuk beberapa video. Permintaan resource yang tinggi ini berarti solusi yang lebih skalabel dan andal dapat diterapkan untuk memberikan pemutaran instan yang diharapkan pada feed media sosial modern yang dapat di-scroll cepat.

Mengintegrasikan Media3 PreloadManager

Untuk mencapai pemutaran yang benar-benar instan, tim Media Foundation Client Meta mengintegrasikan PreloadManager Jetpack Media3 ke Facebook dan Instagram. Mereka memilih DefaultPreloadManager untuk menyatukan sistem pramuat dan pemutaran mereka. Integrasi ini memerlukan refaktorisasi arsitektur Meta yang ada untuk memungkinkan berbagi resource yang efisien antara instance PreloadManager dan ExoPlayer. Perubahan strategis ini memberikan keunggulan arsitektur utama: kemampuan untuk memparalelkan tugas pra-pemuatan dan mengelola banyak video menggunakan satu instance pemutar. Hal ini secara drastis meningkatkan kapasitas pemuatan awal sekaligus menghilangkan kompleksitas memori tinggi dari pendekatan sebelumnya.

colinKho.png

Pengoptimalan dan Penyesuaian Performa

Tim kemudian melakukan pengujian dan iterasi ekstensif untuk mengoptimalkan performa di seluruh ekosistem perangkat global Meta yang beragam. Pemuatan awal agresif terkadang menyebabkan masalah, termasuk peningkatan penggunaan memori dan penurunan performa scroll. Untuk menyelesaikannya, mereka menyempurnakan penerapan dengan menggunakan pengukuran memori yang cermat, mempertimbangkan fragmentasi perangkat, dan menyesuaikan sistem dengan pola UI tertentu.

Penerapan penyesuaian pada pola UI tertentu

Meta menerapkan strategi pra-pemuatan yang berbeda dan menyesuaikan perilaku agar sesuai dengan pola UI spesifik setiap aplikasi:

  • Feed Berita Facebook: UI memprioritaskan video yang saat ini terlihat. Pengelola memuat video saat ini saja untuk memastikan video dimulai saat pengguna menjeda penelusuran. Fokus "current-only" ini meminimalkan jejak data dan memori dalam lingkungan tempat pengguna dapat melihat banyak postingan statis di antara video. Meskipun saat ini sistem dirancang untuk memuat video yang terlihat saja, sistem ini dapat disesuaikan untuk memuat video mendatang (di masa mendatang) juga. 
  • Instagram Reels: Ini adalah lingkungan video murni tempat pengguna menggeser secara vertikal. Untuk UI ini, tim menerapkan strategi "pemuatan awal yang berdekatan dengan ". PreloadManager menyimpan video segera setelah Reel saat ini siap di memori. Pendekatan dua arah ini memastikan bahwa baik pengguna menggeser ke atas atau ke bawah, transisi tetap instan dan lancar. Hasilnya adalah peningkatan dramatis dalam Kualitas Pengalaman (QoE), termasuk peningkatan dalam Mulai Pemutaran dan Waktu ke Frame Pertama bagi pengguna.

Menskalakan untuk ekosistem perangkat global yang beragam

Menskalakan stack video berperforma tinggi di miliaran perangkat memerlukan lebih dari sekadar pemuatan awal yang agresif; tetapi memerlukan kecerdasan. Meta menghadapi tantangan awal terkait tekanan memori dan jeda scroll, terutama pada hardware kelas menengah ke bawah. Untuk mengatasinya, mereka membangun sistem Deteksi Tekanan Perangkat di sekitar implementasi Media3. Aplikasi kini memantau sinyal I/O dan CPU secara real-time. Jika perangkat mengalami beban berat, pemuatan awal akan dijeda untuk memprioritaskan responsivitas UI.

Pengoptimalan yang sesuai dengan perangkat ini memastikan bahwa manfaat pemutaran instan tidak mengorbankan stabilitas sistem, sehingga pengguna di hardware yang lebih lama pun dapat menikmati feed yang lebih lancar dan tanpa gangguan.

mirabelHu.png

Keunggulan arsitektur dan kualitas kode

Selain metrik yang terlihat oleh pengguna, migrasi ke Media3 PreloadManager menawarkan manfaat arsitektur jangka panjang. Meskipun proses integrasi dan penyesuaian memerlukan beberapa iterasi untuk menyeimbangkan performa, codebase yang dihasilkan lebih mudah dikelola. Tim menemukan bahwa API PreloadManager terintegrasi dengan baik dengan ekosistem Media3 yang ada, sehingga memungkinkan berbagi resource yang lebih baik. Bagi Meta, penerapan Media3 PreloadManager adalah investasi strategis untuk masa depan konsumsi video. 

Dengan menerapkan pra-pemuatan dan menambahkan gerbang cerdas perangkat, mereka berhasil meningkatkan total waktu tonton di aplikasi dan meningkatkan engagement secara keseluruhan dari komunitas global mereka. 

Dampak yang dihasilkan pada Instagram dan Facebook

Arsitektur proaktif memberikan peningkatan langsung dan terukur di kedua platform. 

  • Facebook mengalami mulai pemutaran yang lebih cepat, penurunan rasio jeda pemutaran, dan pengurangan sesi buruk (seperti buffering ulang, waktu mulai yang tertunda, kualitas yang lebih rendah, dll.) yang secara keseluruhan menghasilkan waktu tonton yang lebih tinggi. 
  • Instagram mengalami pemutaran yang lebih cepat dan peningkatan total waktu tonton. Menghilangkan latensi gabungan (interval dari tindakan pengguna hingga tampilan frame pertama) secara langsung meningkatkan metrik engagement. Lebih sedikit gangguan karena buffering yang berkurang membuat pengguna menonton lebih banyak konten, yang terlihat melalui metrik engagement.
beforeAfterPreload.gif

Pelajaran penting engineering dalam skala besar

Seiring dengan berkembangnya kebiasaan konsumsi media, permintaan akan pengalaman instan akan terus meningkat. Menerapkan pengelolaan memori proaktif dan mengoptimalkan skala serta keragaman perangkat memastikan aplikasi Anda dapat memenuhi ekspektasi ini secara efisien.

  • Memprioritaskan pra-pemuatan cerdas

Fokuslah untuk memberikan pengalaman yang andal dengan meminimalkan jeda dan waktu pemuatan melalui pra-pemuatan. Daripada hanya menggunakan cache disk sederhana, pemanfaatan pra-pemuatan tingkat memori memastikan bahwa konten siap saat pengguna berinteraksi dengannya.

  • Menyelaraskan penerapan Anda dengan pola UI

Sesuaikan perilaku pemuatan awal sesuai dengan UI aplikasi Anda. Misalnya, gunakan fokus "khusus saat ini" untuk feed campuran seperti Facebook guna menghemat memori, dan strategi "pemuatan awal berdekatan" untuk lingkungan vertikal seperti Instagram Reels.

preloadingStrategy.png
  • Memanfaatkan Media3 untuk keandalan kode jangka panjang

Dengan berintegrasi dengan Media3 API, bukan solusi penyimpanan dalam cache kustom, Anda dapat berbagi resource yang lebih baik antara pemutar dan PreloadManager, sehingga Anda dapat mengelola beberapa video dengan satu instance pemutar. Hal ini menghasilkan codebase yang siap untuk masa depan dan lebih mudah bagi tim engineering untuk tidak hanya memelihara dan mengoptimalkan dari waktu ke waktu, tetapi juga mendapatkan manfaat dari update fitur terbaru.

  • Menerapkan pengoptimalan yang kompatibel dengan perangkat

Perluas jangkauan pasar Anda dengan melakukan pengujian di berbagai perangkat, termasuk model kelas menengah hingga bawah. Gunakan sinyal real-time seperti CPU, memori, dan I/O untuk menyesuaikan fitur dan penggunaan resource secara dinamis.

Pelajari Lebih Lanjut

Untuk memulai dan mempelajari lebih lanjut, buka 

Sekarang Anda mengetahui rahasia pemutaran instan. Coba sekarang!

Ditulis oleh:

Lanjutkan membaca