La maggior parte degli sviluppatori front-end conoscono almeno alcune delle opzioni a loro disposizione quando si tratta di migliorare le prestazioni front-end. Le prestazioni in questo senso non si riferiscono alla velocità con cui viene caricata una determinata pagina, ma piuttosto a quanto risulta fluida e reattiva quando un utente interagisce con essa. Un esempio specifico potrebbe essere la frequenza fotogrammi di un utente durante lo scorrimento della pagina iniziale; se è costantemente alto, le prestazioni sono considerate buone.
C'è la possibilità che tu non abbia mai sentito il bisogno di risolvere problemi di prestazioni prima. Forse non hai lavorato su un sito che ha sofferto di tali problemi, o forse rimuovendo quel piccolo pezzetto di lag o recuperando quei fotogrammi persi non è in cima alle tue priorità. In ogni caso, con la crescente quantità di animazioni e stili complessi che vengono incorporati nei siti Web moderni e l'adattamento del design reattivo, è possibile che a un certo punto ti imbatti in prestazioni mobili lente. Questo articolo suggerisce alcuni aspetti da considerare quando si lavora su siti Web e app web che devono bilanciare complessità e prestazioni durante l'esecuzione su dispositivi mobili meno potenti.
? Funziona senza intoppi sul mio iPhone 5?
Lo fa davvero? Bene, è fantastico! Ecco alcune statistiche recenti fornite da W3Schools (da non confondere con il W3C) che illustrano i sistemi operativi mobili più attivi.
Ovviamente il nostro uso di questi dati è limitato. È solo esplicito su due sistemi operativi; iOS e Android. Questo lascia fuori dalla vista Windows Phone, Blackberry e altri sistemi operativi mobili meno popolari.
Quello che possiamo vedere è che la quota di mercato di Android è leggermente superiore a quella di iOS. Ancora una volta, mancano ulteriori dettagli qui come numeri di versione e nomi di dispositivi, ma ci dà un buon inizio per determinare dove è più necessario il nostro supporto.
Android non solo detiene la più alta quota di mercato dei dispositivi attivi, ma soffre anche enormemente della frammentazione dei dispositivi. Dati recenti mostrano che nel 2013 solo 11.868 dispositivi Android distinti sono stati individuati in natura (su un campione di 682.000 dispositivi). Su questi dispositivi venivano utilizzate otto diverse versioni del sistema operativo Android.
Il punto è che quando si tratta di valutare le prestazioni del tuo sito devi testare su una gamma adeguata di dispositivi. Esattamente quali dispositivi possono essere determinati solo per sito web e dovrebbero essere basati su dati reali dei visitatori (se ne puoi ottenere alcuni) che si riferiscono al tuo pubblico di destinazione.
In un mondo perfetto, i nostri siti funzionerebbero in modo fluido su ogni singolo dispositivo. In realtà, ciò non è possibile a causa dei soliti vincoli di tempo e finanza. Sta a te decidere dove tracciare la linea e scegliere ciò che è accettabile.
Cause comuni di prestazioni scadenti
Qui ci sono un paio di cose a cui prestare attenzione durante il debug dei problemi di prestazioni sui dispositivi mobili.
1. Dichiarazioni CSS grandi e complesse
Per tutte le meraviglie che CSS3 apporta al mondo dello sviluppo front-end, tutte queste fantasiose dichiarazioni di stile stanno costringendo le nostre CPU a lavorare più duramente che mai. Juriy Zaytsev ha scritto un grande articolo sulla profilazione e ottimizzazione dei CSS che lo copre bene, tuttavia prendete nota che questo pezzo è stato pubblicato nel gennaio 2012.
Il profiler utilizzato da Juriy è Opera Dragonfly's Profiler, ma ora puoi profilare i tuoi stili più facilmente utilizzando Chrome DevTools semplicemente visitando i profili nel navigatore DevTools e seleziona l'opzione preferita.
Per vedere da soli l'impatto dei CSS, esegui un grande sito di fantasia attraverso il DevTools Profiler (se hai tempo, profila anche i tuoi tempi di pittura) e vedrai i problemi di prestazioni di cui sto parlando. Diamo un'occhiata a un esempio.
? Posso eseguire Battlefield 3 su impostazioni ultra (un'immagine molto grande), ma la home page di Green Man Festival scorre a 24 fps. Cosa succede con quello??
Cosa succede davvero?
Per quanto belli siano i look del sito, gli sviluppatori hanno dovuto sacrificare le prestazioni in qualche modo per ottenere l'aspetto visivo e la sensazione che stavano cercando. La perdita di prestazioni è piccola. Tuttavia, se un sito come questo può rallentare le prestazioni su un potente computer desktop, cosa possiamo aspettarci da un telefono cellulare che gira su un processore da 1 Ghz?
Naturalmente, la maggior parte dei siti con fantastiche funzionalità desktop fornirà giustamente un'esperienza più semplificata se visualizzata su dispositivi mobili.
Nel caso di Green Man, i browser mobili avranno immagini più piccole da gestire, meno o più animazioni semplificate e una quantità ridotta di contenuti dinamici. Di conseguenza, scorre perfettamente liscio e sembra grande.
Se il tuo sito si sente lento sui dispositivi mobili, la prima cosa da considerare sono le dichiarazioni CSS. In termini di individuazione dei colpevoli, le combinazioni di testo-ombra, riquadro-ombra, raggio-bordo, gradienti, trasparenza e altre proprietà simili che si estendono su più elementi in una pagina possono aumentare la quantità di ripetizioni che il browser deve eseguire e come i risultati rendono l'interfaccia utente del tuo sito web lenta e non reattiva. Questi rifacimenti saranno sicuramente più evidenti sui dispositivi mobili.
Spetta a te determinare quali stili sei disposto a mantenere e quali puoi facilmente abbattere. Tutto dipende dal fatto che l'aumento delle prestazioni sia sufficiente a garantire una leggera semplificazione degli stili visivi. Più spesso che no, la riduzione delle dichiarazioni di prestazioni elevate può funzionare a favore dell'esperienza complessiva che i vostri utenti riceveranno.
2. Animazioni JavaScript complesse
jQuery è ora una libreria standard utilizzata da molti sviluppatori che desiderano integrare l'animazione nei loro progetti. Il motivo principale è che è così facile da usare. Non è necessario conoscere JavaScript per utilizzare jQuery. Ovviamente è facile capire perché questo può portare a problemi.Scarso JavaScript può essere una delle cause delle animazioni scalfite, motivo per cui è importante assicurarsi che gli script siano il più ottimizzati possibile.
Se JavaScript non ti lascia con i risultati desiderati, potresti volerti rivolgere alle trasformazioni CSS 3D, il cui supporto è già abbastanza buono nel mercato della telefonia mobile.
L'utilizzo delle trasformazioni 3D consente transizioni uniformi non sempre supportate da librerie come jQuery. Perché? Perché consentono di attivare il rendering accelerato hardware che, pur non essendo una soluzione magica per tutti i problemi di animazione, può essere utilizzato con buoni risultati in determinati scenari. Dai un'occhiata a questa demo di confronto per vedere quanta prestazione può differire tra i due.
Per chi non ha mai utilizzato le trasformazioni 3D, diamo un'occhiata a un esempio di codice per iniziare. Ecco alcuni CSS di base che potresti utilizzare per animare la posizione verticale di un elemento al passaggio del mouse.
Esempio di CSS
Ho creato una demo live su CSSDesk con tutti i prefissi dei produttori inclusi. Si noti che alcuni prefissi potrebbero non essere più richiesti al momento della lettura. Se hai tempo, il blog dev di Flickr contiene un ottimo case study su questo argomento e vale la pena leggerlo.
3. Progressive Enhancement vs. Degrado Grazioso
Qui ne abbiamo due? Non così nuovi? termini (il miglioramento progressivo sta attualmente celebrando il suo decimo anniversario, dopo essere stato coniato nel 2003) che ancora oggi hanno molta rilevanza. Entrambi i concetti sono particolarmente rilevanti quando si sviluppano siti Web reattivi e poiché il numero di dispositivi e sistemi operativi disponibili continua ad aumentare, il miglioramento progressivo, in particolare, sarà un must in molti progetti.
Non sono entrambi la stessa cosa?
Quasi. La differenza fondamentale qui è l'ordine in cui ti avvicini al tuo design. Le funzionalità di pianificazione per funzionare su tutti i dispositivi e quindi l'aggiunta di alcune scintille per chi può gestirlo è un esempio di miglioramento progressivo. Creazione di una caratteristica solo JavaScript di fantasia e procedendo al bolt su a alternativa alla fine; degradazione aggraziata.
Quale metodo dovresti impiegare? Nella mia esperienza il miglioramento progressivo porta quasi sempre a una soluzione migliore e più pulita. Chris Heilmann ha scritto un sommario piuttosto buono su questo che ora si trova su Web Platform Docs.
Che cosa succederà?
Le idee in questo articolo sono fondamentali ma ti porteranno sulla strada giusta quando si tratta di sniffare le cause di scarse prestazioni.
Se vuoi saperne di più, il miglior punto di partenza sarebbe quello di imparare i dettagli di come funziona un browser web a livello tecnico. Dopotutto, è il browser che sta analizzando il codice che scrivi. Se riesci a capire di cosa ha bisogno per essere in grado di gestire il tuo sito senza intoppi, sarai in grado di calcolare il tuo codice per lavorare con esso.
Come funzionano i browser: dietro le quinte dei moderni browser Web c'è un articolo fantastico e completo che fornisce una grande quantità di dettagli su questo argomento. In bocca al lupo!