wpo extended

Web Performance Optimization

Relatore: Steve Souders, Google

Due libri

High performance Web Sites

Even faster Web Sites

O'Reilly

Prima conferenza a tema: Velocity 2009 (San Josè, CA)

Web Performance Optimization

La velocità è una delle chiavi per il successo di un sito/applicazione

Firefox: velocizzare la landing page di 2 secondi ha significato aumentare del 15% i download (milioni in più)

Yahoo: un rallentamento di 400ms ha causato 5-9% di calo del traffico Shopzilla: 16 mesi (!) di re-engineering hanno velocizzato il sito di 5 secondi

ha aumentato il convertion rate del 7-12% e ridotto i costi di servizio Dal 2009, la velocità è uno dei parametri che google usa per il page ranking,

anche se (ancora?) di poco peso (1%) Prove sperimentiali hanno mostrato come il tasso di abbandono di un sito

(distinct queries, query refinements, click ecc), sia lineare rispetto al ritardo introdotto

Nonostante tutto, il tema è ancora “giovane” e il lavoro complesso, ma dopo il periodo d'oro del SEO, è arrivato il tempo del WPO

Piccolo inciso: in Matrix, i requisiti marketing sono sempre stati focalizzati solo sul peso pagina, che è solo uno degli aspetti del problema

1) Fast by default

pattern e best practices nativi nei linguaggi e nei framework.

Es:

- jquery 1.4 ha lavorato sulle performance riducendo la complessità interna e usando Google Closure Compiler per ridurre del 13% il peso del js

- Nel 2009 anche su rails hanno lavorato sulle performance

(slogan: making rails even faster by default)

Web Performance OptimizationPrevisioni sul futuro: top 10

2) Visibility into the browser

Oltre a tool come Yslow, nasceranno nuovi tool per profilare tutte le fasi, compreso il rendering e l'esecuzione di js. Per anticipare il tema rispetto alla fase di test, saranno sempre più integrati con IDE e framework

Es:

google speedtracer

Dynatrace

Entrambi profilano una pagina in modo completo: rendering del dom+css, esecuzione javascript eccetera



\


Google speed tracer

(nativo nella Google Chrome Developer Channel)

Dynatrace

(IE plugin)


3) Consolidamento

Al momento, gli sforzi e i progetti riguardo le performance, sono sempre stati frammentari. In futuro, si vedranno comparire tool che combinano

– Js debugging

– Js profiling

– Dom inspection

– Analisi di rete

Nasceranno nuove metriche e metodologie e il tutto sarà integrato in tool sempre più ricchi

A livello di mercato, il consolidamento si avrà con l'assorbimento delle piccole aziende molto focalizzate sul tema da parte di grandi aziende di consulenza


4) TCP, HTTP

I protocolli di rete hanno bisogno di una svecchiata, soprattutto l'http:

- Una connessione per richiesta

- Comunicazione monodirezionale

- Header ridondanti e non compressi (problema soprattutto per applicazioni ajax con comunicazione spinta, es: chat)

Due esempi di soluzione: SPDY, HTML5 WebSocket


SPDY• Esperimento pilota di Google, parte dei progetti

Chromium

• Layer aggiuntivo su cui si appoggia l'HTTP

• Hanno creato

– Nuovo server SPDY enabled

– Versione di modificata di Chrome

• Benchmark sui 100 topsites fatti girare in laboratorio

• Tempi di download delle risorse di un sito mediamente dimezzati


HTML5 WebSocket

