Front End Performance Checklist

Come migliorare le performance di Web Application, Progressive Web App, Mobile App e Desktop App

Network

Approfondimenti

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.

Cosa Facciamo

Casi di Successo

Un'azienda di ottica con diversi centri in tutta Italia usa le nostre soluzioni Software aziendali e Cloud Development per gestire tutto il proprio personale.

Inizia ora il tuo progetto