1.
@sgelob | www.olegs.be
Cosa sono le Web
Performance e perché
dovete preoccuparvene
Olegs Belousovs – UX & Web Performance
www.olegs.be
Twitter: @sgelob | WP Slack: @oleg
WordPress Meetup Torino – 12 ottobre 2016

2.
@sgelob | www.olegs.be
Vi piace la velocità?
@sgelob | www.olegs.be

3.
@sgelob | www.olegs.be@sgelob | www.olegs.beFoto di Lawrence Sinclair su Flickr @sgelob | www.olegs.be

4.
@sgelob | www.olegs.be@sgelob | www.olegs.beFoto di Shirley de Jong su Flickr

5.
@sgelob | www.olegs.be@sgelob | www.olegs.beFoto di Edward Conde su Flickr
Immagine del tasto al semaforo

6.
@sgelob | www.olegs.be@sgelob | www.olegs.beFoto di Christian Heilmann su Flickr
Immagine di chiusura delle porte in ascensore

7.
@sgelob | www.olegs.be
La definizione di Web Performance
Le Web Performance si riferiscono alla velocità
con la quale le pagine web vengono scaricate e
visualizzate in un web browser dell’utente.
Web Performance Optimization (WPO), o meglio le
ottimizzazioni dei siti web, sono il settore delle
conoscenze sull’aumento delle prestazioni web.
Fonte: Wikipedia

8.
@sgelob | www.olegs.be
Perché è importante che i vostri
siti web siano veloci e quali fattori
vengono influenzati dalla lentezza?

9.
@sgelob | www.olegs.be@sgelob | www.olegs.be
Fattori umani e psicologici (UX)
La parte più importante per una persona che visita un sito web sono le
prestazioni percepite. Quindi, non importa tanto il tempo che ci mette il
vostro sito web a caricarsi in totale, quanto la velocità con la quale il vostro
visitatore inizia a vedere i contenuti sullo schermo e può cominciare a
interagire.
Nel suo libro «High Performance Browser Networking», Ilya Grigorik delinea
metriche per la percezione della velocità negli umani:
100 millisecondi come tempi di risposta sembrano immediati;
100-300 millisecondi creano un piccolo, ma percettibile, ritardo;
300 millisecondi–1 secondo si percepiscono come «funziona»;
1 secondo costituisce un notevole ritardo per un utente. Interrompe il flusso

10.
@sgelob | www.olegs.be@sgelob | www.olegs.be
Valore di business (E-commerce)
Innumerevoli studi hanno trovato una connessione indiscutibile tra i tempi di
caricamento di un sito web e le metriche di business come il numero di pagine
viste, il tasso di conversione e la frequenza di rimbalzo.
Se avete a cuore di offrire un’esperienza utente più veloce per i vostri clienti
online, prendete in considerazione seriamente il costante monitoraggio e la
misurazione delle performance di velocità del vostro e-commerce.
Non avere un sito web mobile-friendly e ottimizzato per alte prestazioni,
significa aiutare i vostri concorrenti ad avere più successo…
«Il 23% delle persone ha maledetto il proprio dispositivo mobile, il 11% ha
urlato contro e il 4% lo ha gettato via, dopo aver percepito problemi di
performance durante una transazione online.»
– Ricerca di Harris Interactive per Tealeaf, 2011

11.
@sgelob | www.olegs.be
Fonte: http://gph.is/1s5E3Su

12.
@sgelob | www.olegs.be@sgelob | www.olegs.be
Ottimizzazione per i motori di ricerca (SEO)
Il tempo di caricamento di una pagina è uno dei fattori importanti di ranking
sui motori di ricerca.
Un sito web eccessivamente lento avrà un posizionamento sui motori di
ricerca peggiore rispetto ad un altro sito web più veloce.
Oramai, le informazioni che Google conta la velocità di un sito web come uno
dei fattori di ranking sono ufficiali (già dal 2010).
«Dopo aver ottimizzato la velocità di caricamento del loro sito web,
smartfurniture.com ha visto un incremento del 20% del traffico organico, del
14% le visualizzazioni delle pagine e soprattutto una crescita di vendite.»
– Margaret Kuchler di Akamai Technologies, 2011

