Le lingue
Pagine
Legale
@sgelob | www.olegs.be
Cosa sono le Web Performance e perché dovete preoccuparvene
Olegs Belousovs – UX & Web Performance
www.olegs.beTwitter: @sgelob | WP Slack: @oleg
WordPress Meetup Torino – 12 ottobre 2016
@sgelob | www.olegs.be
Vi piace la velocità?
@sgelob | www.olegs.be
@sgelob | www.olegs.be@sgelob | www.olegs.beFoto di Lawrence Sinclair su Flickr @sgelob | www.olegs.be
@sgelob | www.olegs.be@sgelob | www.olegs.beFoto di Shirley de Jong su Flickr
@sgelob | www.olegs.be@sgelob | www.olegs.beFoto di Edward Conde su Flickr
Immagine del tasto al semaforo
@sgelob | www.olegs.be@sgelob | www.olegs.beFoto di Christian Heilmann su Flickr
Immagine di chiusura delle porte in ascensore
@sgelob | www.olegs.be
La definizione di Web PerformanceLe 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
@sgelob | www.olegs.be
Perché è importante che i vostrisiti web siano veloci e quali
fattori vengono influenzati dalla lentezza?
@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 di pensiero e, probabilmente, l’utente inizierà a cambiare il contesto mentalmente;
10 secondi – «torno dopo…».
@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
@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
@sgelob | www.olegs.be@sgelob | www.olegs.be
Dispositivi mobile connessi a InternetPer 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
@sgelob | www.olegs.be@sgelob | www.olegs.behttp://opensignal.com/reports/2014/android-fragmentation/
@sgelob | www.olegs.be@sgelob | www.olegs.be
Crescita di persone connesse a InternetNel 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?
@sgelob | www.olegs.be
Alcuni dati, presi dalle ricerchefatte sulle Web Performance
@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
@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
@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
@sgelob | www.olegs.be
«Il 33% degli utenti insoddisfatti racconterà agli altri l’esperienza negativa vissuta su un sito web.»
– Radware Fastview, 2015
@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 carichinoin modo istantaneo.»
– Akamai Technologies, 2014
@sgelob | www.olegs.be
Strumenti per misurare le Web PerfPrima 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.
@sgelob | www.olegs.be@sgelob | www.olegs.be
Test di misurazione sinteticiDiciamo 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;
…
@sgelob | www.olegs.be@sgelob | www.olegs.be
WebPagetest.org (vista waterfall)
Frankfurt, Chrome, Cable (5/1 Mbps 28ms RTT): http://bit.ly/2cHKyUM
@sgelob | www.olegs.be@sgelob | www.olegs.be
WebPagetest.org (vista filmstrip)
Frankfurt, Chrome, Cable (5/1 Mbps 28ms RTT): http://bit.ly/2cHKyUM
@sgelob | www.olegs.be@sgelob | www.olegs.be
WebPagetest.org (confronto video)
Frankfurt, Chrome, Cable (5/1 Mbps 28ms RTT): youtu.be/64FdytErJnw
@sgelob | www.olegs.be@sgelob | www.olegs.be
Google PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/
@sgelob | www.olegs.be@sgelob | www.olegs.be
Google Chrome DevTools
https://developers.google.com/web/tools/chrome-devtools/
@sgelob | www.olegs.be@sgelob | www.olegs.be
Monitoraggio degli utenti reali (RUM)
https://support.google.com/analytics/answer/1205784?hl=it
@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)● …
@sgelob | www.olegs.be
kB medi per pagina, divisi per tipo di contenuto
Fonte: http://httparchive.org/interesting.php#bytesperpage
A oggi… 09/2016
@sgelob | www.olegs.be
Proiezione: pagine da 3 MB nel 2017?
Fonte: Tammy Everts, SOASTA (novembre 2015)
Oggi noi siamo qui
@sgelob | www.olegs.be
Sfatiamo qualche mito sulle ottimizzazioni delle Web
Performance?
@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
@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
@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.
@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…
@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…
@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
@sgelob | www.olegs.be@sgelob | www.olegs.be
La cultura delle Web PerformanceLe 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
@sgelob | www.olegs.be
Libri sulle Web Performance
@sgelob | www.olegs.be@sgelob | www.olegs.be
Time Is Money
di Tammy Everts | http://amzn.to/2c0vBBX
@sgelob | www.olegs.be@sgelob | www.olegs.be
Using WebPageTest
di Rick Viscomi, A. Davies e M. Duran | http://amzn.to/2cc0GiF
@sgelob | www.olegs.be@sgelob | www.olegs.be
Designing for Performance
di Lara Callender Hogan | http://amzn.to/2cmxxTo
@sgelob | www.olegs.be@sgelob | www.olegs.be
Responsible Responsive Design
di Scott Jehl | http://amzn.to/2ckcl1B
@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
@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
@sgelob | www.olegs.be@sgelob | www.olegs.beWordCamp Torino 2016 | Foto di Gianni Vascellari
@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.beTwitter: @sgelob | WP Slack: @oleg
WordPress Meetup Torino – 12 ottobre 2016
Top Related