1. 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)
2. 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
4. 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 Optimization Previsioni sul futuro: top 10
6. 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 Web Performance Optimization Previsioni sul futuro: top 10 Web Performance Optimization Previsioni sul futuro: top 10
7. Web Performance Optimization Previsioni sul futuro: top 10 Google speed tracer (nativo nella Google Chrome Developer Channel)
8. Dynatrace (IE plugin) Web Performance Optimization Previsioni sul futuro: top 10
9. 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 Web Performance Optimization Previsioni sul futuro: top 10
10. 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 Web Performance Optimization Previsioni sul futuro: top 10
11. 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 Web Performance Optimization Previsioni sul futuro: top 10
12. 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 Web Performance Optimization Previsioni sul futuro: top 10
13. 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); } Web Performance Optimization Previsioni sul futuro: top 10
14. 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 Web Performance Optimization Previsioni sul futuro: top 10
15. 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(); } Web Performance Optimization Previsioni sul futuro: top 10
16. 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); } } } Web Performance Optimization Previsioni sul futuro: top 10
17. Web Performance Optimization Previsioni sul futuro: top 10 Si definiranno nuovi standard per la misura delle performance, per una preview: W3C: Web Timing Working Draft http://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; }
18. 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) Web Performance Optimization Previsioni sul futuro: top 10
19. Web Performance Optimization Previsioni sul futuro: top 10 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
20. Web Performance Optimization Previsioni sul futuro: top 10 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
21. Web Performance Optimization Previsioni sul futuro: top 10 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
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. speeds a differentiator
23. Web Performance Optimization P3PC: 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 遜
24. main page 3rd party content 2005 2010 performance badness
25. Web Performance Optimization P3PC: 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
26. Web Performance Optimization misc 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 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 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 :-) http://www.webpagetest.org/ Test delle pagine e confronto con portali famosi sar嘆 sfortunato o troppo di nicchia, ma a me non funziona :-)
27. Web Performance Optimization Web 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/
28. Web Performance Optimization Web Performance avoids 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 scripts URL. Script Defer Add the script tags defer attribute. This used to only work in IE, but is now in Firefox 3.1. document.write Script Tag Write the <script src=/slideshow/wpo-extended/4381481/""> HTML into the page using document.write. This only loads script without blocking in IE.
30. WPO Credits: Steve Souders, Google http://www.stevesouders.com/ http://www. stevesouders .com/blog/2010/05/07/wpo-web-performance-optimization/
31. Dove va il mondo? The State of the Internet Operating System by 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
![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); } } } Web Performance Optimization Previsioni sul futuro: top 10](https://image.slidesharecdn.com/wpo-extended-100601164535-phpapp01/85/Wpo-extended-16-320.jpg)
