{"id":364,"date":"2013-04-02T16:14:41","date_gmt":"2013-04-02T14:14:41","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/migliorare-ux-con-performance-front-end\/"},"modified":"2013-04-02T16:14:41","modified_gmt":"2013-04-02T14:14:41","slug":"migliorare-ux-con-performance-front-end","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/migliorare-ux-con-performance-front-end\/","title":{"rendered":"Migliorare la UX con la performance front-end"},"content":{"rendered":"
\n

Immaginiamoci di essere ad un incrocio, in attesa che scatti il verde per attraversare la strada. Schiacciamo il pulsante per l’attraversamento pedonale e prendiamo in mano il telefono. Vogliamo fare una cosa: potremmo voler controllare l’email, aggiungere una voce alla nostra to-do list, o controllare Twitter. Abbiamo un tempo limitato per fare una di queste cose.<\/p>\n

Tale quantit\u00e0 di tempo \u00e8 quanto hanno i nostri utenti per portare a termine quello che vogliono fare sul nostro sito, ed \u00e8 importante.<\/p>\n

Secondo uno studio di Google, aggiungere mezzo secondo alla pagina dei risultati di una ricerca pu\u00f2 fare diminuire il traffico e le entrate dalla pubblicit\u00e0 del 20%. Nello stesso articolo in cui appare questa affermazione<\/a>, si dice che Amazon abbia scoperto che ogni 100 millisecondi<\/em> aggiunti al tempo di caricamento fanno diminuire le vendite del 1%. Gli utenti si aspettano che le pagine si carichino in due secondi e, dopo tre secondi, fino al 40% delle persone semplicemente abbandoner\u00e0 il sito<\/a>.<\/p>\n

Riuscite a tenere il passo? La risposta potrebbe essere “no” se state progettando siti pieni di contenuto, con molti elementi dinamici, con files JavaScript molto grandi e con grafica complessa.<\/p>\n

\u00c8 ora di rendere l’ottimizzazione della performance una parte fondamentale del modo in cui progettiamo, realizziamo e testiamo ogni singolo sito che creiamo, per tutti i device.<\/p>\n<\/div>\n

\n

Progettare per la performance<\/h2>\n

La performance di un sito web comincia con il design. Pesate l’impatto delle scelte di design sulla velocit\u00e0 di una pagina rispetto al suo impatto rispetto al conversion rate del vostro sito. Vi servono davvero otto diverse sfumature di blue? Che valore aggiunge un’immagine di background larga 1000 px? Sostituire una sprite con un icon font aggiunge davvero pi\u00f9 peso alla pagina e rallenta il rendering oppure sar\u00e0 pi\u00f9 veloce che con l’immagine originale?<\/p>\n

Non tutte le decisioni di design favoriranno la performance. Ho scoperto che nonostante lo stile di un pulsante rallenti leggermente la velocit\u00e0 della pagina riesca a far aumentare le conversioni, quindi in questo caso vale la pena sacrificare leggermente la performance web.<\/p>\n

Tuttavia, a volte, vince la performance. Una volta avevo un redesign di una landing page che aggiungeva una significativa quantit\u00e0 di immagini alla pagina e non ero sicura se il risultato della performance avrebbe avuto un impatto negativo sulle conversioni, perci\u00f2 mostrai il redesign a un piccolo sotto-insieme di utenti in un test A\/B<\/a> per vedere che impatto avrebbe avuto. Il nuovo design ci metteva il doppio del tempo a caricare e notati subito un alto exit rate e un conversion rate pi\u00f9 basso, cos\u00ec tenni il design originale pi\u00f9 leggero. Va bene sbagliare perch\u00e9 ci fornisce un benchmark.<\/p>\n

In un altro esperimento, la homepage di dyn.com<\/a> aveva una sezione di immagini thumbnail con 26 immagini a rotazione su 10 slot.<\/p>\n

<\/p>\n

La homepage di dyn.com.<\/p>\n<\/div>\n

Il mio collega dell’epoca aveva messo tutte e 26 le immagini in una sprite, la quale:<\/p>\n