Every millisecond counts: Techniques, strategies, and tools for a Web Performance Jedi Wannabe -...

Every millisecond counts: Techniques, strategies, and tools for a Web Performance Jedi Wannabe

Marco CasarioCTO Comtaste - [email protected]

Friday, March 27, 15

mailto:[email protected]


Chi sono

Www.Marcocasario.Com 2

Marco Casario

CTO Comtaste

www.linkedin.com/in/marcocasario


I miei ul?mi libri



I miei corsi


training.codemotion.it


Lessons learned ...

DISCLAIMER.




Previously....


Browser’s rendering flow



How to op?mize

The Speed Index


https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index






How to op?mize


The Speed Index is the "area above the curve" calculated in ms and using 0.0-1.0

for the range of visually complete.


How to op?mize


http://www.webpagetest.org/video/compare.php?tests=140410_4Y_KVY-r:1-c:0




How to op?mize

What does it happen when there is a gap in the bandwidth

chart ?



How to op?mize

Bandwidth + Latency = Performance



How to op?mize

Focus on:

the speed index valuethe total load time

the render timethe bandwidth



Metrics & Context


Slow performance


credit to: http://www.webperformancetoday.com/2011/11/23/case-study-slow-page-load-mobile-business-metrics/


Red Label ?!?!


credit to: http://searchengineland.com/google-testing-red-slow-label-search-results-slower-sites-215483

Google Search Results

Experimental


http://searchengineland.com/google-testing-red-slow-label-search-results-slower-sites-215483




Slow performance



Quali sono le metriche


Response Time

Start Render

Above the Fold

Load Time

Time to Interact

Tempo di una HTTP requestPrimi dati caricati e inizio renderingPrimi dati da mostrare senza usare scrollbar DOMContentLoaded event loadedCall-to-Action per l’utente


Percezione


Percezione della velocità e delle perfomance da parte degli utenti.


Percezione


Gli utenti vogliono sapere di avere il

controllo.


Percezione


L’apertura delle porte del treno è

regolata dal guidatore, non

dal passeggero!


Percezione


http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html






Be in control


Gli utenti vogliono sapere di avere il controllo.

Perchè riduce lo stress.


Be in control


Ecco lo stress degli utenti.credit to: Jakob Nielsen Study


Be in control


It’s all about Perception.


La soglia da superare


La barriera dei 1000 msperchè non di meno o di più?


Definire il contesto

Come percepiamo il tempo


Quindi la nostra web app deve stare sui 1000ms


Performance e Percezione


Percezione delle Performance è funzione di:

Performance Attese UX & UI

Performance Reali( )Friday, March 27, 15

UX & UI


UX & UI

E’ questo l’aspetto su cui andare a ragionare per

ottimizzare le performance


UX & UI


Chi è responsabile della UX & UI ?

Backend DevelopersFrontend Developers

Project Managers Information ArchitectUX & UI Designers


UX & UI


Tutti.


UX & UI


DOMContentLoaded: 10.42s


UX & UI





Attenzione.Anche essere troppo veloci

potrebbe creare problemi agli utenti.



UX & UI


Blogger: processo troppo breve.



Attenzione.Le aspettative dell’utente sono

diverse dalle performance tecniche.




Esperienza Utente è funzione di:


( )Performance PercepiteCompletamento Task


OVmizzare la Latenza


1000ms

Obiettivo: 1000ms

1. Efficienza del traffico sul network

2. Critical rendering path



Qual’è il boZleneck



Bandwidth o Loading Time

Ottimizzare Traffico Network

Non è la Bandwidth il nostro nemico.

Sono i tempi di attesa che il network si prende per caricare le

risorse



Bandwidth o Loading Time

Ciclo di vita di una HTTP request



How to op?mize


600 ms of time has already been used up by network overhead: a DNS lookup to resolve the hostname (e.g. google.com) to an IP address, a

network roundtrip to perform the TCP handshake, and finally a full network roundtrip to send the HTTP request. This leaves us with just 400 ms!


Limi? Protocollo HTTP 1.1



Cosa fare


Loading time in blu


Cosa fare


Ridurre gli RTT (Round Trip Time)Usare risorse caricate da CDNRidurre i bytes caricati non necessariUsare tecniche di caching content



Cosa fare


Eliminare i redirectsRidurre i DNS lookupComprimere risorse con GZip



Cosa fare

E le immagini ?



Cosa fare

E le immagini ?


Comprimi.Sprite Image.Icon Fonts.Strategia per le responsive image.Server Side Responsive.


Cosa fare

Cos’è il Critical Rendering Path



Cosa fare

Cos’è il Critical Rendering Path

<!DOCTYPE html><html><head><meta charset="UTF-‐8"><title>Title of the document</title></head>

<body>Content of the document......</body>

</html>



Cosa fare

<!DOCTYPE html><html><head><meta charset="UTF-‐8"><title>Title of the document</title></head>


</html>


Pagina Bianca.Vengono inviati i primi datiNon c’è nessun rendering (no CSS)


Cosa fare

<!DOCTYPE html><html><head><meta charset="UTF-‐8"><title>Title of the document</title>

<link rel="stylesheet" href="styles.css"></head>


</html>


Pagina Bianca.DOM caricato. In attesa dei CSS


Cosa fare




</html>


Pagina Bianca.Primo pacchetto di dati CSS caricati. Waiting.

h1 { color:blue; font-‐family:verdana; font-‐size:300%;}


Cosa fare




</html>


Pagina Bianca.Caricamento CSS terminato. Il browser può iniziare il rendering.



Cosa fare




</html>


