ShareChat risolve i problemi di Jank aumentando lo scorrimento dei feed del 60%
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Introduzione
ShareChat è una piattaforma di social media leader in India che consente agli utenti di condividere le proprie opinioni, documentare la propria vita e fare nuove amicizie nella loro lingua madre. Tra le altre funzioni figurano le chat room e la messaggistica privata che consentono agli utenti di condividere video, barzellette, brani e altri contenuti social basati sulla lingua. Con la missione di guidare la rivoluzione internet dell'India, ShareChat sta cambiando il modo in cui il prossimo miliardo di utenti interagirà su internet.
I numeri dell'app
- Oltre 100 milioni di download
- Oltre 180 milioni di utenti attivi ogni mese
- Oltre 32 milioni creator di contenuti
- 15 lingue indiane diverse
- Circa 1,5 milioni di post creati ogni giorno
La sfida
Poiché ShareChat è cresciuta ogni giorno da migliaia di persone, l'app ha dovuto affrontare una sfida nel fornire costantemente nuovi frame, generando tempi di risposta scadenti che ostacolavano l'esperienza utente.
Di conseguenza, l'app ha registrato un aumento del numero di frame interrotti o in ritardo (noto anche come "Jank"). La risoluzione di questi problemi di jank migliorando i frame lenti e bloccati era fondamentale per offrire un'esperienza senza interruzioni a tutti gli utenti. Ciò svolgerebbe un ruolo importante anche nel far trascorrere più tempo gli utenti sull'app, aumentando il coinvolgimento e, a sua volta, migliorando la valutazione di ShareChat sul Play Store Android.
Come c'è riuscita
ShareChat ha collaborato con il team addetto alle relazioni con gli sviluppatori di Google per ridurre Jank e avere un impatto positivo sull'attività migliorando i frame lenti e bloccati (Jank) nell'app. In particolare, ha lavorato per migliorare i seguenti problemi:
Pool RecyclerView condiviso: tramite la profilazione, è stato osservato che la creazione di diversi visualizzatori richiede più tempo e, per ridurne al minimo, è stato creato un pool di RecyclerView condiviso. Ciò ha contribuito anche a rimuovere il costo di creazione dei visualizzatori per feed simili.
Passesl di layout eccessivo: tramite la profilazione, è stato anche osservato che alcuni visualizzatori richiedevano ulteriori requestLayouts. Per ottimizzare, il codice è stato aggiornato in modo da utilizzare il valore in tempo di creazione anziché in ogni associazione, risparmiando così costi aggiuntivi requestLayout.
OverDraw: ha semplificato i layout per ridurre la sovrapposizione di livelli e la rimozione dei colori impostati separatamente per ciascuno dei livelli.
Appiattimento della gerarchia. È stato osservato un prolungato aumento cumulativo attraverso la profilazione e l'ispezione manuale di molti schermi. La gerarchia è stata suddivisa utilizzando ConstraintLayout per risolvere questo problema.
Inflazione eccessiva delle visualizzazioni: è stato identificato un lungo periodo di inflazione per alcune visualizzazioni durante la profilazione. Queste visualizzazioni sono state convertite in visualizzazioni.
Rimozione di attività pesanti dal thread dell'interfaccia utente: l'utilizzo di un profiler ha consentito l'osservazione di un paio di luoghi in cui venivano eseguite attività pesanti nel thread principale, come la creazione di SpannableStringBuilder con il tagging e lo stile di ogni bind recyclerView, la decodifica BluHash e così via. Queste attività sono state rimosse dal thread dell'interfaccia utente e spostate in un thread in background.
Migrazione da Rx a Coroutine. Il consumo di memoria ha anche portato a chiamate GC frequenti e un numero molto elevato di thread tramite il thread > 100 RX. Molti casi d'uso sono stati spostati su Coroutine per risolvere questi problemi.
Adozione della bobina per il caricamento delle immagini: glide causava problemi durante il caricamento delle immagini, in particolare nei componenti creati tramite jetpack Compose. È stato inoltre rilevato che durante il caricamento delle immagini in LazyColumn, la barra della soglia di rendering era alta. Queste occorrenze hanno portato all'adozione della bobina per il caricamento delle immagini.
Pulizia e refactoring del vecchio codice: la rimozione del vecchio codice e degli esperimenti ha contribuito a rimuovere dall'interfaccia utente le visualizzazioni nascoste non necessarie e a riscrivere meglio alcune schermate.
Risultati
Analizzando le aree di miglioramento e identificando le strategie di ottimizzazione, ShareChat potrebbe migliorare l'esperienza complessiva per gli utenti aumentando al contempo il tasso di coinvolgimento e le valutazioni del Play Store. Di seguito è riportata una panoramica quantitativa dei risultati ottenuti da ShareChat -
- ~45% di riduzione dei frame "rendering lento" sul Play Store
- ~30% di riduzione dei fotogrammi "Frozen" sul Play Store
- Le frequenze fotogrammi deboli per ogni 10.000 frame sono state ridotte dal 10,72% al 3,98%.
- Scorrimento del feed aumentato del 60%
- Le valutazioni complessive sullo Store sono aumentate da ~4,0 a 4,3
- Il 10% di aumento della fruizione dei post
"Noi di ShareChat puntiamo a essere la migliore app di social media in circolazione che piaccia agli utenti.Questo significa anche essere la migliore in termini di prestazioni dell'app.
La collaborazione con il team Developer Relazioni con gli sviluppatori di Google ci ha aiutato a identificare
gli aree di miglioramento sui nostri dispositivi di fascia bassa più utilizzati. Abbiamo imparato le best practice e gli strumenti in termini di prestazioni per identificare e correggere frame bloccati, jank, overdraw e ANR."
– Vihaan Verma, Engineering Manager, team Android presso ShareChat
I campioni di contenuti e codice in questa pagina sono soggetti alle licenze descritte nella Licenza per i contenuti. Java e OpenJDK sono marchi o marchi registrati di Oracle e/o delle sue società consociate.
Ultimo aggiornamento 2025-07-27 UTC.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2025-07-27 UTC."],[],[],null,["# ShareChat addresses Jank issues to increase feed scrolling by 60%\n\nIntroduction\n------------\n\nShareChat is a leading social media platform in India that allows users to share their opinions, document their lives, and make new friends in their native language. Other features include chatrooms, and private messaging, enabling users to share videos, jokes, songs and other language-based social content. On a mission to spearhead India's internet revolution, ShareChat is changing how the next billion users will interact on the internet.\n\nThe app in numbers\n\n- **100 Million+** downloads\n- **180 Million+** Monthly Active Users\n- **32 Million+** content creators\n- **15** different Indian languages\n- **\\~1.5** Million posts created daily\n\nThe Challenge\n-------------\n\nAs ShareChat grew to be loved by thousands of people daily, the app faced a challenge in consistently delivering new frames leading to poor response times that impeded user experience.\n\nAs a result, the app saw an increased number of dropped or delayed frames (also known as \"Jank\"). Fixing these jank issues by improving slow \\& frozen frames was critical in delivering a seamless experience to all its users. This would also play an important role in making users spend more time on the app, increasing engagement and, in turn, improving ShareChat's rating on the Android Play Store.\n\nHow They Did It\n---------------\n\nShareChat worked with Google's developer relations team to reduce Jank and yield a positive business impact by improving slow \\& frozen frames (Jank) on the app. Specifically they worked on improving the following issues -\n\n- **Shared RecyclerView Pool** - Through profiling, it was observed that creating different viewholders takes longer and to minimize that, a Shared RecyclerView Pool was created. This also helped in removing the viewholders creational cost for similar feeds.\n\n- **Excessive Layout Passesl** - Through [profiling](https://perfetto.dev/), it was also observed that some viewholders were requesting additional requestLayouts. To optimize, the code was updated to take value in creation time instead of every bind, thus saving extra requestLayout costs.\n\n- **[OverDraw](https://developer.android.com/topic/performance/rendering/inspect-gpu-rendering)** - Simplified the layouts to reduce layering and removing colors that were being set separately for each of the layers.\n\n- **Flattening of hierarchy** - Observed long inflation through profiling and manual inspection of many screens. The hierarchy was flattened using [ConstraintLayout](https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout) to solve for this.\n\n- **Excessive View Inflation** - Identified long inflation time for certain views while profiling. These views were converted to viewstubs.\n\n- **Removing heavy tasks from UI thread** - Using a profiler allowed for observation of a couple of places where heavy tasks were being done on the main thread, such as creating SpannableStringBuilder with tagging and styling of every recyclerView bind, BlurHash decoding, etc. These tasks were removed from the UI thread and moved to a background thread.\n\n- **Migrating from Rx to [Coroutine](https://developer.android.com/kotlin/coroutines#:%7E:text=A%20coroutine%20is%20a%20concurrency,established%20concepts%20from%20other%20languages)** - Memory consumption also led to frequent GC calls, and there were very high thread counts via the \\\u003e100 RX thread. Many of the use cases were moved to Coroutine to fix these issues.\n\n- **Adoption of [Coil](https://coil-kt.github.io/coil/) for image loading** - Glide was causing issues while loading images, specifically in the components built via jetpack compose. It was also identified that while loading images in LazyColumn, the rendering threshold bar was high. These occurrences led to the adoption of Coil for image loading.\n\n- **Old code cleanup and refactoring** - Removal of old code and experiments helped to remove unnecessary hidden views from the UI and helped rewrite some of the screens in a better way.\n\nResults\n-------\n\nBy analyzing improvement areas and identifying optimization strategies, ShareChat could improve the overall experience for users while increasing its engagement rate and Play Store ratings. Below is the quantitative overview of the results ShareChat achieved -\n\n- \\~45% reduction in 'Slow rendered' frames on Play Store\n- \\~30% reduction in 'Frozen' frames on Play Store\n- Janky frame rates for every 10K frames rendered reduced from 10.72% to 3.98%\n- Feed-scrolling increased by 60%\n- The overall ratings on the Store increased from \\~4.0 to 4.3\n- 10% increase in consumption of posts\n\n\u003e \"At ShareChat, our goal is to be the best social media app out there that\n\u003e delights our users.This also means being the best in terms of app performance.\n\u003e Our collaboration with Google's developer relations team helped us identify\n\u003e areas of improvement on our most used low-end user devices. We learned the best\n\u003e performance practices and tools to identify and fix frozen frames, janks,\n\u003e overdraws, and ANRs.\"\n\u003e\n\u003e **-- Vihaan Verma, Engineering Manager, Android Team at ShareChat**"]]
