Le 6 migliori tecniche per aumentare le performance di una HTML5 Mobile App

febbraio 20, 2014
Share on Facebook0Tweet about this on Twitter0Pin on Pinterest2Share on Google+0
Nello sviluppo di una HTML5 mobile app le performance dell’interfaccia, dei suoi componenti, e delle animazioni CSS3 ad essi legate è un fattore che può fare la differenza nel risultato finale del prodotto, determinandone la qualità ed il relativo successo.

Per realizzare una user-experience piacevole è necessario fare in modo che l’applicazione sia reattiva, presenti animazioni prive di scatti o salti di frame, e che generi il markup HTML di ogni schermata nel minor tempo possibile.

Forse ti potrebbero interessare gli articoli sulle performance e prestazioni di animazioni CSS3 per le HTML5 Mobile App pubblicati su upCreative.net:

Oppure questi articoli che ho scritto per YourInspirationWeb.com:

Ma come è possibile raggiungere tali obiettivi?

In questo articolo voglio condividere con te 6 consigli e tecniche che ho imparato durante le mie esperienze nella realizzazione di numerose HTML5 Mobile App, tra cui due progetti personali, Tint e Dieta SI o NO?.

Html5-mobile-app-6-teniche-per-le-performance

Crea la tua mobile app in HTML, CSS3 e Javascript

Utilizzando queste tecniche insieme a molte altre, ho realizzato più di 10 mobile app in HTML, CSS3 e Javascript. Se anche tu vuoi realizzare la tua applicazione in HTML, CSS e javascript da distribuire nei vari store, forse potrebbe interessarti il mio e-book HTML Mobile Accelerato.

1. Non generare (mai) il tuo markup HTML5 sul server

Molti mi chiedono come implementare il codice (php, asp, asp.net ecc.)  per la generazione dinamica del markup HTML5 dell’interfaccia sul server; tuttavia proprio il fatto che il markup venga generato lato-server rappresenta un’approccio sbagliato.

Il motivo? Servirsi di codice lato-server per generare il proprio markup è chiaro un fattore di lentezza.

Perché effettuare una chiamata remota per ottenere dei tipi di dati (come il markup) che possono essere benissimo inclusi nei file dell’applicazione?

Le uniche chiamate ajax che dovresti effettuare sono quelle il cui scopo è ottenere informazioni (in XML, json ecc) o provvedere al salvataggio di quelle ottenute dall’applicazione.

Per generare del markup  direttamente dall’applicazione in base alle informazioni ottenute dal server, possiamo procedere in due modi. Vediamoli brevemente, supponendo di aver ottenuto questo tipo di dati in formato json:

 a) – Genera il tuo markup direttamente da javascript

b) – Usa un sistema di Templating

Ecco come effettuare il render dinamico del markup con il sistema di templating EJS

File list.ejs:

Javascript:

Per sapere di più sui sistemi di templating ti consiglio di leggere questo articolo:

Ricorda, stiamo parlando si una Single page app e non di un normale sito web.

2. Limita i dati tra server e client

limita-dati-tra-server-e-client

Limitare la quantità di dati passati tra server e client può migliorare notevolmente l’esperienza utente, accorciando i tempi di attesa. Ecco come poterlo fare:

  1. Salvare i dati già ottenuti in una cache locale: ci possiamo servire per esempio di funzionalità come l’HTML5 localStorage, un database SQLite, o il salvataggio su un file locale, per memorizzare dati che già abbiamo ottenuto in precedenza, come per esempio una stessa news selezionata per la seconda volta.
  2. Limitare il traffico dati allo stretto necessario: non ha senso richiedere al server più informazioni di quelle che ci servono; potremo per esempio impostare le nostre API in modo tale che esse ci restituiscano solo dati che ancora non abbiamo. Ecco un piccolo esempio di una possibile chiamata Ajax che richiede al server solo delle news non ancora ricevute:
     

3. Non attendere di ricevere informazioni dal server per visualizzare il tuo markup HTML

Non attendere di ricevere i dati dal server per visualizzare una schermata (view). Una buona pratica è quella di visualizzare la view, effettuare la chiamata ajax e, una volta ricevuti i dati, aggiornare la schermata:

Ho adottato questa tecnica per la realizzazione di Tint Weather App, dove per ogni schermata relativa ad una località ho dapprima effettuato il render della view mostrando un’animazione CSS3 di loading. Quindi ho effettuato la chiamata ajax per reperire i dati meteo dal server e, una volta ottenuti, ho aggiornato la view mostrandoli all’utente.