Primi elementi di pagina caricati.Caricamento CSS terminato. Start rendering.



Cosa fare

Questo processo va sotto il nome di Critical Rendering Path



Cosa fareCome trovare il Critical Rendering

Path?


DevTools: AUDIT Individua i CSS da dichiarare inline


Cosa farePageSpeed lo fa per voi!



Javascript e Cri?cal Rendering Path

E Javascript ?

JavaScript can change all the HTML elements in the pageJavaScript can change all the HTML attributes in the page

JavaScript can change all the CSS styles in the pageJavaScript can remove existing HTML elements and attributes

JavaScript can add new HTML elements and attributesJavaScript can react to all existing HTML events in the page

JavaScript can create new HTML events in the page



Javascript e Cri?cal Rendering Path

<script>

document.getElementById("demo").innerHTML = "Hello World!";

document.getElementById("p2").style.color = "blue";

</script>


Javascript può bloccare la costruzione del DOM

E può bloccare i CSS


Third-‐party calls



Third-‐party libraries



Fourth-‐party libraries


4th-party calls ?? WTF ?!?!

<iframe src=”https://secure.img-cdn.mediaplex.com/0/932/home_page.html?Home=0 &mpuid=Wednesday, July 13, 2011 at 16:49:10 EDT” HEIGHT=”1″ WIDTH=”1″

FRAMEBORDER=”0″ ></iframe>

Questa chiamata si porta dietro una cascata di chiamate ad altre librerie e risorse di terze parti (non direttamente autorizzate da voi).




Aumento del peso della paginaAumento numero delle connessioniAggiunta di latenzaCambiamenti di comportamento senza avvisiPossono compromettere la user security/privacy

Aumentano anche le probabilità di un Point of Failure




Detects likely third-party SPOF as you browse and allows you to Simulate 3rd party resources

being unavailable.

SPOF-O-Matic

Chrome Extension




Se la libreria caricata non interagisce con nessun elemento

della vostra pagina, considerate di caricarla all’interno di un IFRAME.

In questo modo il caricamento sarà asincrono.




Tieni le 3rd party calls fuori dalla dichiarazione dell’<head>

Fuori dall’Above the fold


BEST PRACTICES


Best Prac?ces#1 Diminuisci il RTT



Best Prac?ces#2 Carica prima il contenuto e il CTA poi gli elementi di navigazione


Caricamento elementi di navigazione Contenuto


Best Prac?ces#3 Evitare Popup, overlay o Install App spam che bloccano la pagina



Best Prac?ces#4 Studia il waterfall delle network activities per capire il problema


Time to First Byte

DNS Lookup

TCP Connection


Best Prac?ces#5 Web Performance API


Navigation Timing

var perfData = window.performance.timing; var pageLoadTime = perfData.loadEventEnd -‐ perfData.navigationStart;

var connectTime = perfData.responseEnd -‐ perfData.requestStart;

var SSLTime = perfData.connectEnd -‐ perfData.secureConnectionStart;

Tempo totale caricamento pagina

Tempo totale request response

Tempo totale per connessione SSL




Navigation Timing

Calcolo del tempo totale a caricare tutte le risorse di una pagina (css, js, img..)




Navigation Timing

Tempo impiegato a caricare le 10 immagini più lente caricate dalla pagina


Best Prac?ces#6 Smart Caching strategy


Aggiungere il timestamp all’url, creato dinamicamente dal server, ogni volta che

viene fatto nuovo update sulla pagina.

Se non viene fatto nessun update, il timestamp, e quindi l’url, sarà cachato


Best Prac?ces#7 Gestione delle Ads


Togliere le Ads dal markup di pagina altrimenti bloccano il rendering.

Inserire le ads in un IFRAME per sfruttare il loading parallelo

Attenzione a come alcuni browser gestiscono l’history degli IFRAME


Best Prac?ces#8 Evitare i movimenti di contenuto durante i caricamenti asincroni


A volte caricando tutti i contenuti in maniera asincrona la pagina ha dei

movimenti fastidiosi perchè sposta gli elementi una volta che sono caricati.

Gestite con dei placeholder gli spazi che poi andranno riempiti dal contenuto


Best Prac?ces#9 Ottimizzare il Critical Rendering Path


•Riduci il numero di requests•Rimuovi il JS che blocca il rendering (3rd party, analytics, plugins..) •I CSS e il JS che serve per l’ATF scrivilo inline

HTML è parsato incrementalmente.Il rendering è bloccato dai CSS.


Best Prac?ces#9 Ottimizzare il Critical Rendering Path


•Riduci i blocchi di codice monolitici •La maggior parte dei siti usano il 20% delle dichiarazioni CSS•Usa una strategia di cache intelligente

HTML è parsato incrementalmente.Il rendering è bloccato dai CSS.


So_ware Latency

<meta name="viewport" content="user-‐scalable=no" />


Esegue il tap event immediatamente, senza aspettare circa 300ms(ma disabilita il pinch to zoom)

#10 Software Latency


An?cipare l’utente

<link rel="dns-‐prefetch" href="//host_name_to_prefetch.com">


Pre-risolve i nomi di dominio prima che un utente provi a cliccare su un link.

#11 Predire il futuro

Funziona sulla maggior parte dei browser


http://the_worlds_best_vendor.com/




Every millisecond counts: Techniques, strategies, and tools for a Web Performance Jedi Wannabe

Marco CasarioCTO Comtaste - [email protected]




Every millisecond counts: Techniques, strategies, and tools for a Web Performance Jedi Wannabe -...

Technology

Transcript of Every millisecond counts: Techniques, strategies, and tools for a Web Performance Jedi Wannabe -...