@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

@sgelob | www.olegs.be

Come un browser fa il rendering dei contenuti

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

@sgelob | www.olegs.be

Come un browser fa il rendering dei contenuti

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

@sgelob | www.olegs.be

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.

@sgelob | www.olegs.be

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…

@sgelob | www.olegs.be

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.

@sgelob | www.olegs.be

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.

@sgelob | www.olegs.be

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

@sgelob | www.olegs.be

@sgelob | www.olegs.be

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

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

@sgelob | www.olegs.be

@sgelob | www.olegs.be

Filmstrip

@sgelob | www.olegs.be

Video

@sgelob | www.olegs.be

Visual Comparison

@sgelob | www.olegs.be

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

@sgelob | www.olegs.be

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

@sgelob | www.olegs.be

Altri tool per fare test sintetici

YSlowChrome DevToolsPingdom Website Speed TestYellow Lab Toolssitespeed.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)

@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

Leggete i 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

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

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

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

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

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

@sgelob | www.olegs.be

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

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