HTML5-render-view

4. Usa animazioni CSS3 performanti

Le prime volte che mi dilettavo nella realizzazione di HTML5 Mobile App, mi servivo di framework come jQuery Mobile, jqTouch o simili, che basavano le loro animazioni su metodi jQuery come l’animate$(“#element”).animeate() ), i quali non sfruttano la tecnica dell’accelerazione hardware, supportata da tutti i browser mobile.

L’hardware acceleration permette di delegare il rendering degli elementi dell’ interfaccia dalla memoria centrale alla GPU, attraverso i livelli grafici, alleggerendone notevolmente il carico di lavoro.

5. Elimina il ritardo di 300ms del browser

Hai mai notato, navigando un sito web con il tuo dispositivo mobile, che tra il touch su un link e l’inizio del caricamento della pagina successiva, oppure tra il touch su un input box ed il relativo focus, passa qualche millisecondo di tempo?
Ciò è dovuto al fatto che quando l’utente esegue il tap su un bottone, i browser mobile aspettano circa 300ms prima che facciano scattare l’evento del click.

Ma perché?

Il browser vuole essere sicuro che l’utente non voglia eseguire un double tap, in modo da distinguere l’evento del touch singolo da quello del doppio touch.

Visto che il nostro intento è quello di realizzare una HTML5 Mobile App fluida e reattiva, dobbiamo assolutamente risolvere questo problema (sicuramente avrai notato che nessuna applicazione nativa presenta quel fastidiosissimo delay, e noi dobbiamo fare altrettanto).

Per eliminare tale ritardo ci basterà includere nel  progetto la libreria FastClick.js, grazie alla quale sarà sufficiente inserire nel codice Javascript la seguente sintassi:

6. Ottimizza le immagini

html5-mobile-app-ottimizza-immagini

Molti sottovalutano questo importante aspetto.

Il caricamento delle immagini rappresenta un elemento determinante per le performance di ogni HTML5 Mobile App: il modo in cui le implementiamo nell’interfaccia incide notevolmente sulla user-expericence finale.

Ecco alcuni punti da seguire per utilizzare correttamente le immagini:

  • Usa gli spritesheet dove possibile: essi fanno in modo che tutte le immagini utilizzate nell’applicazione vengano caricate in una sola volta, evitando il load singolo solamente nel momento in cui sono visualizzate.
  • Non ridimensionare le immagini: utilizza immagini che hanno le stesse dimensioni con cui saranno visualizzate; richiama diverse versioni della stessa immagine a seconda della risoluzione del dispositivo. Non ridimensionare le immagini con proprietà CSS o attributi HTML.
  • Se possibile appoggiati ad un server CDN per l’hosting delle immagini che richiami via server: esistono diversi hosting CDN gratuiti da poter usare come spazio in cui salvare le tue immagini.
  • Prevedi delle fallback per gli errori di caricamento: se un’immagine non viene trovata (errore 404) o si verifica un errore di caricamento, è sempre opportuno visualizzarne una predefinita, o magari evitare di inserire il relativo tag HTML nel markup dell’interfaccia. Ecco un esempio:
     

Conclusioni

Realizzare applicazioni mobile in HTML5, CSS3 e Javascript rappresenta un grande vantaggio, in quanto permette sviluppare un singolo prodotto da poter distribuire su diverse piattaforme. Tuttavia uno dei possibili difetti di questo approccio è proprio la possibilità di avere scarse performance: diventa quindi indispensabile eliminare tale eventualità.

Adottando la serie di tecniche esposte in questo articolo posso affermare di aver incrementato le performance delle mie HTML5 Mobile App, ed averne incredibilmente ridotto la differenza rispetto alle applicazioni Native.

E tu? Hai qualche consiglio o tecnica da suggerirmi? Fammelo sapere lasciando un commento!

Crea la tua mobile app in HTML, CSS3 e Javascript

Utilizzando queste tecniche insieme a molte altre, ho realizzato più di 10 mobile app in HTML, CSS3 e Javascript (tra cui Tint e Dieta SI o NO?).

Se anche tu vuoi realizzare la tua applicazione in HTML, CSS e javascript da distribuire nei vari store, forse potrebbe interessarti il mio e-book HTML Mobile Accelerato.

HTML-mobile-accelerato-ebook-cover

Giacomo Freddi

Web Designer Freelance e Developer, si occupa del design e dello sviluppo di applicazioni web dal 2008, come molti freelance è abituato a gestire più ruoli e spaziare su più campi, ma la sua passione principale è quella della creazione di interfacce front-end e back-end utilizzando codice html5 e css3. Adora usare pattern MVC per i suoi Javascript.

  • Pingback: HTML5 Mobile App - Le 6 migliori tecniche per a...()

  • Francesco Michelini

    Ottimi consigli, questi sono più aspetti dettati dal buon senso ma sono così ovvi che vengono spesso ignorati.

    Buono soprattutto fastclick.js, avevo notato questo famoso ritardo ma credevo fosse un problema del mio telefono, l’ho usato su un sito responsive che sto creando e devo dire che l’effetto di immediatezza c’è.

    Non migliora le performance ma piuttosto l’esperienza utente, facendo sembrare il sito o l’app più reattivi.

    Per le animazioni CSS3 sono d’accordo, ma io proporrei l’utilizzo della libreria GSAP (http://www.greensock.com/gsap-js/), che per qualche oscuro motivo rende le animazioni JavaScript più fluide di quelle CSS3.

    • Giacomo Freddi

      Ciao Francesco, grazie per le considerazioni

      Effettivamente più che per le performance, Fastclick.js è un ottimo strumento per rendere l’applicazione native-like, ovvero più vicina ad applicazioni native, sia per reattività che per funzionalità (quindi come dici tu, per quanto riguarda l’esperienza utente).

      Per il discorso delle animazioni Javascript e della libreria GSap, non c’è nessun “motivo oscuro”; il fatto è che anche con animazioni Javascript-based, quindi quelle i cui frames sono controllati appunto lato-javascript, se ottimizzate ed impostate correttamente si possono raggiungere dei grandissimi risultati, soprattutto nel caso di animazioni più complesse (come per esempio in un videogioco).

      Tuttavia, per riprodurre animazioni in linea con le più comuni interfacce mobile, consiglio vivamente di utilizzare animazioni CSS3 che, come puoi vedere dai miei post, permettono di controllare comunque le varie fasi di ogni effetto, con un livello di semplicità abbastanza elevato.

      • Francesco Michelini

        Sto leggendo l’ultimo libro di Smashing Magazine e nel capitolo relativo alle performance l’autore dice che si tratta ANCHE di apparenza, cioè di come l’utente percepisce l’app o il sito che si sta visitando.

        Le animazioni CSS3 le sto già utilizzando e rispetto a quelle che fornisce jQuery c’è un netto miglioramento (ho anche seguito le indicazioni che fornisci in vari articoli), la scattosità si riduce al minimo (sui dispositivi Apple non si nota, mentre gli smartphone Android di fascia medio bassa fanno lo stesso un po fatica).

        Nel sito che sto costruendo in questo periodo tuttavia mi sono convinto ad utilizzare GSAP, dovrò gestire animazioni un po particolari e facendo dei test su vari smartphone e tablet ho visto che la fluidità migliora ulteriormente rispetto alle animazioni CSS3, ci vuole un po di lavoro in più ma ne vale la pena.

        Ti farò sapere come va ;)

        • Giacomo Freddi

          OK sono curioso di sapere i risultati, magari li condividiamo qui su upCreative.net in modo da fornire un’ulteriore soluzione ai lettori :)

  • Giacomo Freddi

    Ciao Francesco, grazie per le considerazioni.
    Effettivamente più che per le performance, Fastclick.js è un ottimo strumento per rendere l’applicazione native-like, ovvero più vicina ad applicazioni native, sia per reattività che per funzionalità (quindi come dici tu, per quanto riguarda l’esperienza utente).
    Per il discorso delle animazioni Javascript e della libreria GSap, non c’è nessun “motivo oscuro”; il fatto è che anche con animazioni Javascript-based, quindi quelle i cui frames sono controllati appunto lato-javascript, se ottimizzate ed impostate correttamente si possono raggiungere dei grandissimi risultati, soprattutto nel caso di animazioni più complesse (come per esempio in un videogioco).
    Tuttavia, per riprodurre animazioni in linea con le più comuni interfacce mobile, consiglio vivamente di utilizzare animazioni CSS3 che, come puoi vedere dai miei post, permettono di controllare comunque le varie fasi di ogni effetto, con un livello di semplicità abbastanza elevato.

  • http://www.axedre.net Andrea Aloi

    Ottimo articolo, grazie! :)

    • Giacomo Freddi

      Fa sempre piacere essere utile! :)