Dans le monde dynamique des réseaux sociaux, l'attention des utilisateurs se gagne ou se perd rapidement. Les applications Meta (Facebook et Instagram) figurent parmi les plus grandes plates-formes sociales au monde et sont utilisées par des milliards d'utilisateurs dans le monde entier. Pour Meta, la diffusion fluide de vidéos n'est pas qu'une fonctionnalité, c'est le cœur de son expérience utilisateur. Les vidéos courtes, en particulier celles du flux d'actualités Facebook et des Reels Instagram, sont devenues un moteur d'engagement majeur. Elles permettent l'expression créative et la consommation rapide de contenus, et rapprochent et divertissent les utilisateurs du monde entier. 

Cet article de blog explique comment Meta a transformé la lecture de vidéos pour des milliards d'utilisateurs en offrant une lecture instantanée.

Latence dans les vidéos courtes

Les vidéos courtes entraînent des interactions très rapides, car les utilisateurs font défiler rapidement leurs flux. Assurer une transition fluide entre les vidéos dans un flux en constante évolution pose des défis uniques pour la lecture instantanée. Nous avons donc besoin de solutions qui vont au-delà de la mise en cache sur disque traditionnelle et des stratégies de lecture réactive standards.

L'avenir de Media3 PreloadManager

Pour répondre à l'évolution des habitudes de consommation, à la popularité croissante des contenus courts et aux limites de l'architecture de lecture des contenus longs traditionnels, Jetpack Media3 a introduit PreloadManager. Ce composant permet aux développeurs d'aller au-delà de la mise en cache sur disque, en offrant un contrôle précis et une personnalisation pour que les contenus multimédias soient prêts en mémoire avant que l'utilisateur n'appuie sur le bouton de lecture. Consultez cette série d'articles de blog pour en savoir plus sur la lecture de contenus multimédias avec PreloadManager.

Comment Meta a réussi à obtenir une lecture instantanée

Complexités existantes

Auparavant, Meta utilisait une combinaison de préchauffage (pour préparer les lecteurs) et de préchargement (pour mettre en cache le contenu sur le disque) pour la diffusion de vidéos. Bien que ces méthodes aient contribué à améliorer l'efficacité du réseau, elles ont introduit des difficultés importantes. L'échauffement nécessitait d'instancier plusieurs instances de lecteur de manière séquentielle, ce qui consommait beaucoup de mémoire et limitait le préchargement à quelques vidéos seulement. Cette forte demande de ressources signifiait qu'une solution robuste et plus évolutive pouvait être appliquée pour offrir la lecture instantanée attendue sur les flux sociaux modernes à défilement rapide.

Intégrer Media3 PreloadManager

Pour obtenir une lecture véritablement instantanée, l'équipe Media Foundation Client de Meta a intégré le PreloadManager Jetpack Media3 à Facebook et Instagram. Ils ont choisi DefaultPreloadManager pour unifier leurs systèmes de préchargement et de lecture. Cette intégration a nécessité de refactoriser l'architecture existante de Meta pour permettre un partage efficace des ressources entre les instances PreloadManager et ExoPlayer. Ce changement stratégique a permis de bénéficier d'un avantage architectural clé : la possibilité de paralléliser les tâches de préchargement et de gérer de nombreuses vidéos à l'aide d'une seule instance de lecteur. Cela a considérablement augmenté la capacité de préchargement tout en éliminant les complexités liées à la mémoire élevée de leur approche précédente.

Optimisation et réglage des performances

L'équipe a ensuite effectué des tests et des itérations approfondis pour optimiser les performances dans l'écosystème d'appareils diversifié de Meta à l'échelle mondiale. Le préchargement agressif initial entraînait parfois des problèmes, y compris une utilisation accrue de la mémoire et un ralentissement des performances de défilement. Pour résoudre ce problème, ils ont affiné l'implémentation en utilisant des mesures de mémoire précises, en tenant compte de la fragmentation des appareils et en adaptant le système à des modèles d'UI spécifiques.

Affinage de l'implémentation pour des modèles d'UI spécifiques

Meta a appliqué différentes stratégies de préchargement et adapté le comportement pour qu'il corresponde aux modèles d'UI spécifiques de chaque application :

• Fil d'actualités Facebook : l'UI donne la priorité à la vidéo qui apparaît actuellement à l'écran. Le gestionnaire précharge uniquement la vidéo actuelle pour s'assurer qu'elle démarre dès que l'utilisateur met en pause son défilement. Cette approche "actuelle uniquement" minimise l'empreinte des données et de la mémoire dans un environnement où les utilisateurs peuvent voir de nombreux posts statiques entre les vidéos. Bien que le système soit actuellement conçu pour précharger uniquement la vidéo en cours de lecture, il peut être ajusté pour précharger également les vidéos à venir. 
• Reels Instagram : environnement vidéo pur dans lequel les utilisateurs font glisser l'écran verticalement. Pour cette UI, l'équipe a implémenté une stratégie de préchargement adjacent. Le PreloadManager conserve les vidéos immédiatement après le Reel actuel en mémoire. Cette approche bidirectionnelle garantit que la transition reste instantanée et fluide, que l'utilisateur balaye l'écran vers le haut ou vers le bas. L'expérience utilisateur a été considérablement améliorée, y compris en termes de temps de démarrage de la lecture et de temps avant le premier affichage.

