Performance

Le performance sono un elemento fondamentale per preservare intatta l’esperienza dell’utente, soprattutto in condizioni non ottimali di connettività o di device utilizzato.

Dopo tre secondi, la perdita di utenti per un sito può arrivare al 40% delle visite.

I tempi di attesa percepiti hanno un forte impatto non solo sulla potenziale perdita di clienti ma anche sulla qualità percepita rispetto al brand da parte dell’utente.

Per questo motivo, nella scrittura del codice front-end, ci occupiamo in particolare di:

  • fornire immagini responsive
  • fornire immagini ottimizzate nei tagli e nei formati più efficienti
  • Caricare in modo progressivo le risorse (Lazy Loading)
  • ridurre il numero di risorse che bloccano il rendering (Critical Path)

Per avere una panoramica vedere la presentazione interna di Luca Salvini sulle performance: Performance as UX  (slide) (video)

Testing

Un buon modo per verificare lo stato di una pagina in termini di performance è quello di utilizzare un tool di analisi come WebPageTest o Page Speed Insight. Il primo è in grado di effettuare il test anche se la pagina è protetta da autenticazione lato server, il secondo necessita invece che la pagina sia pubblicamente raggiungibile.

Entrambi gli strumenti forniscono un report dettagliato degli ambiti di miglioramento disponibili, anche se WebPageTest fornisce un report decisamente più approfondito e ricco rispetto a Page Speed Insight.

Using WebPageTest è una guida approfondita sull’uso di WebPageTest.

Immagini responsive

Le immagini responsive permettono di fornire al visitatore l’immagine con la risoluzione più adeguata alla risoluzione del viewport in uso.

Esistono quattro approcci alle immagini responsive: due per le immagini inline (img srcset/sizespicture element) , due per le immagini di background (media queries e image-set).

Img srcset/sizes image-set lasciano al browser la scelta migliore del formato immagine da fornire al browser del visitatore, mentre picture element e la definizione di background differenti in base alla media query lasciano nelle mani dello sviluppatore il potere decisionale e sono quindi da utilizzare in quei casi in cui la componente di art direction richiede immagini con proporzioni o inquadrature legate al viewport di utilizzo.

Per maggiori informazioni è caldamente consigliato il ciclo di post di Jason Grigsby Responsive Images 101.

Come supporto alla definizione dei tagli di immagine è consigliato l’utilizzo di Responsivizr.

Image optimization

L’ottimizzazione delle immagini ha due scopi:

  • ridurre i tempi di disegno dell’immagine
  • ridurre i tempi di scaricamento dell’immagine

A seconda del formato grafico utilizzato, l’ottimizzazione può portare o meno a perdita di fedeltà dell’immagine.

WEBP, JPEG2000, JPEGX

Lazy Loading

Critical CSS

Performance budget

http://www.performancebudget.io/

Bibliografia

High Performance Responsive Design – Tom Barker

Designing for Performance – Lara Hogan

Using WebPageTest – Andy Davies

Scritto da lucasalvini 02/05/2018 - 10:02
Modificato da ila 27/09/2019 - 11:12