13.
@sgelob | www.olegs.be@sgelob | www.olegs.be
Dispositivi mobile connessi a Internet
Per alcune persone il mobile sarebbe l’unico Internet che conoscono.
Si chiamano utenti «mobile-only» e non hanno mai avuto accesso a Internet
da un computer o altri dispositivi con risorse maggiori e schermi grandi.
Verificate che il vostro sito web sia adatto per i risultati di ricerca di Google
ottimizzati per i dispositivi mobili.
Test di compatibilità con dispositivi mobili: http://bit.ly/1EVi9R3
«Un terzo (32%) degli utenti lamenta che i siti web e app su mobile sono lenti
a caricare.»
– Harris Interactive (per Skava), 2013

14.
@sgelob | www.olegs.be@sgelob | www.olegs.be
http://opensignal.com/reports/2014/android-fragmentation/

15.
@sgelob | www.olegs.be@sgelob | www.olegs.be
Crescita di persone connesse a Internet
Nel 2000 c’erano solo 400 milioni di utenti Internet in tutto il mondo. Oggi, gli
utenti di Internet sono oltre 3 miliardi (la popolazione del nostro pianeta,
ammonta a circa 7.4 miliardi di persone).
Nei prossimi 5 anni, circa altri 4 miliardi di persone avranno accesso a
Internet, grazie a diverse iniziative e progetti come Project Loon.
E i vostri siti web sono abbastanza veloci per essere visti non da un
iPhone o altri dispositivi di ultima generazione, ma da dispositivi mobile
molto più economici, con schermi più piccoli e con processori più lenti?
In più, ogni kilobyte scaricato per le persone su mobile ha un costo.
Potete verificare il costo della visualizzazione del vostro sito web in diversi
paesi con questo servizio: What Does My Site Cost?
Siete pronti per questi 4 miliardi di nuovi possibili visitatori o clienti?

16.
@sgelob | www.olegs.be
Alcuni dati, presi dalle ricerche
fatte sulle Web Performance

17.
@sgelob | www.olegs.be
«3 secondi di attesa basterebbero all’80%
dei visitatori per decidere di
abbandonare un sito web lento.»
– State of the Union, 2015

18.
@sgelob | www.olegs.be
«Il 60% degli utenti di Internet si aspetta
la stessa User Experience sia su mobile
che su desktop.»
– Radware Fastview, 2015

19.
@sgelob | www.olegs.be
«Il 71% delle 1500 persone intervistate, si
sente regolarmente infastidito dai siti
web lenti.»
– “Need for Speed,” 1&1 Internet, 2011

20.
@sgelob | www.olegs.be
«Il 33% degli utenti insoddisfatti
racconterà agli altri l’esperienza negativa
vissuta su un sito web.»
– Radware Fastview, 2015

21.
@sgelob | www.olegs.be
«Oggi, il 49% delle persone online si
aspetta i tempi di caricamento di 2
secondi o meno, e il 18% (1 su 5) si
aspetta che le pagine web si carichino
in modo istantaneo.»
– Akamai Technologies, 2014

22.
@sgelob | www.olegs.be
Altri case studies su wpostats.com

23.
@sgelob | www.olegs.be
Strumenti per misurare le Web Perf
Prima dovete misurare le prestazioni attuali del
vostro sito web, individuare i vari problemi che lo
rendono lento e solo dopo pensare alle
ottimizzazioni da fare.
Essendo ogni sito web diverso da un altro, senza
una misurazione accurata non serve buttare
sopra tutti i plugin e le tecniche di ottimizzazione
di questo mondo, perché si rischia di finire a fare
over-optimization, che è un concetto spesso
nominato anche in SEO.

24.
@sgelob | www.olegs.be@sgelob | www.olegs.be
Test di misurazione sintetici
Diciamo che si tratta di una simulazione dello stato di salute del vostro sito.
Facendo un test sintetico con uno degli strumenti disponibili gratuitamente
(WebPagetest.org, Pingdom Website Speed Test o Google PageSpeed
Insights), riuscite a simulare una visita al vostro sito web con delle
condizioni da voi scelte, vedendo i dettagli del risultato alla fine.
Potete comparare il vostro sito web con quelli dei vostri competitor;
Potete verificare come il design del vostro sito web influisce sulle web
performance;
Riuscite a capire come si comporta la vostra nuova versione del sito web
rispetto alla precedente;
…

25.
@sgelob | www.olegs.be@sgelob | www.olegs.be
WebPagetest.org (vista waterfall)
Frankfurt, Chrome, Cable (5/1 Mbps 28ms RTT): http://bit.ly/2cHKyUM

