Studi Kasus

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

4 menit membaca
Mayuri Khinvasara Khabya
Developer Relations Engineer

Di 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 dengan lancar bukan hanya fitur, tetapi juga inti dari pengalaman pengguna. Video pendek, khususnya Facebook Newsfeed dan Instagram Reels, telah menjadi pendorong utama interaksi. Video pendek memungkinkan ekspresi kreatif dan konsumsi konten yang cepat, menghubungkan dan menghibur orang-orang di seluruh dunia. 

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

Kesenjangan latensi dalam video pendek

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

Jalan ke depan dengan Media3 PreloadManager

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

Cara Meta mencapai pemutaran instan yang sebenarnya

Kompleksitas yang Ada

Sebelumnya, Meta menggunakan kombinasi pemanasan (untuk menyiapkan pemutar) dan pengambilan data awal (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 pemuatan awal hanya untuk beberapa video. Permintaan resource yang tinggi ini berarti bahwa solusi yang lebih skalabel dan kuat dapat diterapkan untuk menghadirkan pemutaran instan yang diharapkan pada feed sosial modern yang di-scroll dengan cepat.

Mengintegrasikan Media3 PreloadManager

Untuk mencapai pemutaran yang benar-benar instan, tim Media Foundation Client Meta mengintegrasikan Jetpack Media3 PreloadManager ke Facebook dan Instagram. Mereka memilih DefaultPreloadManager untuk menyatukan sistem pemuatan awal dan pemutaran. Integrasi ini memerlukan pemfaktoran ulang 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 pemuatan awal dan mengelola banyak video menggunakan satu instance pemutar. Hal ini secara drastis meningkatkan kapasitas pemuatan awal sekaligus menghilangkan kompleksitas memori yang tinggi dari pendekatan sebelumnya.

colinKho.png

Pengoptimalan dan Penyesuaian Performa

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

Menyesuaikan implementasi dengan pola UI tertentu

Meta menerapkan strategi pemuatan awal yang berbeda dan menyesuaikan perilaku agar sesuai dengan pola UI tertentu dari setiap aplikasi:

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

Penskalaan untuk ekosistem perangkat global yang beragam

Menskalakan stack video berperforma tinggi di miliaran perangkat memerlukan lebih dari sekadar pemuatan awal yang agresif; tetapi juga memerlukan kecerdasan. Meta menghadapi tantangan awal dengan tekanan memori dan jeda scroll, terutama pada hardware kelas menengah ke bawah. Untuk mengatasinya, mereka membuat 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 memperhatikan perangkat ini memastikan bahwa manfaat pemutaran instan tidak mengorbankan stabilitas sistem, sehingga pengguna dengan hardware lama pun dapat menikmati feed yang lebih lancar dan tanpa gangguan.

mirabelHu.png

Keunggulan arsitektur dan kesehatan kode

Selain metrik yang dihadapi 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 PreloadManager API terintegrasi dengan baik dengan ekosistem Media3 yang ada, sehingga memungkinkan berbagi resource yang lebih baik. Bagi Meta, adopsi Media3 PreloadManager adalah investasi strategis dalam masa depan konsumsi video. 

Dengan mengadopsi pemuatan awal dan menambahkan gerbang cerdas perangkat, mereka berhasil meningkatkan total waktu tonton di aplikasi dan meningkatkan interaksi keseluruhan komunitas global mereka. 

Dampak yang dihasilkan pada Instagram dan Facebook

Arsitektur proaktif memberikan peningkatan langsung dan terukur di kedua platform. 

  • Facebook mengalami pemutaran yang lebih cepat, penurunan tingkat pemutaran yang terhenti, dan pengurangan sesi yang 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 interaksi. Lebih sedikit gangguan karena pengurangan buffering berarti pengguna menonton lebih banyak konten, yang terlihat melalui metrik interaksi.
beforeAfterPreload.gif

Pembelajaran teknik utama dalam skala besar

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

  • Memprioritaskan pemuatan awal yang cerdas

Fokuslah untuk menghadirkan pengalaman yang andal dengan meminimalkan jeda dan waktu pemuatan melalui pemuatan awal. Daripada caching disk sederhana, memanfaatkan pemuatan awal tingkat memori memastikan konten siap saat pengguna berinteraksi dengannya.

  • Menyelaraskan implementasi 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 kesehatan kode jangka panjang

Mengintegrasikan dengan Media3 API, bukan solusi caching kustom, memungkinkan berbagi resource yang lebih baik antara pemutar dan PreloadManager, sehingga Anda dapat mengelola beberapa video dengan satu instance pemutar. Hal ini menghasilkan codebase yang tahan lama dan lebih mudah bagi tim teknik untuk tidak hanya mempertahankan dan mengoptimalkan seiring waktu, tetapi juga mendapatkan manfaat dari update fitur terbaru.

  • Menerapkan pengoptimalan yang memperhatikan perangkat

Perluas jangkauan pasar Anda dengan menguji di berbagai perangkat, termasuk model kelas menengah ke 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 terapkan!

Ditulis oleh:

Lanjutkan membaca