Eseguire test sintetici delle Web Performance con webpagetest.org

@sgelob | www.olegs.be

Eseguire test sintetici delle Web Performance con WebPageTest.org

Olegs Belousovs | Web Performance & UX

Turin Web Performance Group – 27 settembre 2016


Come un browser fa il rendering dei contenuti

Designing for Performance di Lara Callender Hogan | http://bit.ly/2ddWpx5

http://bit.ly/2ddWpx5


Come un browser fa il rendering dei contenuti

Analisi della performance del percorso di rendering critico | http://bit.ly/1pgxuec

http://bit.ly/1pgxuec


Ottimizzazione del percorso di rendering criticoLe performance percepite sono la vera velocità e quella che un utente reale percepisce durante la visita di un sito web.

Non importa tanto il tempo che ci mettono i vostri siti web a caricarsi in totale, quanto la velocità con la quale i vostri visitatori iniziano a vedere i contenuti sullo schermo e possono cominciare a interagire.

Se la prima cosa che un utente vede per i primi secondi è una pagina bianca, l’esperienza utente sarà pessima e alcune persone potrebbero pensare che non sta succedendo nulla o che il sito non funziona e quindi abbandonarlo.


Differenza tra Synthetic Testing e RUMSynthetic Testing è un controllo simulato dello stato di salute del vostro sito web. Permette di misurare una serie di metriche come response time, load time, numero di risorse che compongono una pagina e le dimensioni, tutto questo simulando diversi tipi di connessioni (3G, 4G, ADSL, fibra etc…). Potete testare anche un sito web in produzione, una volta che va online.

RUM sta per real user measurement ed è la pratica per misurare l’esperienza degli utenti reali, mentre navigano attraverso un sito web. Gli esseri umani hanno molte differenze dalle macchine e queste differenze sono ciò che rende RUM diverso dal testing e monitoraggio sintetico. Con RUM potete monitorare come vanno le performance nel tempo, gli ambienti dei vostri utenti reali, come si comportano gli script di terze parti, etc…


Differenza tra PageSpeed Insights e WebPageTest.orgPageSpeed Insights di Google vi mostra solo un numero e quindi una metrica vanitosa che non vi dice nulla sull’esperienza dell’utente reale. Spesso leggo online «Come faccio ad avere 100 su 100 su PageSpeed?» o cose simili…

Con WebPageTest.org, riusciamo a capire meglio come una persona sente la velocità del nostro sito web in diverse condizioni di connessione e utilizzando vari browser, attraverso gli strumenti come Waterfall, Filmstrip e Video.


Cos’è WebPageTest.org

Fonte: www.webpagetest.org/about

WebPageTest è un progetto open source che è principalmente sviluppato e supportato da Google come parte dei loro sforzi per rendere il web più veloce.

WebPageTest è uno strumento che è stato originariamente sviluppato da AOL per uso interno ed era stato open sourced nel 2008 sotto licenza BSD. La piattaforma è in fase di sviluppo attivo su GitHub ed è anche disponibile per il download, se desiderate installare un’istanza privata.

La versione online su www.webpagetest.org è gestita per il beneficio della comunità di Web Performance, con diverse aziende e gli individui che forniscono le infrastrutture di test in tutto il mondo.

https://www.webpagetest.org/about


Synthetic Testing con WebPageTest.orgPrima dovete misurare le prestazioni attuali del vostro sito, 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.

Utilizzate WebPageTest quando volete con una connessione e un browser. Si può condividere un link al test e assicurarsi che sono tutti sulla stessa pagina.

1.Scoprire quanto è veloce una pagina;

2.Trovare il modo di renderla più veloce.

@sgelob | www.olegs.beda Waterfalls 101 di Web Performance Today http://bit.ly/1nT9yLK

http://bit.ly/1nT9yLK


Filmstrip


Video


Visual Comparison


WebPageTest.org Tricks

Documentazione (in inglese): http://bit.ly/2d6pAl2

● Controlla la disponibilità delle risorse http://bit.ly/2cwFlhk● Generare un Waterfall personalizzato● Elencare tutte le immagini http://bit.ly/2d2yOBd● Flow View● Autenticazione e manipolazione del DOM● Blocco delle richieste

http://bit.ly/2d6pAl2

http://bit.ly/2cwFlhk

http://bit.ly/2d2yOBd


Utilizzi avanzati di WebPageTest.org● RESTful APIs http://bit.ly/2dyBW6J● Continuous Integration http://bit.ly/2cHotI2● Private Instances http://bit.ly/2dfN6ZY

http://bit.ly/2dyBW6J

http://bit.ly/2cHotI2

http://bit.ly/2dfN6ZY


Altri tool per fare test sintetici

YSlowChrome DevToolsPingdom Website Speed TestYellow Lab Toolssitespeed.io

http://yslow.org/

https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/?hl=en

https://tools.pingdom.com/

http://yellowlab.tools/

https://www.sitespeed.io/

@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 non utilizzate nel front-end● Video che si caricano in automatico● Script di terze parti non raggiungibili (SPOF)


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…


Leggete i libri sulle Web Performance


Time Is Money

di Tammy Everts | http://amzn.to/2c0vBBX

http://amzn.to/2c0vBBX


Using WebPageTest

di Rick Viscomi, A. Davies e M. Duran | http://amzn.to/2cc0GiF

http://amzn.to/2cc0GiF


Designing for Performance

di Lara Callender Hogan | http://amzn.to/2cmxxTo

http://amzn.to/2cmxxTo


Responsible Responsive Design

di Scott Jehl | http://amzn.to/2ckcl1B

http://amzn.to/2ckcl1B


Iscrivetevi ai 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

http://bit.ly/2cvlobR

http://oreil.ly/2cc1aWi

http://bit.ly/2caZny7

http://bit.ly/2cvlq3p

http://bit.ly/2cEOXLv

http://bit.ly/2cHVhTI

http://bit.ly/2c0xsXk


Guardate i video corsi sulle Web Performance

Gratuiti● Website Performance Optimization su Udacity bit.ly/1XLxEq4● Browser Rendering Optimization su Udacity bit.ly/1GpARFj

A pagamento● High Speed UX con Steve Souders oreil.ly/2dyE52l● Introduction to WPO con Kent Alstad oreil.ly/2d5UOXN

http://bit.ly/1XLxEq4

http://bit.ly/1GpARFj

http://oreil.ly/2dyE52l

http://oreil.ly/2d5UOXN


Partecipate alla comunità delle Web Performance● Meetup Turin Web Performance Group: bit.ly/29T4pQt● Gruppo Web Perf su Slack (in inglese): bit.ly/1Q6Z7QT● Gruppo Web Perf Italia su Facebook: bit.ly/29MRgHA

http://bit.ly/29T4pQt

http://bit.ly/1Q6Z7QT

http://bit.ly/29MRgHA


Leggete e studiate i case studies su wpostats.comCase studies ed esperimenti che dimostrando l’impatto delle ottimizzazioni delle web performance (WPO) sulla user experience e metriche di business.

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

— Ricerca di Harris Interactive per Tealeaf, 2011

http://www.webperformancetoday.com/2011/10/21/phone-rage-how-people-react-to-slow-mobile-sites/

@sgelob | www.olegs.be@sgelob | www.olegs.be@sgelob | www.olegs.be

Eseguire test sintetici delle Web Performance con webpagetest.org

Presentations & Public Speaking

Transcript of Eseguire test sintetici delle Web Performance con webpagetest.org