Introduction
ShareChat est une plate-forme de réseaux sociaux de premier plan en Inde. Elle permet aux utilisateurs de partager leurs opinions, de documenter leur vie et de se faire de nouveaux amis dans leur langue maternelle. Il propose également des salons de discussion et une messagerie privée, permettant aux utilisateurs de partager des vidéos, des blagues, des chansons et d'autres contenus sociaux basés sur le langage. ShareChat a pour mission de mener la révolution Internet en Inde. L'entreprise change la façon dont le prochain milliard d'utilisateurs interagit sur Internet.
L'application en chiffres
- Plus de 100 millions de téléchargements
- Plus de 180 millions d'utilisateurs actifs par mois
- Plus de 32 millions de créateurs de contenu
- 15 langues indiennes différentes
- Environ 1,5 million de posts créés chaque jour
Le défi
Alors que ShareChat gagnait en popularité auprès de milliers de personnes chaque jour, l'application rencontrait des difficultés à fournir de nouveaux frames de manière cohérente, ce qui entraînait des temps de réponse médiocres qui nuisaient à l'expérience utilisateur.
Par conséquent, l'application a enregistré un nombre accru d'images abandonnées ou retardées (également appelées "janks"). Il était essentiel de résoudre ces problèmes de janks en améliorant les images lentes et figées pour offrir une expérience fluide à tous les utilisateurs. Cela jouerait également un rôle important pour inciter les utilisateurs à passer plus de temps sur l'application, à augmenter l'engagement et, par conséquent, à améliorer la note de ShareChat sur le Google Play Store.
Mode opératoire
ShareChat a collaboré avec l'équipe chargée des relations avec les développeurs de Google pour réduire les à-coups et générer un impact positif sur l'activité en améliorant les frames lents et figés (à-coups) dans l'application. Plus précisément, l'entreprise s'est efforcée de résoudre les problèmes suivants :
Pool RecyclerView partagé : le profilage a montré que la création de différents ViewHolders prend plus de temps. Pour minimiser ce temps, un pool RecyclerView partagé a été créé. Cela a également permis de supprimer le coût de création des porte-vues pour les flux similaires.
Passages de mise en page excessifs : grâce au profilage, nous avons également constaté que certains ViewHolders demandaient des requestLayout supplémentaires. Pour optimiser le code, il a été mis à jour afin de prendre en compte la valeur au moment de la création au lieu de chaque liaison, ce qui permet d'économiser des coûts de requestLayout supplémentaires.
OverDraw : les mises en page ont été simplifiées pour réduire la superposition et supprimer les couleurs qui étaient définies séparément pour chacune des couches.
Aplatissement de la hiérarchie : longue inflation observée lors du profilage et de l'inspection manuelle de nombreux écrans. Pour résoudre ce problème, la hiérarchie a été aplatie à l'aide de ConstraintLayout.
Gonflage excessif des vues : une longue durée de gonflage a été identifiée pour certaines vues lors du profilage. Ces vues ont été converties en emplacements réservés.
Suppression des tâches lourdes du thread UI : l'utilisation d'un profileur a permis d'identifier plusieurs endroits où des tâches lourdes étaient effectuées sur le thread principal, comme la création de SpannableStringBuilder avec le taggage et le style de chaque liaison recyclerView, le décodage BlurHash, etc. Ces tâches ont été supprimées du thread UI et déplacées vers un thread d'arrière-plan.
Migrer de Rx vers Coroutine : la consommation de mémoire a également entraîné de fréquents appels GC, et le nombre de threads était très élevé (plus de 100 threads RX). Pour résoudre ces problèmes, de nombreux cas d'utilisation ont été déplacés vers Coroutine.
Adoption de Coil pour le chargement d'images : Glide causait des problèmes lors du chargement d'images, en particulier dans les composants créés avec Jetpack Compose. Il a également été constaté que la barre de seuil de rendu était élevée lors du chargement d'images dans LazyColumn. Ces occurrences ont conduit à l'adoption de Coil pour le chargement des images.
Nettoyage et refactorisation de l'ancien code : la suppression de l'ancien code et des anciens tests a permis de supprimer les vues masquées inutiles de l'UI et de réécrire certaines pages de manière plus efficace.
Résultats
En analysant les points à améliorer et en identifiant des stratégies d'optimisation, ShareChat a pu améliorer l'expérience globale des utilisateurs, tout en augmentant son taux d'engagement et ses notes sur le Play Store. Vous trouverez ci-dessous un aperçu quantitatif des résultats obtenus par ShareChat :
- Réduction d'environ 45 % des frames "Rendu lent" sur le Play Store
- Réduction d'environ 30 % des images figées sur le Play Store
- La fréquence d'images saccadée pour 10 000 images rendues est passée de 10,72 % à 3,98 %.
- Le défilement du flux a augmenté de 60 %
- Les notes globales sur le Store sont passées d'environ 4,0 à 4,3.
- Augmentation de 10 % de la consommation de posts
"Chez ShareChat, notre objectif est de devenir la meilleure application de réseau social qui soit, pour le plus grand plaisir de nos utilisateurs.Cela signifie également être la meilleure en termes de performances de l'application. Notre collaboration avec l'équipe Google chargée des relations avec les développeurs nous a aidés à identifier les points à améliorer sur nos appareils bas de gamme les plus utilisés. Nous avons appris les meilleures pratiques et les meilleurs outils pour identifier et corriger les images figées, les saccades, les surtirages et les ANR."
– Vihaan Verma, responsable de l'ingénierie, équipe Android chez ShareChat