Cosa sono le Web Performance e perché dovete preoccuparvene

650 views

Published on

Talk culturale e esplorativo sulle Web Performance, fatto al WordPress Meetup di Torino il 12 ottobre 2016.

Il web lo facciamo tutti noi, per altre persone come noi, e anche se questo argomento, insieme all’accessibilità e alla sicurezza, può sembrare il meno «sexy», dovreste preoccuparvene non meno di che tema e plugin usare sul vostro sito, proprio per il rispetto delle persone che poi visitano i siti che fate e per rendere tutti insieme il web un posto migliore!

Video su YouTube: https://youtu.be/2nM6Mc13Gto

  • Be the first to comment

Cosa sono le Web Performance e perché dovete preoccuparvene

  1. 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. 2. @sgelob | www.olegs.be Vi piace la velocità? @sgelob | www.olegs.be
  3. 3. @sgelob | www.olegs.be@sgelob | www.olegs.beFoto di Lawrence Sinclair su Flickr @sgelob | www.olegs.be
  4. 4. @sgelob | www.olegs.be@sgelob | www.olegs.beFoto di Shirley de Jong su Flickr
  5. 5. @sgelob | www.olegs.be@sgelob | www.olegs.beFoto di Edward Conde su Flickr Immagine del tasto al semaforo
  6. 6. @sgelob | www.olegs.be@sgelob | www.olegs.beFoto di Christian Heilmann su Flickr Immagine di chiusura delle porte in ascensore
  7. 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. 8. @sgelob | www.olegs.be Perché è importante che i vostri siti web siano veloci e quali fattori vengono influenzati dalla lentezza?
  9. 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. 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. 11. @sgelob | www.olegs.be Fonte: http://gph.is/1s5E3Su
  12. 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. 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. 14. @sgelob | www.olegs.be@sgelob | www.olegs.be http://opensignal.com/reports/2014/android-fragmentation/
  15. 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. 16. @sgelob | www.olegs.be Alcuni dati, presi dalle ricerche fatte sulle Web Performance
  17. 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. 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. 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. 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. 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. 22. @sgelob | www.olegs.be Altri case studies su wpostats.com
  23. 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. 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. 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. 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. 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. 28. @sgelob | www.olegs.be@sgelob | www.olegs.be Google PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/
  29. 29. @sgelob | www.olegs.be@sgelob | www.olegs.be Google Chrome DevTools https://developers.google.com/web/tools/chrome-devtools/
  30. 30. @sgelob | www.olegs.be@sgelob | www.olegs.be Monitoraggio degli utenti reali (RUM) https://support.google.com/analytics/answer/1205784?hl=it
  31. 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. 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. 33. @sgelob | www.olegs.be Proiezione: pagine da 3 MB nel 2017? Fonte: Tammy Everts, SOASTA (novembre 2015) Oggi noi siamo qui
  34. 34. @sgelob | www.olegs.be Sfatiamo qualche mito sulle ottimizzazioni delle Web Performance?
  35. 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. 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. 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. 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. 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. 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. 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. 42. @sgelob | www.olegs.be Libri sulle Web Performance
  43. 43. @sgelob | www.olegs.be@sgelob | www.olegs.be Time Is Money di Tammy Everts | http://amzn.to/2c0vBBX
  44. 44. @sgelob | www.olegs.be@sgelob | www.olegs.be Using WebPageTest di Rick Viscomi, A. Davies e M. Duran | http://amzn.to/2cc0GiF
  45. 45. @sgelob | www.olegs.be@sgelob | www.olegs.be Designing for Performance di Lara Callender Hogan | http://amzn.to/2cmxxTo
  46. 46. @sgelob | www.olegs.be@sgelob | www.olegs.be Responsible Responsive Design di Scott Jehl | http://amzn.to/2ckcl1B
  47. 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. 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. 49. @sgelob | www.olegs.be@sgelob | www.olegs.beWordCamp Torino 2016 | Foto di Gianni Vascellari
  50. 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

×