Case study sulle prestazioni delle app Web progressive di Tinder

March 22, 2022 Off By Virgil Olson

Case study sulle prestazioni delle <a href="https://hookupdate.net/it/match-com-review/">recensioni Match.com</a> app Web progressive di Tinder

Tinder utilizzava una serie di librerie open source (vendor) maniera porzione del loro antenna delle dipendenze. Le modifiche a queste librerie originariamente avrebbero arrecato la modifica di [chunkhash] e l’invalidazione della loro cache. Verso risolvere presente problema, Tinder ha iniziato an indicare una whitelist di dipendenze esterne e a ripartire il manifest del insieme web dal blocco capitale per perfezionare la immagazzinamento nella cache. La dimensione del bundle e ora di approssimativamente 160 KB durante entrambi i blocchi.

Precaricamento delle risorse scoperte per rinvio

Tinder ha implementato il appoggio a causa di precaricare i bundle JavaScript / webpack critici che erano importanti verso l’esperienza di supporto. Corrente ha adunanza il epoca di carica di 1 aiutante e la prima verniciatura da 1000 ms an approssimativamente 500 ms.

Stanziamento delle prestazioni

Tinder ha utilizzato somma durante il interesse per aiutarli a conquistare i loro obiettivi di rendimento sui dispositivi mobili. Modo ha notato Alex Russell in ” Te lo puoi permettere ?: bilancio durante le prestazioni del mondo concreto “, hai un estremita di movimento imperfetto attraverso proporre un’esperienza mentre si considerano le connessioni 3G obbiettivo utilizzate verso hardware suppellettile medio.

Verso ottenere e durare interattivi celermente, Tinder ha battezzato un bilancio di

155 KB attraverso i blocchi principali e del commerciante, i blocchi asincroni (caricati pigramente) sono

55 KB e prossimo blocchi sono

35 KB. CSS ha un demarcazione di 20 KB. Questo e condizione essenziale attraverso garantire cosicche fossero sopra gradimento di sottrarsi il regresso delle prestazioni.

Esame del pacchetto Webpack

Webpack Bundle Analyzer ti consente di mostrare mezzo appare il diagramma delle dipendenze verso i tuoi bundle JavaScript in sistema da poter mostrare qualora ci sono frutti bassi da razionalizzare.

Tinder ha impiegato Webpack Bundle Analyzer attraverso trovare aree di incremento:

  • Polyfills: Tinder si rivolge ai browser moderni insieme la loro esperienza, bensi supporta ancora IE11 e Android 4.4 e versioni successive. In sostentare polyfill e etichetta transpilato al minuscolo, usano For polyfills, usanobabel-preset-envecore-js.
  • Uso piusnellodelle librerie: Tinder ha sostituito localForage mediante l’uso aperto di IndexedDB.
  • Migliore spartizione: separa i componenti dai pacchetti principali affinche non erano necessari attraverso la avanti arte / interattiva
  • Riutilizzo del combinazione: sono stati creati blocchi comuni asincroni per blocchi astratti utilizzati oltre a di tre volte dai figli.
  • CSS: Tinder ha e rimosso i CSS critici dai loro bundle principali (dopo che erano passati al rendering aspetto server e fornivano comunque corrente CSS)
  • Webpack Bundle Analyzer puo avere luogo inserito nella sembianza di Webpack. La sembianza di Tinder e somigliante a questa:

    Strategia CSS

    Tinder utilizza Atomic CSS attraverso fare stili CSS altamente riutilizzabili. Tutti questi stili CSS atomici sono inline nella vernice iniziale e ritaglio del rudere del CSS viene addossato nel modulo di taglio (inclusi gli stili di vivacita ovverosia di basamento / ripristino). Gli stili critici hanno una peso aforisma di 20 KB per mezzo di pressatura gzip, insieme build recenti in quanto arrivano a una dimensione

    Tinder Online utilizza di nuovo il plug- sopra PostCSS Autoprefixer attraverso approfondire CSS e attaccare prefissi del piazzista durante supporto alle regole di Posso servirsi :

    Rinviare il faccenda non arduo unitamente requestIdleCallback ()

    Per progredire le prestazioni di runtime, Tinder ha eletto di impiegare requestIdleCallback () per rimandare le azioni non critiche mediante tempo di inattivita.

    Uso di requestIdleCallback () per i beacon di attrezzatura durante lo scorrimento:

    Aggiornamenti delle dipendenze

    Webpack 3 + Scope Hoisting

    Nelle versioni precedenti di webpack, all’epoca di il concentrazione di ogni modulo nel blocco sarebbe ceto inserito durante singole chiusure di funzioni. Queste funzioni wrapper hanno reso con l’aggiunta di lenta l’esecuzione di JavaScript nel browser. Webpack 3 ha inserito il “tumulto dell’ambito”: la idoneita di collegare l’ambito di tutti i moduli mediante un’unica barriera e accogliere al combinazione di sentire un tempo di attuazione oltre a rapido nel browser. Lo fa con il plugin Module Concatenation:

    Reagisci 16

    React 16 ha pratico miglioramenti affinche hanno adunanza la misura del involto di React rispetto alle versioni precedenti. Cio e stato in pezzo richiesto a un miglior packaging (utilizzando Rollup) e alla destituzione del codice occasione inutilizzato.

    Aggiornando da React 15 a React 16, Tinder ha adunanza le dimensioni totali mediante gzip del loro masso del negoziante del

    La grandezza di React + React – Dom era di

    50 KB mediante appiattimento gzip e attualmente e solo di

    35 KB . Gratitudine a Dan Abramov , Dominic Gannaway e Nate Hunzaker perche sono stati determinanti nel accorciare le dimensioni del bundle di React 16.

    Suddivisione di faccenda in la resilienza della tranello e la memorizzazione nella cache degli asset offline

    Tinder utilizza anche il plug -in Workbox Webpack per imparare nella cache come la shell dell’applicazione giacche le risorse statiche principali modo i bundle principali, del piazzista, manifest e CSS. Cio consente la resilienza della insidia durante le visite ripetute e garantisce cosicche l’applicazione si avvii piuttosto velocemente quando un fruitore torna in le visite successive.

    Utilita

    Scavando nei bundle di Tinder utilizzando source-map-explorer (un estraneo arnese di disamina dei bundle), ci sono ulteriori utilita a causa di concentrare le dimensioni del payload. Prima di accedere, vengono recuperati componenti maniera fotografia di Facebook, notifiche, messaggi e captcha. Allontanarli dal cammino pericoloso potrebbe far accumulare scaltro al 20% sul fagotto principale:

    Un’altra sottomissione nel viaggio studioso e unito script Facebook SDK da 200 KB. L’eliminazione di questo script (affinche potrebbe succedere caricato svogliatamente in quale momento essenziale) potrebbe abbassare di 1 seguente il periodo di carica iniziale.

    Conclusioni

    Tinder sta al momento iterando sulla sua Progressive Web App, ciononostante ha proprio seguace a trovare risultati positivi dai frutti del conveniente attivita. Dai un’occhiata a Tinder.com e resta sintonizzato verso ulteriori progressi nel adiacente futuro!

    Ringraziamenti e congratulazioni a Roderick Hsiao, Jordan Banafsheha ed Erik Hellenbrand durante il getto di Tinder Online e il loro tributo an attuale scritto. Ringraziamenti a Cheney Tsai a causa di la sua giudizio.