Back to top

Front End Performance Checklist

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

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.

CONTATTI

Scrivici dal form di contatto

Tel +39 06 56549766
Fax +39 06 21122581

Mail: info@glue-labs.com
Pec: gluelabs@legalmail.it

Dove Siamo
Roma: Piazza Don Sturzo 15
Padova: Via Savonarola 217
Milano: Via Lazzaretto 19
Torino: P.zza XVIII Dicembre 5

Nome*

E-mail*

Telefono(per un contatto più rapido)

Come possiamo aiutarti?

Altro che vuoi dirci?

Inviando i tuoi dati accetti le condizioni sulla privacy. Li useremo per rispondere alle tue domande e richieste.

TOP