Le performance delle Web Application sono un argomento spesso sottovalutato nonostante il fatto che abbiano un impatto rilevante su aspetti strategici come i tassi di conversione, il ranking dei motori di ricerca e le visite. Scopriamo alcune statistiche che rendono evidente l’importanza di migliorare le performance delle applicazioni.
Gli insights delle ricerche
Secondo una ricerca di Google più del 53% degli utenti mobile abbandonano un sito se impiega più di 3 secondi a caricarsi e più della metà delle pagine testate “pesava” più di 2MB, quindi con una cattiva User Experience(UX).
Riducendo il tempo di caricamento del 40%, Pinterest è riuscita ad ottenere un +15% del traffico da motori di ricerca ed in nuove registrazioni. Walmart ha ottenuto risultati simili, in pratica per ogni secondo di riduzione del tempo di caricamento ha aumentato il tasso di conversione del 2%.
Investire nelle performance si traduce nell’avere maggiori possibilità di far crescere il tuo business ed i tuoi profitti.
Contattaci subito e senza impegno per migliorare le performance della tua applicazione.
I 5 TODO per migliorare le performance
La maggioranza delle Web Application è realizzata sfruttando framework evoluti come Vue.Js, React e Angular che, seppur semplificando molte funzionalità, aggiungono overhead e complessità applicative. Quelle che seguono sono delle soluzioni cross framework che puoi utilizzare per qualsiasi applicazione. Scopriamole.
Compressione delle immagini
La compressione delle immagini è un must have; ci sono numerosi tool online ed è possibile integrare librerie specifiche all’interno della tua applicazione riuscendo ad ottenere anche compressioni delle dimensioni del 60%. La compressione delle immagini è cruciale soprattutto quando a caricare le immagini sono i tuoi utenti. Garantire qualità e compressione delle immagini è possibile attraverso opportuni accorgimenti avanzati.
Analizzare il costo delle dipendenze applicative
Le Web Application hanno numerose dipendenze, come librerie, script, plugin, ecc…. Anche una semplice libreria per la costruzione di un carosello di immagini potrebbe inficiare fortemente le performance della tua applicazione. Esistono strumenti come Bundlephobia che ti permettono di cercare librerie a basso impatto e di caricare il tuo file package.json per verificare le dimensioni delle tue dipendenze. Su github è inoltre disponibile un progetto per ottimizzare le librerie esistenti.
Minimizzazione del codice sorgente
La minimizzazione del codice sorgente è un aspetto molto semplice se stai usando webpack; in questo caso è sufficiente impostare il flag mode a production per far sì che venga utilizzata la libreria UglifyJS per minimizzare il codice. La minimizzazione del codice è oramai qualcosa di nativamente supportato da molti framework e gestori di pacchetti ma una verifica ti permette di trovare areee di miglioramento( variabili di sviluppo, librerie che non vengono minimizzate, ecc…).
Applicare il Lazy Loading alle componenti
Il concetto di Lazy Loading è semplice: ogni cosa che non è strettamente necessaria per il rendering iniziale dell’applicazione può essere caricata successivamente. Il Lazy Loading, per quanto di semplice implementazione, va analizzato mettendo in campo la User Experience(UX) che si vuole ottenere perchè caricare successivamente una componente vuol dire far attendere il tuo utente. Per risolvere questo problema viene in aiuto lo strumento del prefetching cioè caricare le componenti prima che queste siano effettivamente necessarie ( ma dopo l’iniziale rendering).
Il Lazy Loading può essere applicato praticamente a qualsiasi aspetto della tua applicazione come:
- le rotte permettendo di evitare di inondare il server di richieste;
- i moduli;
- plugin e librerie.
Ottimizzare Google Fonts
Se utilizzi Google Fonts è molto probabile che stai causando un aumento di caricamento della tua applicazione tra 300 e 1000 ms. Quando carichi un font da Google, realmente, stai effettuando due differenti richieste: la prima per recuperare il file CSS e la seconda per scaricare il font dal link https://fonts.gstatic.com. Copiando il contenuto del file CSS ed ogni @font-face di cui hai bisogno e mettendo tutto in un tag <style> puoi avere un miglioramenteo dal 30 al 50% di caricamento del font.
I risultati ottenibili
Applicando i consigli che ti abbiamo fornito nei precedenti paragrafi ed utilizzando le best practices del framework che stai usando puoi ottenere un miglioramento complessivo anche dell’ 80%. Un risultato che può avere un impatto immediato sui Key Performance Indicator(KPI) essenziali per il tuo business online.
Contattaci subito e senza impegno per migliorare le performance della tua applicazione.
Glue Labs e lo Sviluppo di Web Application
Ti supportiamo nella progettazione e nello sviluppo di Web Application e Progressive Web Application(PWA) performanti anche con possibilità di sostenere carichi di lavoro enormi. Grazie all’esperienza maturata in tantissimi settori, con numerosi Clienti e con un solido gruppo aziendale ti forniamo le competenze per ottenere applicazioni moderne e sicure. Contattaci subito e senza impegno per maggiori informazioni.