Mise à l'échelle pour un écosystème d'appareils mondial diversifié

Pour mettre à l'échelle une pile vidéo hautes performances sur des milliards d'appareils, il faut plus qu'un préchargement agressif : il faut de l'intelligence. Meta a rencontré des difficultés initiales liées à la saturation de la mémoire et au décalage du défilement, en particulier sur les appareils de milieu et d'entrée de gamme. Pour résoudre ce problème, ils ont créé un système de détection du stress de l'appareil autour de l'implémentation Media3. Les applications surveillent désormais les signaux d'E/S et de processeur en temps réel. Si un appareil est fortement sollicité, le préchargement est suspendu pour donner la priorité à la réactivité de l'UI.

Cette optimisation adaptée aux appareils garantit que l'avantage de la lecture instantanée ne se fait pas au détriment de la stabilité du système, ce qui permet même aux utilisateurs disposant d'un matériel plus ancien de bénéficier d'un flux plus fluide et ininterrompu.

Avantages architecturaux et intégrité du code

Au-delà des métriques visibles par les utilisateurs, la migration vers Media3 PreloadManager a sans frais des avantages architecturaux à long terme. Bien que le processus d'intégration et d'optimisation ait nécessité plusieurs itérations pour équilibrer les performances, le codebase obtenu est plus facile à gérer. L'équipe a constaté que l'API PreloadManager s'intégrait parfaitement à l'écosystème Media3 existant, ce qui permettait un meilleur partage des ressources. Pour Meta, l'adoption de Media3 PreloadManager était un investissement stratégique dans l'avenir de la consommation de vidéos. 

En adoptant le préchargement et en ajoutant des portes d'accès intelligentes, ils ont réussi à augmenter le temps de visionnage total sur leurs applications et à améliorer l'engagement global de leur communauté mondiale. 

Impact sur Instagram et Facebook

L'architecture proactive a permis d'améliorer immédiatement et de manière mesurable les performances sur les deux plates-formes. 

• Facebook a constaté une accélération du démarrage de la lecture, une diminution du taux d'arrêt de la lecture et une réduction du nombre de mauvaises sessions (comme la remise en mémoire tampon, le temps de démarrage différé, la qualité inférieure, etc.), ce qui a entraîné une augmentation globale du temps de visionnage. 
• Instagram a constaté un démarrage de lecture plus rapide et une augmentation de la durée de visionnage totale. L'élimination de la latence de connexion (l'intervalle entre l'action de l'utilisateur et l'affichage du premier frame) a directement augmenté les métriques d'engagement. Les interruptions moins fréquentes dues à la réduction de la mise en mémoire tampon ont permis aux utilisateurs de regarder plus de contenus, ce qui s'est reflété dans les métriques d'engagement.

Principaux enseignements d'ingénierie à grande échelle

À mesure que les habitudes de consommation des médias évoluent, la demande d'expériences instantanées continuera de croître. L'implémentation d'une gestion proactive de la mémoire et l'optimisation pour l'évolutivité et la diversité des appareils permettent à votre application de répondre efficacement à ces attentes.

• Prioriser le préchargement intelligent

Concentrez-vous sur la fiabilité de l'expérience en minimisant les saccades et les temps de chargement grâce au préchargement. Au lieu d'un simple cache disque, le préchargement au niveau de la mémoire garantit que le contenu est prêt au moment où un utilisateur interagit avec lui.

• Aligner votre implémentation sur les modèles d'UI

Personnalisez le comportement de préchargement en fonction de l'UI de vos applications. Par exemple, utilisez une stratégie "actuel uniquement" pour les flux mixtes comme Facebook afin d'économiser de la mémoire, et une stratégie de "préchargement adjacent" pour les environnements verticaux comme Instagram Reels.

• Exploiter Media3 pour assurer la pérennité du code

L'intégration aux API Media3 plutôt qu'à une solution de mise en cache personnalisée permet un meilleur partage des ressources entre le lecteur et PreloadManager. Vous pouvez ainsi gérer plusieurs vidéos avec une seule instance de lecteur. Cela permet d'obtenir un codebase pérenne, que les équipes d'ingénierie peuvent plus facilement gérer et optimiser au fil du temps, et qui leur permet de bénéficier des dernières mises à jour des fonctionnalités.

• Implémenter des optimisations adaptées aux appareils

Élargissez votre couverture du marché en effectuant des tests sur différents appareils, y compris des modèles de milieu et d'entrée de gamme. Utilisez des signaux en temps réel tels que le processeur, la mémoire et les E/S pour adapter dynamiquement les fonctionnalités et l'utilisation des ressources.

En savoir plus

Pour commencer et en savoir plus, accédez à  .

• Consultez la documentation Media3 PreloadManager.
• Pour en savoir plus sur les aspects techniques et l'implémentation, consultez la série d'articles de blog.
  • Partie 1 : Présentation du préchargement avec Media3
  • Partie 2 : Présentation détaillée de PreloadManager de Media3
• Consultez l'exemple d'application pour voir le préchargement en action.

Vous connaissez maintenant les secrets pour une lecture instantanée. Essayez-les !