Il Front End è l’elemento essenziale di Web Application, Progressive Web App ed oggi Desktop App e Mobile App grazie a sistemi integrati, per questo motivo le performance diventano sempre più importanti perchè sono legate alla User Experience e alla User Interaction con il nostro applicativo da parte dell’utente.
Come possiamo sapere quali sono i nostri colli di bottiglia tra codice Javascript, immagini, font, rendering, scope, observer, HTTP/2, service workers e tantissimi altri elementi dei moderni Front End? E’ sufficiente la classifica concatenazione e minimizzazione del codice?
Nelle moderne applicazioni dobbiamo fare i conti anche Content Delivery Network, ISP, cache, proxy, load balancers e server che giocano comunque un ruolo nelle perfomance.
La perfomance Checklist
Pianificazione e Metriche
- Migliora la tua sensibilità riguardo le performance per es. attraverso case studies e esperimenti pubblicati su WPO Stats
- L’obiettivo deve essere diventare più rapidi del 20% rispetto al migliore competitor, questa è la regola generale della psicofisica anche chiamata Weber-Fechner Law
- Scegli le metriche corrette per la tua applicazione.
- Acquisisci dati dai dispositivi utilizzati dalla tua target audience, per es. attraverso gli Open Device Lab.
Goal realistici
- Un’interfaccia deve rispondere entro 100 ms ed ogni frame di animazione in circa 10 ms
- Avere un SpeedIndex minore di 1250 ed una critical file size di 170Kb (compressi)
Definizione dell’ambiente
- Mantieni i tuo build tool, non è questo che migliora le performance
- Usa come guida il progressive enhancement per l’architettura di front-end e per lo sviluppo
- Orienta la baseline delle performance verso il modello PRPL : Push, Render, Pre-cache e Lazy Load
- Usa le tecnologie Google AMP o Facebook Instant Articles o Apple News per migliorare la distribuzione di contenuti
- Usa una Content Delivery Network
Ottimizzazione
- Riduci il codice JS per es. con template binari che riduce il costo del parsing e attraverso l’analisi delle dipendenze e dei package
- Usa compilatori ahead-of-time
- Usa tool come Webpack per sfruttare Tree-shaking, scope hoisting e code splitting.
- Sfrutta le potenzialità del tuo Javascript Engine per es. in Electron e Node.js
- Usa il progressive booting
- Configura correttamente i cache header HTTP
- Comprimi file e testo
- Ottimizza le immagini creando anche responsive images
- Ottimizza i web font
- Carica in maniera asincrona le librerie
- Usa Intersection Observer API
- Usa gli stream
- Salva i dati con “Save-Data”
- Usa dns-prefetch,preconnect, preload e tecnologie simile per migliorare la connessione
- Usa HPACK con HTTP/2
Glue Labs e le Perfomance del Front End
Esperti di Front End Design & Development ti supportiamo con training on job, formazione avanzata, assistenza professionale e consulenza per migliorare le performance dei tuoi applicativi. Contattaci subito senza impegno per un preventivo gratuito.