26.
@sgelob | www.olegs.be@sgelob | www.olegs.be
WebPagetest.org (vista filmstrip)
Frankfurt, Chrome, Cable (5/1 Mbps 28ms RTT): http://bit.ly/2cHKyUM

27.
@sgelob | www.olegs.be@sgelob | www.olegs.be
WebPagetest.org (confronto video)
Frankfurt, Chrome, Cable (5/1 Mbps 28ms RTT): youtu.be/64FdytErJnw

28.
@sgelob | www.olegs.be@sgelob | www.olegs.be
Google PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

29.
@sgelob | www.olegs.be@sgelob | www.olegs.be
Google Chrome DevTools
https://developers.google.com/web/tools/chrome-devtools/

30.
@sgelob | www.olegs.be@sgelob | www.olegs.be
Monitoraggio degli utenti reali (RUM)
https://support.google.com/analytics/answer/1205784?hl=it

31.
@sgelob | www.olegs.be@sgelob | www.olegs.be
Le principali cause di pessime Web Perf
● Immagini in formati errati e non ottimizzate
● File testuali (JS e CSS) non compressi con Gzip
● File JavaScript e CSS non minificati
● Utilizzo di troppi font personalizzati
● Molte regole di CSS inutilizzate nel front-end
● Video che si caricano in automatico
● Script di terze parti non raggiungibili (SPOF)
● …

32.
@sgelob | www.olegs.be
kB medi per pagina, divisi per tipo di contenuto
Fonte: http://httparchive.org/interesting.php#bytesperpage
A oggi… 09/2016

33.
@sgelob | www.olegs.be
Proiezione: pagine da 3 MB nel 2017?
Fonte: Tammy Everts, SOASTA (novembre 2015)
Oggi noi siamo qui

34.
@sgelob | www.olegs.be
Sfatiamo qualche mito sulle
ottimizzazioni delle Web
Performance?

35.
@sgelob | www.olegs.be@sgelob | www.olegs.be
«Acquisto un server più potente»
Non serve sempre acquistare dei server più potenti e spendere soldi
inutilmente, non sono strategie che vanno bene a lungo termine.
Sarebbe un po’ come continuare a spegnere gli incendi, senza cercare di
capire come mai cominciano e fare qualcosa in modo da evitarli in futuro.
«80-90% del tempo degli utenti, che aspettano le pagine web che si caricano,
viene speso nel front-end. Cominciate da lì.»
– Steve Souders

36.
@sgelob | www.olegs.be@sgelob | www.olegs.be
«Le connessioni diventano più veloci»
«Aumentando la banda di 1,233% è risultato in pagine che erano appena del
55% più veloci, il che significa che le reti più veloci non sono la cura delle
prestazioni, come alcune persone pensano.» – Tammy Everts, Time is Money

37.
@sgelob | www.olegs.be@sgelob | www.olegs.be
«Web Perf è da fare solo a fine progetto»
Molti pensano che il testing delle Web Perf sarebbe da fare solo al progetto finito.
Il tutto per una questione di tempi e costi e succede nella maggior parte dei casi,
soprattutto nelle tradizionali agenzie web, dove manca la cultura delle Web Perf.
Questo crea dei problemi a monte, soprattutto perché sicuramente servirà
ritornare all’inizio del progetto e rivedere l’architettura del sito web lento.
Al posto di sprecare tempo e risorse preziose testando alla fine, un team di lavoro
dovrebbe sfruttare le soluzione di test delle web perf durante tutto il processo di
design e sviluppo, correggendo eventuali problemi o sviste in modo più facile e
meno costoso. Prevenire per non curare.
Sempre più aziende stanno adottando un approccio di test continuo,
realizzando piccoli test di performance durante lo sviluppo nella fase iniziale.
«Lo facciamo poi» = Mai.

38.
@sgelob | www.olegs.be@sgelob | www.olegs.be
Alcuni metodi per ottimizzare le Web Perf
● Riducete le richieste HTTP al minimo
● Ottimizzate le immagini oltre Photoshop
● Minificate i file CSS, JS e HTML delle pagine
● Comprimete i file CSS, JS e HTML con Gzip
● Utilizzate una Content Delivery Network
● Mettete CSS nel <head> e JS prima di </body>
● Concatenate JS e CSS (non serve con HTTP/2)
● Evitate i redirect inutili…

