Web Performance Optimization <ul><li>Relatore: Steve Souders, Google </li></ul><ul><li>Due libri </li></ul><ul><li>High pe...
Web Performance Optimization <ul><li>La velocità è una delle chiavi per il successo di un sito/applicazione </li></ul><ul>...
 
<ul><li>1) Fast by default </li></ul><ul><li>pattern e best practices nativi nei linguaggi e nei framework.  </li></ul><ul...
Web Performance Optimization Previsioni sul futuro: top 10
<ul><li>2) Visibility into the browser </li></ul><ul><li>Oltre a tool come Yslow, nasceranno nuovi tool per profilare tutt...
 Web Performance Optimization Previsioni sul futuro: top 10 Google speed tracer (nativo  nella Google Chrome Developer Cha...
<ul><li>Dynatrace  </li></ul><ul><li>(IE plugin) </li></ul>Web Performance Optimization Previsioni sul futuro: top 10
<ul><li>3) Consolidamento </li></ul><ul><li>Al momento, gli sforzi e i progetti riguardo le performance, sono sempre stati...
<ul><li>4) TCP, HTTP </li></ul><ul><li>I protocolli di rete hanno bisogno di una svecchiata, soprattutto l'http: </li></ul...
<ul><li>SPDY </li></ul><ul><li>Esperimento pilota di Google, parte dei progetti Chromium </li></ul><ul><li>Layer aggiuntiv...
<ul><li>HTML5 WebSocket </li></ul><ul><li>Un nuovo protocollo  (ws://) </li></ul><ul><li>Un canale di comunicazione bidire...
<ul><li>HTML5 WebSocket </li></ul><ul><li>codice client  </li></ul><ul><li>var ws = new WebSocket(“ws://game.example.com:1...
<ul><li>HTML5 WebSocket </li></ul><ul><li>Applicazioni fortemente ajax (giochi, Chat, flussi di borsa eccetera), fanno mol...
<ul><li>public class WebSocketChatServlet extends WebSocketServlet{ </li></ul><ul><li>protected void doGet(HttpServletRequ...
<ul><li>class ChatWebSocket implements WebSocket  { </li></ul><ul><li>Outbound _outbound; </li></ul><ul><li>public void on...
Web Performance Optimization Previsioni sul futuro: top 10 <ul><li>Si definiranno nuovi standard per la misura delle perfo...
<ul><li>Organizzazione aziendale: assisteremo alla nascita di nuove aziende o gruppi che forniranno certificazioni, traini...
Web Performance Optimization Previsioni sul futuro: top 10 <ul><li>Disponibilità di una grande mole di dati:  </li></ul><u...
Web Performance Optimization Previsioni sul futuro: top 10 <ul><li>Go Green </li></ul><ul><li>Da non molto tempo si sta ca...
Web Performance Optimization Previsioni sul futuro: top 10 <ul><li>Mobile: è un campo ancora inesplorato. Mancano completa...
top 10 WPO predictions flickr.com/photos/eole/380316678/ 10. fast-by-default 9. visibility into the browser 8. consolidati...
Web Performance Optimization P3PC: Performance of Third Party Content <ul><li>Anche se gli addetti ai lavori spergiurano s...
main page 3rd party content 2005 2010 performance badness
Web Performance Optimization P3PC: Performance of Third Party Content <ul><li>In generale, possono aiutare tecniche di loa...
Web Performance Optimization misc <ul><li>http://stevesouders.com/p3pc/index.php P3PC is a project focused on analyzing th...
Web Performance Optimization Web Performance avoids SPOF <ul><li>Fino a 5 anni fa si pensava solamente ad ottimizzazioni s...
Web Performance Optimization Web Performance avoids SPOF <ul><li>There are six main techniques for downloading scripts wit...
Web Performance Optimization Web Performance avoids SPOF
WPO <ul><li>Credits: Steve Souders, Google      http://www.stevesouders.com/ </li></ul><ul><li>http://www. stevesouders .c...
Dove va il mondo? <ul><li>The State of the Internet Operating System by Tim O'Reilly  </li></ul><ul><ul><li>http://radar.o...
Upcoming SlideShare
Loading in …5
×

Wpo extended

705 views
632 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
705
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Wpo extended

  1. 1. Web Performance Optimization <ul><li>Relatore: Steve Souders, Google </li></ul><ul><li>Due libri </li></ul><ul><li>High performance Web Sites </li></ul><ul><li>Even faster Web Sites </li></ul><ul><li>O'Reilly </li></ul><ul><li>Prima conferenza a tema: Velocity 2009 (San Josè, CA) </li></ul>
  2. 2. Web Performance Optimization <ul><li>La velocità è una delle chiavi per il successo di un sito/applicazione </li></ul><ul><ul><li>Firefox: velocizzare la landing page di 2 secondi ha significato aumentare del 15% i download (milioni in più) </li></ul></ul><ul><ul><li>Yahoo: un rallentamento di 400ms ha causato 5-9% di calo del traffico </li></ul></ul><ul><ul><li>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 </li></ul></ul><ul><ul><li>Dal 2009, la velocità è uno dei parametri che google usa per il page ranking, anche se (ancora?) di poco peso (1%) </li></ul></ul><ul><ul><li>Prove sperimentiali hanno mostrato come il tasso di abbandono di un sito (distinct queries, query refinements, click ecc), sia lineare rispetto al ritardo introdotto </li></ul></ul><ul><ul><li>Nonostante tutto, il tema è ancora “giovane” e il lavoro complesso, ma dopo il periodo d'oro del SEO, è arrivato il tempo del WPO </li></ul></ul><ul><ul><li>Piccolo inciso: in Matrix, i requisiti marketing sono sempre stati focalizzati solo sul peso pagina, che è solo uno degli aspetti del problema </li></ul></ul>
  3. 4. <ul><li>1) Fast by default </li></ul><ul><li>pattern e best practices nativi nei linguaggi e nei framework. </li></ul><ul><li>Es: </li></ul><ul><li>- jquery 1.4 ha lavorato sulle performance riducendo la complessità interna e usando Google Closure Compiler per ridurre del 13% il peso del js </li></ul><ul><li>- Nel 2009 anche su rails hanno lavorato sulle performance </li></ul><ul><li>(slogan: making rails even faster by default) </li></ul>Web Performance Optimization Previsioni sul futuro: top 10
  4. 5. Web Performance Optimization Previsioni sul futuro: top 10
  5. 6. <ul><li>2) Visibility into the browser </li></ul><ul><li>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 </li></ul><ul><li>Es: </li></ul><ul><li>google speedtracer </li></ul><ul><li>Dynatrace </li></ul><ul><li>Entrambi profilano una pagina in modo completo: rendering del dom+css, esecuzione javascript eccetera </li></ul>Web Performance Optimization Previsioni sul futuro: top 10 Web Performance Optimization Previsioni sul futuro: top 10
  6. 7. Web Performance Optimization Previsioni sul futuro: top 10 Google speed tracer (nativo nella Google Chrome Developer Channel)
  7. 8. <ul><li>Dynatrace </li></ul><ul><li>(IE plugin) </li></ul>Web Performance Optimization Previsioni sul futuro: top 10
  8. 9. <ul><li>3) Consolidamento </li></ul><ul><li>Al momento, gli sforzi e i progetti riguardo le performance, sono sempre stati frammentari. In futuro, si vedranno comparire tool che combinano </li></ul><ul><ul><li>Js debugging </li></ul></ul><ul><ul><li>Js profiling </li></ul></ul><ul><ul><li>Dom inspection </li></ul></ul><ul><ul><li>Analisi di rete </li></ul></ul><ul><li>Nasceranno nuove metriche e metodologie e il tutto sarà integrato in tool sempre più ricchi </li></ul><ul><li>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 </li></ul>Web Performance Optimization Previsioni sul futuro: top 10
  9. 10. <ul><li>4) TCP, HTTP </li></ul><ul><li>I protocolli di rete hanno bisogno di una svecchiata, soprattutto l'http: </li></ul><ul><li>- Una connessione per richiesta </li></ul><ul><li>- Comunicazione monodirezionale </li></ul><ul><li>- Header ridondanti e non compressi (problema soprattutto per applicazioni ajax con comunicazione spinta, es: chat) </li></ul><ul><li>Due esempi di soluzione: SPDY, HTML5 WebSocket </li></ul>Web Performance Optimization Previsioni sul futuro: top 10
  10. 11. <ul><li>SPDY </li></ul><ul><li>Esperimento pilota di Google, parte dei progetti Chromium </li></ul><ul><li>Layer aggiuntivo su cui si appoggia l'HTTP </li></ul><ul><li>Hanno creato </li></ul><ul><ul><li>Nuovo server SPDY enabled </li></ul></ul><ul><ul><li>Versione di modificata di Chrome </li></ul></ul><ul><li>Benchmark sui 100 topsites fatti girare in laboratorio </li></ul><ul><li>Tempi di download delle risorse di un sito mediamente dimezzati </li></ul>Web Performance Optimization Previsioni sul futuro: top 10
  11. 12. <ul><li>HTML5 WebSocket </li></ul><ul><li>Un nuovo protocollo (ws://) </li></ul><ul><li>Un canale di comunicazione bidirezionale, molto simile alle tradizionali socket tcp </li></ul><ul><li>Un set di API javascript nei browser che supportano HTML5 </li></ul>Web Performance Optimization Previsioni sul futuro: top 10
  12. 13. <ul><li>HTML5 WebSocket </li></ul><ul><li>codice client </li></ul><ul><li>var ws = new WebSocket(“ws://game.example.com:12010/updates”); </li></ul><ul><li>ws.onopen = function () { </li></ul><ul><li>alert(“Connection open ...”); </li></ul><ul><li>} </li></ul><ul><li>ws.onclose = function () { </li></ul><ul><li>alert(“Connection closed.”); </li></ul><ul><li>} </li></ul><ul><li>ws.onmessage = function () { </li></ul><ul><li>alert( “Received Message: ” + evt.data); </li></ul><ul><li>} </li></ul>Web Performance Optimization Previsioni sul futuro: top 10
  13. 14. <ul><li>HTML5 WebSocket </li></ul><ul><li>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 </li></ul><ul><li>E lato server? Ci sono già application server che implementano le specifiche, ad esempio Jetty (eclipse) </li></ul><ul><ul><li>Non si estendono più Servlet tradizionali, ma WebSocketServlet </li></ul></ul>Web Performance Optimization Previsioni sul futuro: top 10
  14. 15. <ul><li>public class WebSocketChatServlet extends WebSocketServlet{ </li></ul><ul><li>protected void doGet(HttpServletRequest request, HttpServletResponse response) </li></ul><ul><li>throws ServletException ,IOException { </li></ul><ul><li>getServletContext().getNamedDispatcher(&quot;default&quot;).forward(request,response); </li></ul><ul><li>} </li></ul><ul><li>protected WebSocket doWebSocketConnect(HttpServletRequest request, String protocol){ </li></ul><ul><li>return new ChatWebSocket(); </li></ul><ul><li>} </li></ul>Web Performance Optimization Previsioni sul futuro: top 10
  15. 16. <ul><li>class ChatWebSocket implements WebSocket { </li></ul><ul><li>Outbound _outbound; </li></ul><ul><li>public void onConnect(Outbound outbound){ </li></ul><ul><li>_outbound=outbound; </li></ul><ul><li>_members.add(this); </li></ul><ul><li>} </li></ul><ul><li>public void onMessage(byte frame, byte[] data,int offset, int length) {} </li></ul><ul><li>public void onMessage(byte frame, String data){ </li></ul><ul><li>for (ChatWebSocket member : _members){ </li></ul><ul><li>try{ </li></ul><ul><li>member._outbound.sendMessage(frame,data); </li></ul><ul><li>} </li></ul><ul><li>catch(IOException e) {Log.warn(e);} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>public void onDisconnect() { </li></ul><ul><li>_members.remove(this); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>Web Performance Optimization Previsioni sul futuro: top 10
  16. 17. Web Performance Optimization Previsioni sul futuro: top 10 <ul><li>Si definiranno nuovi standard per la misura delle performance, per una preview: </li></ul><ul><li>W3C: Web Timing Working Draft http://dev.w3.org/2006/webapi/WebTiming/ </li></ul><ul><li>interface NavigationTiming { .... // timing generale sulla navigazione </li></ul><ul><li>readonly attribute unsigned longlong navigationStart; </li></ul><ul><li>readonly attribute unsigned longlong lastUnload; </li></ul><ul><li>… } </li></ul><ul><li>interface ResourceTiming { .... // timing relativo ad ogni risorsa caricata </li></ul><ul><li>readonly attribute unsigned longlong fetchStart; </li></ul><ul><li>readonly attribute unsigned longlong fetchEnd; </li></ul><ul><li>… } </li></ul>
  17. 18. <ul><li>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) </li></ul>Web Performance Optimization Previsioni sul futuro: top 10
  18. 19. Web Performance Optimization Previsioni sul futuro: top 10 <ul><li>Disponibilità di una grande mole di dati: </li></ul><ul><ul><li>IPA – Internet Performance Archive? </li></ul></ul><ul><li>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 </li></ul>
  19. 20. Web Performance Optimization Previsioni sul futuro: top 10 <ul><li>Go Green </li></ul><ul><li>Da non molto tempo si sta calcolando l'impronta ecologica del web </li></ul><ul><li>Il passo successivo sarà dato dalla correlazione tra performance e riduzione del consumo di energia delle infrastrutture e quindi dell'impronta complessiva </li></ul>
  20. 21. Web Performance Optimization Previsioni sul futuro: top 10 <ul><li>Mobile: è un campo ancora inesplorato. Mancano completamente best practice, metriche eccetera. Ci sarà grande fermento </li></ul><ul><li>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 </li></ul>
  21. 22. top 10 WPO predictions flickr.com/photos/eole/380316678/ 10. fast-by-default 9. visibility into the browser 8. consolidation 7. TCP, HTTP 6. standards 5. industry organizations 4. data 3. green 2. mobile 1. speed’s a differentiator
  22. 23. Web Performance Optimization P3PC: Performance of Third Party Content <ul><li>Anche se gli addetti ai lavori spergiurano sul contrario, “Ads, widgets, and analytics are a major cause for slow web sites” (Steve Souders, Google) </li></ul><ul><li>Virgilio trabocca di codici di tracciamento e ads </li></ul><ul><li>Negli ultimi 5 anni, le pagine sono diventate mediamente più veloci, ma il peso medio di 3PC è passato da ¼ a quasi ½ </li></ul>
  23. 24. main page 3rd party content 2005 2010 performance badness
  24. 25. Web Performance Optimization P3PC: Performance of Third Party Content <ul><li>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 ) </li></ul><ul><li>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” </li></ul>
  25. 26. Web Performance Optimization misc <ul><li>http://stevesouders.com/p3pc/index.php P3PC 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 </li></ul><ul><ul><li>Il sito permette di calcolare i tempi di download dei principali widget sul proprio browser </li></ul></ul><ul><li>http://www.browserscope.org/ Browserscope is a community-driven project for profiling web browsers </li></ul><ul><ul><li>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 </li></ul></ul><ul><li>Google Webmaster Tools Il lab ha una funzionalità (sperimentale), di analisi delle prestazioni – plugin di firefox (nulla per chrome!) che però a me, sotto linux, non funziona :-) </li></ul><ul><li>http://www.webpagetest.org/ Test delle pagine e confronto con portali famosi – sarò sfortunato o troppo di nicchia, ma a me non funziona :-) </li></ul>
  26. 27. Web Performance Optimization Web Performance avoids SPOF <ul><li>Fino a 5 anni fa si pensava solamente ad ottimizzazioni server side </li></ul><ul><li>Da allora, si è scoperto che l'80% del tempo utente è “consumato” da elaborazioni client side e dal rendering delle risorse </li></ul><ul><li>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) </li></ul><ul><li>Per questo motivo il pattern più importante è probabilmente: “caricare tutti i js esterni in modo asincrono” </li></ul><ul><li>Nota: per anni abbiamo lottato con il peso pagina come unica specifica sulle performance </li></ul>Altro nel post seguente (e posto correlati) http://www.stevesouders.com/blog/2010/06/01/frontend-spof/
  27. 28. Web Performance Optimization Web Performance avoids SPOF <ul><li>There are six main techniques for downloading scripts without blocking: </li></ul><ul><li>XHR Eval – Download the script via XHR and eval() the responseText. </li></ul><ul><li>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. </li></ul><ul><li>Script in Iframe – Wrap your script in an HTML page and download it as an iframe. </li></ul><ul><li>Script DOM Element – Create a script element and set its src property to the script’s URL. </li></ul><ul><li>Script Defer – Add the script tag’s defer attribute. This used to only work in IE, but is now in Firefox 3.1. </li></ul><ul><li>document.write Script Tag – Write the <script src=&quot;&quot;> HTML into the page using document.write. This only loads script without blocking in IE. </li></ul>
  28. 29. Web Performance Optimization Web Performance avoids SPOF
  29. 30. WPO <ul><li>Credits: Steve Souders, Google http://www.stevesouders.com/ </li></ul><ul><li>http://www. stevesouders .com/blog/2010/05/07/wpo-web-performance-optimization/ </li></ul>
  30. 31. Dove va il mondo? <ul><li>The State of the Internet Operating System by Tim O'Reilly </li></ul><ul><ul><li>http://radar.oreilly.com/2010/03/state-of-internet-operating-system.html </li></ul></ul><ul><li>Web 2.0 Expo SF 2010: Tim O'Reilly, &quot;State of the Internet Operating System&quot; </li></ul><ul><ul><li>http://www.youtube.com/watch?v=hAau6W--iMo </li></ul></ul>

×