• Un nuovo protocollo (ws://)• Un canale di comunicazione bidirezionale,

molto simile alle tradizionali socket tcp

• Un set di API javascript nei browser che supportano HTML5


HTML5 WebSocket

codice client var ws = new WebSocket(“ws://game.example.com:12010/updates”);

ws.onopen = function () {

alert(“Connection open ...”);

}

ws.onclose = function () {

alert(“Connection closed.”);

}

ws.onmessage = function () {

alert( “Received Message: ” + evt.data);

}


HTML5 WebSocket

• Applicazioni fortemente ajax (giochi, Chat, flussi di borsa eccetera), fanno moltissime request molto piccole. Gli header rappresentano la maggior parte del traffico. Con WebSocket si può tagliare tutto questo overhead

• E lato server? Ci sono già application server che implementano le specifiche, ad esempio Jetty (eclipse)

– Non si estendono più Servlet tradizionali, ma WebSocketServlet


public class WebSocketChatServlet extends WebSocketServlet{

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException ,IOException {

getServletContext().getNamedDispatcher("default").forward(request,response);

}

protected WebSocket doWebSocketConnect(HttpServletRequest request, String protocol){

return new ChatWebSocket();

}


class ChatWebSocket implements WebSocket {

Outbound _outbound;

public void onConnect(Outbound outbound){

_outbound=outbound;

_members.add(this);

}

public void onMessage(byte frame, byte[] data,int offset, int length) {}

public void onMessage(byte frame, String data){

for (ChatWebSocket member : _members){

try{

member._outbound.sendMessage(frame,data);

}

catch(IOException e) {Log.warn(e);}

}

}

public void onDisconnect() {

_members.remove(this);

}

}

• }



• Si definiranno nuovi standard per la misura delle performance, per una preview:

W3C: Web Timing Working Drafthttp://dev.w3.org/2006/webapi/WebTiming/

interface NavigationTiming { .... // timing generale sulla navigazione

readonly attribute unsigned longlong navigationStart;

readonly attribute unsigned longlong lastUnload;

…}

interface ResourceTiming { .... // timing relativo ad ogni risorsa caricata

readonly attribute unsigned longlong fetchStart;

readonly attribute unsigned longlong fetchEnd;

…}

http://dev.w3.org/2006/webapi/WebTiming/

• Organizzazione aziendale: assisteremo alla nascita di nuove aziende o gruppi che forniranno certificazioni, training e proporranno nuovi standard e modelli di cooperazione. Ad esempio, sta nascendo l'esigenza di condividere informazioni sul problema degli adv, colpevoli di gran parte della lentezza dei siti – questo in modo assolutamente informale e attraverso Souders stesso (via mail)



• Disponibilità di una grande mole di dati:

– IPA – Internet Performance Archive?

• Così come http://www.archive.org mantiene lo storico di siti e altro, IPA dovrebbe mantenere anche informazioni relative al timing, in modo da avere dati ed esempi reali da analizzare

http://www.archive.org/


• Go Green

• Da non molto tempo si sta calcolando l'impronta ecologica del web

• Il passo successivo sarà dato dalla correlazione tra performance e riduzione del consumo di energia delle infrastrutture e quindi dell'impronta complessiva


• Mobile: è un campo ancora inesplorato. Mancano completamente best practice, metriche eccetera. Ci sarà grande fermento

• Performance e mercato: le performance saranno sempre più importanti sia per gli utenti che per i vendor – sia su web , che per i nuovi device

Cliccate per modificare il formato del testo della struttura

Secondo livello struttura Terzo

livello struttura

Quarto livello struttura

Quinto livello struttura

Sesto livello struttura

Settimo livello struttura

Ottavo livello struttura

Nono livello strutturaClick to edit

top 10 WPO predictions

flickr.com/photos/eole/380316678/

10. fast-by-default9. visibility into the browser8. consolidation7. TCP, HTTP6. standards5. industry organizations4. data3. green2. mobile1. speed’s a differentiator

Web Performance OptimizationP3PC: Performance of Third Party Content

Anche se gli addetti ai lavori spergiurano sul contrario, “Ads, widgets, and analytics are a major cause for slow web sites” (Steve Souders, Google)

Virgilio trabocca di codici di tracciamento e ads

Negli ultimi 5 anni, le pagine sono diventate mediamente più veloci, ma il peso medio di 3PC è passato da ¼ a quasi ½

main page

3rd party content

2005 2010

performance badness

Web Performance OptimizationP3PC: Performance of Third Party Content

•In generale, possono aiutare tecniche di loading “lazy” degli script e wrapping di widget e snippet in iframe (cosa però non sempre possibile per la presenza di document.write o del floating del widget - es: virgilio bottomtoolbar )•Proposto (gennaio 2010, Velocity Summit: http://www.stevesouders.com/blog/2010/02/17/performance-of-3rd-party-content/), nuovo tag html <frag> I browser valuteranno il codice senza bloccare il rendering – a differenza dei nuovi iframe dell'HTML 5, questo tag “will degrade gracefully for older browsers”

Web Performance Optimizationmisc

• http://stevesouders.com/p3pc/index.phpP3PC is a project focused on analyzing the performance of 3rd party content. The goal is to find the key wins to evangelize to make 3rd party content faster

– Il sito permette di calcolare i tempi di download dei principali widget sul proprio browser

• http://www.browserscope.org/Browserscope is a community-driven project for profiling web browsers

– Esegue una serie di test standar sul browser con il quale si accede e assegna un punteggio. Pare che il top sia Chrome... a me, con chrome su linux, il sito è crashato :-D

• Google Webmaster ToolsIl lab ha una funzionalità (sperimentale), di analisi delle prestazioni – plugin di firefox (nulla per chrome!) che però a me, sotto linux, non funziona :-)

• http://www.webpagetest.org/Test delle pagine e confronto con portali famosi – sarò sfortunato o troppo di nicchia, ma a me non funziona :-)

http://stevesouders.com/p3pc/index.php

http://www.browserscope.org/

http://www.webpagetest.org/

Web Performance OptimizationWeb Performance avoids SPOF

• Fino a 5 anni fa si pensava solamente ad ottimizzazioni server side

• Da allora, si è scoperto che l'80% del tempo utente è “consumato” da elaborazioni client side e dal rendering delle risorse

• Un esempio importante: tutti i browser (applicazioni single threaded), bloccano il rendering e il downloading (i browser moderni, almeno non il downloading), di quanto viene dopo un js esterno, mentre questo viene caricato. Diventa quindi un single point of failure (un esempio sul canale viaggi)

• Per questo motivo il pattern più importante è probabilmente: “caricare tutti i js esterni in modo asincrono”

• Nota: per anni abbiamo lottato con il peso pagina come unica specifica sulle performance

Altro nel post seguente (e posto correlati)http://www.stevesouders.com/blog/2010/06/01/frontend-spof/


• There are six main techniques for downloading scripts without blocking:

• XHR Eval – Download the script via XHR and eval() the responseText.

• XHR Injection – Download the script via XHR and inject it into the page by creating a script element and setting its text property to the responseText.

• Script in Iframe – Wrap your script in an HTML page and download it as an iframe.

• Script DOM Element – Create a script element and set its src property to the script’s URL.

• Script Defer – Add the script tag’s defer attribute. This used to only work in IE, but is now in Firefox 3.1.

• document.write Script Tag – Write the <script src=""> HTML into the page using document.write. This only loads script without blocking in IE.

WPO

Credits: Steve Souders, Google http://www.stevesouders.com/

http://www.stevesoudersstevesouders.com/blog/2010/05/07/wpo-web-performance-optimization/

http://www.stevesouders.com/

Dove va il mondo?

• The State of the Internet Operating Systemby Tim O'Reilly

– http://radar.oreilly.com/2010/03/state-of-internet-operating-system.html

• Web 2.0 Expo SF 2010: Tim O'Reilly, "State of the Internet Operating System"

– http://www.youtube.com/watch?v=hAau6W--iMo

wpo extended

Technology

il peso

il successo

il tasso

compreso il

focalizzate sul tema

e lesecuzione

e ridotto

il page ranking