39.
@sgelob | www.olegs.be@sgelob | www.olegs.be
E come lo faccio con WordPress?
Per chi sviluppa i temi si applicano le regole e le tecniche descritte prima.
Per chi non sviluppa temi ma utilizza WordPress più per pubblicare i
contenuti, ci sono degli accorgimenti base e alcuni plugin da utilizzare.
Scegliete con cura il hosting, possibilmente più vicino al vostro audience
principale, analizzando prima le statistiche.
Fate le prove di velocità della demo, prima di acquistare un tema premium.
Misurate ogni volta le web perf, dopo aver attivato un plugin o inserito
uno script di terze parti che interviene sul front-end.
Ottimizzate le immagini prima di caricarle nella libreria dei media,
ridimensionandole e comprimendole ulteriormente con ImageOptim o simile.
Disinstallate e cancellate i plugin inutilizzati o non necessari…

40.
@sgelob | www.olegs.be@sgelob | www.olegs.be
Plugin per le Web Perf su WordPress
● W3 Total Cache – http://bit.ly/2cHWz0R
● WP Rocket – wp-rocket.me (Premium)
● Scripts To Footer – http://bit.ly/2cazLEx
● Plugin Organizer – http://bit.ly/2cpYQw1
● EWWW Image Optimizer – http://bit.ly/1rmRiZB
● WP Lazysizes – http://bit.ly/2ckB5GR
● Plugin Performance Profiler – bit.ly/2cUyu60

41.
@sgelob | www.olegs.be@sgelob | www.olegs.be
La cultura delle Web Performance
Le Web Performance sono un mind-set.
Tutte le persone che toccano con mano in qualche modo il web, dovrebbero
sapere queste cose e prenderle in considerazione sul serio, sempre.
Usate i vari case studies rilevanti per convincere sull’importanza delle
web perf le altre persone del vostro team o in azienda.
Mostrate un confronto del sito web con i principali competitor, utilizzando per
esempio il confronto video di WebPagetest.org
«Innanzitutto, noi crediamo che la velocità è più di una caratteristica. La
velocità è la caratteristica più importante.»
– Fred Wilson, Union Square Ventures

42.
@sgelob | www.olegs.be
Libri sulle Web Performance

43.
@sgelob | www.olegs.be@sgelob | www.olegs.be
Time Is Money
di Tammy Everts | http://amzn.to/2c0vBBX

44.
@sgelob | www.olegs.be@sgelob | www.olegs.be
Using WebPageTest
di Rick Viscomi, A. Davies e M. Duran | http://amzn.to/2cc0GiF

45.
@sgelob | www.olegs.be@sgelob | www.olegs.be
Designing for Performance
di Lara Callender Hogan | http://amzn.to/2cmxxTo

46.
@sgelob | www.olegs.be@sgelob | www.olegs.be
Responsible Responsive Design
di Scott Jehl | http://amzn.to/2ckcl1B

47.
@sgelob | www.olegs.be@sgelob | www.olegs.be
Blog sulle Web Performance
● Web Performance Today – http://bit.ly/2cvlobR
● O'Reilly Performance – http://oreil.ly/2cc1aWi
● Planet Performance – http://bit.ly/2caZny7
● Catchpoint’s Blog – http://bit.ly/2cvlq3p
● Steve Souders – http://bit.ly/2cEOXLv
● Ilya Grigorik – http://bit.ly/2cHVhTI
● Tim Kadlec – http://bit.ly/2c0xsXk

48.
@sgelob | www.olegs.be@sgelob | www.olegs.be
Web Performance Community
● Meetup Turin Web Perf Group: bit.ly/29T4pQt
● Gruppo Web Perf su Slack (EN): bit.ly/1Q6Z7QT
● Gruppo Web Perf Italia su FB: bit.ly/29MRgHA

49.
@sgelob | www.olegs.be@sgelob | www.olegs.beWordCamp Torino 2016 | Foto di Gianni Vascellari

50.
@sgelob | www.olegs.be
Grazie per l’attenzione!
Ora tutti al lavoro per
rendere il web più veloce ;)
Olegs Belousovs – UX & Web Performance
www.olegs.be
Twitter: @sgelob | WP Slack: @oleg
WordPress Meetup Torino – 12 ottobre 2016