Cosa sono le Web Performance e perché dovete preoccuparvene

548 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

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
548
On SlideShare
0
From Embeds
0
Number of Embeds
126
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Sono Oleg e faccio parte degli organizzatori di questo Meetup e anche del WordCamp Torino. Lavoro nel web da oltre 10 anni e principalmente mi occupo di sviluppo e ottimizzazioni delle web performance lato front-end.

    Uso WordPress dal 2007 e da un paio di anni contribuisco a WordPress con le traduzioni dall’inglese all’italiano, attività nella community e sono uno dei lead di WordPress.tv (il sito che mostra i video dai vari WordCamp e Meetup nel mondo.)

    Questo sarà un talk meno tecnico e più culturale e esplorativo.

    Se vi vengono in mente delle domande durante il talk, vi prego di segnarvele e farle alla fine se ci sarà tempo, oppure durante il happiness bar e le pizze.

    Vi ringrazio e a questo punto cominciamo il nostro viaggio ;)
  • Parto subito con una domanda:
    ---
    Vi piace la velocità?
    ---


    In generale nella vita…

    Alzate la mano a chi non piace :)



    Siete sicuri?
  • Questo è un treno giapponese Shinkansen Serie 500 con velocità massima di 320 km/h.

    Vorreste poter prendere un treno così per arrivare a destinazione, oppure un treno regionale di TrenItalia? :)
  • Questo scenario è noto a tutti? Piacevole o no? Soprattutto quando si ritorna dalle vacanze :)

    Si può saltare:

    Es. Aeroporto di Houston

    Dopo che le autorità aeroportuali hanno analizzato la situazione più a fondo, è stato rivelato che ci sono voluti circa un minuto per arrivare dal gate di arrivo al ritiro bagagli, in questo modo i passeggeri hanno dovuto trascorrere più di 7 minuti di attesa per le loro valigie.

    La soluzione dell’aeroporto è stata di spostare i gate degli arrivi più distante dalla zona di ritiro bagagli, in modo da fare la strada di circa 7 minuti per raggiungere quella zona. Il risultato è stato che i reclami si sono ridotti praticamente a zero.

    Attesa passiva –> attesa attiva.
  • Questi dispositivi ci sono in tutto il mondo. Ma molti non funzionano (e in alcune città funzionano solo di notte.)

    Aspettare al semaforo di attraversare la strada è attesa passiva. Il pulsante ci da il pensiero di controllare la situazione e diventiamo più tolleranti all’attesa passando a quella attiva.

    Si può saltare:

    Per esempio nella città di New York ce ne sono centinaia se non migliaia di questi pulsanti e molti sono disattivati. Le persone continuano a schiacciarli anche se senza risultato, perché così pensano di portarsi avanti e attraversare la strada con meno attesa.
  • Altro esempio simile a quello di prima. Conoscete tutti questo pulsante? Vogliamo sempre arrivare più velocemente a destinazione… quindi la velocità conta, sempre!!!

    Negli ascensori c’è anche un altro elemento che fa sì che passiamo dall’attesa passiva a quella attiva… Sapete qual’è? Lo specchio… ci possiamo specchiare e vedere come siamo belli mentre salaiamo o scendiamo…

    Sul web non è tanto diverso, una persona che sta cercando delle informazioni o deve acquistare un prodotto, vuole farlo in modo rapido e senza intoppi.

    Conclusione: le persone odiano aspettare!
  • Ora vediamo in sintesi cosa sono le Web Perf…

    ---
    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.
    ---
  • ---
    Perché è importante che i vostri siti web siano veloci e quali fattori vengono influenzati dalla lentezza?
    ---
  • ---
    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…».
    ---
    Abbiamo la memoria a breve termine limitata: più aspettiamo, più il compito da eseguire risulta difficile.
    L’uomo ha bisogno del sentimento di controllo: l’attesa e l’impossibilità di controllare la situazione genera la frustrazione e l’ansia.
    La lentezza ha un impatto sul brand. Uno studio di Gomez dice che 88% delle persone difficilmente torneranno su un sito web, dopo aver vissuto un’esperienza lenta … quindi queste persone andranno dalla concorrenza.
    Relativo alle prestazioni percepite: approfondite il concetto del contenuto above-the-fold, la tecnica critical CSS e così dette ottimizzazioni del percorso di rendering critico (Critical Rendering Path)…
    Quindi oltre al hardware del device c’è da considerare prima di tutto il nostro «processore» e come funziona, cioè il cervello umano…
    Si può saltare:
    Twitter: time to first tweet; Facebook: news stream; Su un blog: gli articoli…
  • Fattore di…

    Velocità è valore.

    ---
    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…

    Ricerca di Harris Interactive per Tealeaf, 2011 dice che: «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.»
    ---
  • Prometto che questa sarà l’unica GIF animata nella mia presentazione :)
  • Fattore di SEO…

    Ottimizzando la velocità del vostro sito automaticamente migliorate anche SEO perché…

    ---
    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).

    Margaret Kuchler di Akamai Technologies, 2011:
    «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.»
    ---

    Guardatevi su WordPress.tv il talk di Gianni del mese scorso su WordPress e SEO.
  • Fattore di…
    ---
    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

    Harris Interactive (per Skava), 2013:
    «Un terzo (32%) degli utenti lamenta che i siti web e app su mobile sono lenti a caricare.»

    ---

    C’è anche da prendere in considerazione la parte hardware dei dispositivi mobile. Alcuni hanno la quantità di memoria di un Pentium 486 degli anni 90…

    Per esempio, le immagini progressive consumano molti cicli del processore e di conseguenza tirano giù la batteria, come anche i siti pesanti in generale.

    Oltre al hardware e molto più importante, ci sarebbe il fenomeno della latenza di rete (network latency o RTT – Round Trip Time). Quando inseriamo l’indirizzo di un sito web da una connessione 3G o 4G nel browser del nostro dispositivo mobile, la richiesta non va direttamente al server dove sta il nostro sito web ma prima al ripetitore o la torre cellulare più vicina, e poi da lì solamente al server, idem al ritorno, quando una risorsa viene spedita dal server al browser. Es. un’immagine o un file JS/CSS.

    Qui potrei farvi rivedere la GIF di prima :)
  • Frammentazione della dimensione degli schermi Android – Report del 2014 di Open Signal
  • Fattore della…
    ---
    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?

    ---
  • ---
    Alcuni dati, presi dalle ricerche fatte sulle Web Performance
    ---
  • «3 secondi di attesa basterebbero all’80% dei visitatori per decidere di abbandonare un sito web lento.»

    – State of the Union, 2015
  • «Il 60% degli utenti di Internet si aspetta la stessa User Experience sia su mobile che su desktop.»

    – Radware Fastview, 2015
  • «Il 71% delle 1500 persone intervistate, si sente regolarmente infastidito dai siti web lenti.»

    – “Need for Speed,” 1&1 Internet, 2011
  • «Il 33% degli utenti insoddisfatti racconterà agli altri l’esperienza negativa vissuta su un sito web.»

    – Radware Fastview, 2015
  • «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
  • ---
    Potete trovare altri case studies su wpostats.com
    ---

    Questo diciamo era il «Perché» preoccuparsi delle web perf, ora vediamo il «come» individuare i problemi e «cosa» li causa.
  • ---
    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.
    ---

    In poche parole, non serve strafare… ma è ovvio che ogni byte ottimizzato conta!
  • ---
    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…
    ---
  • Io utilizzo per lo più questo tool open source che si chiama WebPageTest.org e ve lo consiglio vivamente.
  • Potete vedere con la frazione di mezzo secondo e anche meno i fotogrammi di come avviene il rendering del vostro sito web e cosa vede una persona per prima cosa sullo schermo.

    Queste sono metriche di User Experience e non dei numeri vanitosi come Load Time o il punteggio di PageSpeed Insights
  • Tutti questi dati sono legati per lo più alle performance percettive e a esperienza utente.

    Questo strumento permette di comparare due siti e vederli caricarsi fianco a fianco. Ottimo per mostrare per esempio a un cliente come è messo in confronto alla sua concorrenza. Si può anche fare il test del vostro sito con connessioni diverse o con browser diversi o da location nel mondo diverse e vedere una comparazione fianco a fianco.

    Torino vince di 800ms (quasi 1 secondo). Tra l’altro, lo sapete che il WordCamp Milano 2016 sarà il 21 e 22 ottobre e ci sono ancora dei biglietti disponibili. Muovetevi a comprarli a 20€ l’uno!

    SE VOLETE SAPERE DI PIÙ SU WEBPAGETEST.ORG, GUARDATE IL VIDEO DEL MIO TALK FATTO IL MESE SCORSO AL MEETUP DEL GRUPPO WEB PERFORMANCE DI TORINO.
  • Vi restituisce un numero che è un po’ una vanity metric, perché non vi mostra bene i dettagli. Però diventa un po’ un’ossessione arrivare a 100%. Io ci riesco con il mio sito web :)

    Vi mostra anche una serie di suggerimenti e link agli approfondimenti. Lo strumento fa un test sintetico sia su schermi piccoli che su quelli grandi. Non si conosce però nulla sulla macchina e le impostazioni di dove avviene realmente questo test.

    Ci sarebbe anche Pingdom Website Speed Test e mostra un po’ più di informazioni, compreso il waterfall e la possibilità di scelta della location.

    Altro tool che vi consiglio e YSlow, potete scaricare un’estensione per Google Chrome.
  • Ci sono anche gli strumenti per gli sviluppatori integrati nel vostro web browser. In questo caso, il browser è Google Chrome e le schede relative alle Web Perf sono Timeline e Network.

    Potete aprire il pannello con alt+cmd+I su Mac e Shift+Ctrl+I sul resto dei sistemi operativi.

    Uno strumento molto potente con la possibilità di analizzare nel dettaglio ogni sito web.

    Per esempio, è comodo per vedere se sul server è già attivo il protocollo HTTP/2, ovviamente il sito web dovrebbe usare un certificato SSL per usufruire di questa nuova tecnologia.

    Se vi interessa, c’è un video di Simone Bordet dal Meetup di Turin Web Performance Group (meetup che organizzo io), che spiega bene tutti i vantaggi di questa tecnologia.

    Controllate con il vostro fornitore di hosting se è già attivo sulle loro macchine.
  • Quelli di prima erano tutti test sintetici, questo invece è RUM e sta per Real User Monitoring.

    A differenza dei test sintetici, che sono soltanto una simulazione, questo test mostra dati reali dei visitatori del vostro sito con le loro condizioni reali di connessione, location, OS, browser e dispositivi in uso.

    Dati che sono da monitorare e fare comparazione con i test sintetici. Inoltre, in GA si possono fare report incrociati e verificare per esempio come le cattive web perf siano legate al bounce rate.
  • ---
    – 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)
    – e altri…
    ---

    WordPress 4.6 to Drop Open Sans in the Admin in Favor of System Fonts.

    Si può saltare:

    Un file CSS esterno blocca il rendering degli elementi nel DOM dopo di lui.

    Un JS esterno blocca il parsing e la costruzione del DOM.
  • Come vedete, le immagini sono l’offensiva maggiore delle Web Perf e fanno oltre il 60% di tutte le risorse che compongono i siti web su Internet.

    Quello invece è il peso di un sito medio oggi, quasi 2 mega e mezzo! Pazzesco! Se pensare che 5-6 anni fa era sotto 1 mega.
  • Penso che con questo andamento e con l’utilizzo di alcuni temi WordPress, quelli «tutto-fare», ci arriveremo molto in fretta a uno scenario del genere… :)
  • ---
    Sfatiamo qualche mito sulle ottimizzazioni delle Web Performance?
    ---
  • ---
    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.

    Steve Souders dice che:
    «80-90% del tempo degli utenti, che aspettano le pagine web che si caricano, viene speso nel front-end. Cominciate da lì.»
    ---

    Si può saltare:
    Non è come su un PC che aggiungendo altra memoria RAM diventa più veloce…
  • Quest grafico mostra un test fatto sul sito etsy.com

    ---
    «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
    ---

    Quindi anche se in parte la velocità della connessione fa, ad un certo punto raggiunge quasi un plateau.
  • ---
    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.

    ---

    Quindi dovrebbe essere il compito di tutte le persone coinvolte in un team web, a partire dalla strategia dei contenuti e passando dal design e codice…

    Dopo aver visto il «cosa» causa i problemi di web perf, vediamo ora invece «come» risolverli…
  • Di conseguenza queste sono anche le cause della cattive Web Performance…
    ---
    – 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…

    ---

    Aggiungo e vi parlo di nuovo delle immagini che sono l’offensiva maggiore, ma anche la cosa più facile da ottimizzare…

    I signori di Dexecure hanno analizzato 4.3 milioni di immagini JPEG dai 500,000 siti top in httparchive.org, per un totale di 195GB di dati.

    Hanno trovato che il 38.9% di quelle immagini aveva dei metadati. In queste immagini, i metadati occupavano nella media il 15.8% del peso totale dell’immagine!

    Usate i formati file giusti e ottimizzate oltre Photoshop con strumenti come ImageOptim (su Mac).
  • «Finalmente!», direte voi? :)

    ---
    Per chi sviluppa i temi e plugin si applicano le regole e le tecniche descritte prima.

    Per chi non sviluppa niente 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…
    ---
  • ---
    – W3 Total Cache
    – WP Rocket (Premium)
    – Scripts To Footer
    – Plugin Organizer
    – EWWW Image Optimizer
    – WP Lazysizes
    – Plugin Performance Profiler
    ---
  • ---
    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 che abbiamo visto prima

    «Innanzitutto, noi crediamo che la velocità è più di una caratteristica. La velocità è la caratteristica più importante.»
    – Fred Wilson, Union Square Ventures

    ---
  • Quindi, parlando sempre di cultura, a volte basta un libro per cambiare il vostro mind-set e in confronto a una conferenza, dove magari c’è una persona che vi legge cosa c’è scritto in un libro, vale la pena di spendere 20/30€ e leggerlo da soli, al posto di spenderne magari 200/300€.

    Invece i workshop penso che sono molto meglio, almeno toccate con mano e capite davvero come fare.

    Questi sono i libri che mi hanno dato molto…
  • Tammy Everts è direttore dei contenuti in SOASTA

    Libro culturale sull’importanza delle web perf nel mondo ecommerce.
  • Libro tecnico su come usare WebPageTest.org che parte semplice e arriva ai capitoli molto complessi.
  • Lara hogan è Engineering Director at Etsy.com

    Ottimo libro culturale e per designer e sviluppatori, ma anche per persone che operano nel web in generale.
  • Scott Jehl è Web Designer e Developer in Filamentgroup

    Ottimo libro per chi fa front-end e responsive web design.
  • Ci sono anche una serie di blog che parlano solo di Web Performance…
    ---
    – Web Performance Today
    – O'Reilly Performance
    – Planet Performance
    – Catchpoint’s Blog
    – Steve Souders
    – Ilya Grigorik
    – Tim Kadlec
    ---
  • ---
    – Meetup del Turin Web Performance Group
    – Gruppo Web Performance su Slack (in inglese)
    – Gruppo Web Performance Italia su Facebook
    ---

    Venite a trovarci, il meetup è aperto a tutti e il prossimo sarà il 27 ottobre alle 19:30 in Via Pietro Micca 12.
  • 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!
  • ---
    Grazie per l’attenzione e di essere venuti qui oggi!

    Ora tutti al lavoro per rendere il web più veloce ;)
    ---

    I miei riferimenti sono questi e condividerò queste slide entro domani su Meetup, Facebook e altri nostri canali.

    Il video sarà disponibile entro qualche giorno su WordPress.tv

    Se avete delle domande (e spero che ne avete tante) venite a farmele.

    Ora lascio la parola 5 minuti a Alice di DNSHosting, il nostro sponsor che ci sostiene da sempre. Facciamo un applauso per dare loro il benvenuto e ringraziarli.
  • 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

    ×