Extreme Web Performance

Palestra apresentada no RSJS 2012, PernambucoJS 2012, e EATI 2012.
Descrição:
Performance front-end é o maior gargalo em aplicações Web.
Segundo Steve Souders, um dos gurus de Web Performance, 90% do tempo de resposta de uma página está no front-end.
Em grandes sites, a performance é um dos fatores mais relevantes.
Usuários podem desistir de acessar determinado site por ser lento, mas também podem se tornar assíduos, se a performance for relevante.
Hoje existem muitas técnicas do lado servidor para melhorar a performance de uma aplicação. Seja cache, ou qualquer outra técnica de otimização, de nada adiantará se o front-end não for construído e pensado de forma a ser performático.
Novas tecnologias client-side estão surgindo, e com o uso destas já é possível obter uma performance diferenciada do que com as tecnologias tradicionais.
A palestra abordará técnicas, práticas e tecnologias(atuais e futuras) para reduzir o tempo de carregamento de um site (aplicação, blog, etc). Será apresentado um estudo de caso de como reduzimos em 60% o tempo de carregamento da capa do portal Terra, mostrando quais técnicas falharam, quais funcionaram e como chegamos em uma solução que atendeu nossas necessidades.

Transcript

1. Extreme Web Performance Jaydson Gomes, RSJS 2012
2. WebDevTerra Programador open-source JavaScript BrazilJS Desconferência jaydson.org RSJS Jaydson Gomes
4. Performance importa?
5. Performance importa? "If it is fast and ugly, they will use it and curse you; if it is slow, they will not use it" David Cheriton The Art of Computer Systems Performance Analysis
6. Performance importa? "Performance golden rule: Optimize front-end performance first, that's where 80/90% of the end-user response time is spent." Steve Souders High Performance Web Sites
7. Performance importa? 80/90% do tempo de resposta esta no front- end!
8. Google Experiment Em 2009 o Google fez um experimento onde expôs a um grupo de usuários uma busca mais lenta. 300ms mais lenta
9. Google Experiment "O experimentos demonstraram que aumentar a latência da busca do Google de 100ms para 400ms reduziu o número de pesquisas diárias por usuário de 0.2% para 0.6% Além disso, os usuários expostos ao experimento, fizeram cada vez menos buscas."
10. Pesquisa Compuware Infográfico
11. Pesquisa Compuware
12. Pesquisa Compuware
13. Pesquisa Compuware
14. 60 segundos no Terra... Mundo real
15. 60 segundos no Terra... Autenticações 535K E-mails 32K out Capa 150K Hits 3.6M Banners 540K Rede 2,7TBits 17K in 72 DVD's
16. 3.6M - Hit pra caral...
17. Economizar 1K significa... 60 s 3.4GB
18. Economizar 1K significa... 1 h 180GB
19. 1 dia 4.2TB Economizar 1K significa...
20. Performance não é tudo!
21. O que fazer?
22. O que fazer? Minimizar o número de requisições Minimize o número de DNS lookups Minimize o número de redirects (se for necessário, faça server-side) Faça tracking assíncrono Bad Request é Bad Pense em um gerenciador de módulos Carregue somente o necessário jQuery (ou outra lib) é realmente necessário em todas as páginas?
23. O que fazer? Minimizar o número de requisições Unifique arquivos JavaScript
24. O que fazer? Minimizar o número de requisições 13 arquivos 729KB 4.46s
25. O que fazer? Minimizar o número de requisições 2 arquivos 729KB 1.87s
26. O que fazer? Minimizar o número de requisições Unifique arquivos CSS
27. O que fazer? Minimizar o número de requisições Combine o CSS em 2 arquivos, um com o mínimo de conteúdo necessário para renderizar a página, e outro contendo o código desnecessário até que a página seja carregada.
28. O que fazer? Minimizar o número de requisições Isole estilos de componentes em outro arquivo (s), e somente carregue-o(s) com a necessidade.
29. O que fazer? Minimizar o número de requisições
30. O que fazer? Minimizar o número de requisições CSS Sprites Combine imagens no menor número possível de arquivos.
31. O que fazer? Minimizar o número de requisições Recomendações: * Faça sprite em imagens que são carregas juntas * Faça sprite em imagens pequenas, GIF's e PNG's primeiro * Faça sprite em imagens que podem ser cacheadas * Minimize o espaço em branco do sprite http://spriteme.org/
32. O que fazer? Minimizar o número de requisições
33. O que fazer? Otimizações A ordem dos fatores não altera o produto... só na matemática!
34. O que fazer? Otimizações Otimize a ordem de estilos e scripts
35. O que fazer?
36. O que fazer? O JavaScript pode alterar o conteúdo e o layout da página. O Browser atrasa a renderização de qualquer outro conteúdo que esteja definido após uma tag <script> até que o download, o parse e a execução tenham sido concluídos. Otimizações
37. O que fazer?
38. O que fazer? Evite o bloqueio de sua página
39. O que fazer? Assíncrono
40. O que fazer? <script> var node = document.createElement('script'); node.type = 'text/javascript'; node.async = true; node.src = 'example.js'; // Now insert the node into the DOM, perhaps using insertBefore() </script>
41. O que fazer? HTML5 async
42. O que fazer? <script async src="rs.js" onload="wow()"></script>
43. O que fazer? <script defer src="rs.js" onload="wow()"></script>
44. O que fazer? Ambos começam o download imediatamente sem pausar o parser. Async: Executa após o evento load, desordenado Defer: Executa em ordem após o DOMContentLoaded
45. O que fazer? Hosts diferentes
46. O que fazer?
47. O que fazer?
48. O que fazer? O Cache é seu amigo!
49. O que fazer? O AppCache é o seu melhor amigo!
50. O que fazer? Otimize as imagens http://www.smushit.com
51. O que fazer? LazyLoad
52. Referência no assunto Steve Souders * Trabalha no Google com iniciativas open-source e web performance * Trabalhou no Yahoo! como Chief Perfomance * Autor dos livros High Performance Web Sites e Even Faster Web Sites
53. Steve Souders * Velocity Conference Referência no assunto
54. Steve Souders http://stevesouders.com/ Referência no assunto
55. Aaron Peters Referência no assunto Web Performance Optimization Consultant http://www.aaronpeters.nl
56. Maximiliano Firtman Referência no assunto Performance Guru http://www.mobilexweb.com
57. Estudo de caso Terra Nova solução para carregamento de publicidades no portal
58. Estudo de caso Terra Problema: document.write()
59. Estudo de caso Terra
60. Estudo de caso Terra First view 13.690s Repeated view 10.274s Antes...
61. Estudo de caso Terra First view 7.192s Repeated view 2.771s Depois...
62. Estudo de caso Terra O que fizemos
63. Estudo de caso Terra Iframes!
64. Estudo de caso Terra Como assim Iframes!?!?
65. Estudo de caso Terra Friendly Iframes! • Iframe dinâmico • Requisição a publicidade via tag script "<script src=>" • Por default iframes não carregam em paralelo • Friendly Iframe é a solução para este "problema"
66. Estudo de caso Terra Friendly Iframes! Vantagens: • Assíncrono • Isolamento de publicidades(Peças com erros não afetam as outras) • Melhor controle sobre as publicidades(Recarregar, remover, criar após carregamento)
67. Estudo de caso Terra Friendly Iframes!
68. • JavaScript comentado • CSS como string Bônus
69. Perguntas? http://jaydson.org @jaydson
70. Referências Velocity 2010 - Don't Let Third Parties Slow You Down http://www.youtube.com/watch?v=3NVpFj64MQU http://velocityconf.com/velocity2010/public/schedule/detail/15412 Google Minimize round-trip times http://code.google.com/speed/page-speed/docs/rtt.html Friendly Iframe http://classroom.emediate.biz/doku.php?id=technical:integration:friendly_iframes:start Yahoo! Rich Media Certification http://adspecs.yahoo.co.uk/thirdparty/rich-media-certification Google - Your Web, Half a Second Sooner http://googlecode.blogspot.com/2011/03/your-web-half-second-sooner.html High Performance Web Sites, With Ads: Don't let third parties make you slow http://www.slideshare.net/jarlund/hign-performance-web-sites-with-ads-dont-let-third-parties-make-you-slow
71. Referências IAB Best Practices for Rich Media Ads in Asynchronous Ad Environments http://www.iab.net/media/file/rich_media_ajax_best_practices.pdf Building Fast Webapps, Fast (Lessons From Creating the Meebo Bar) http://velocityconf.com/velocity2010/public/schedule/detail/13070 Iframe loading techniques and performance http://www.aaronpeters.nl/blog/iframe-loading-techniques-performance Yahoo! Image loader http://developer.yahoo.com/yui/imageloader/#performance Web performance optimization (WPO) http://www.slideshare.net/bonoseo/web-performance-optimization-wpo Google - Let's make the web faster http://code.google.com/speed/ HTML5Rocks - Performance http://www.html5rocks.com/en/features/performance
72. Referências OReilly - High Performance Web Sites http://shop.oreilly.com/product/9780596529307.do OReily - Even Faster Web Sites http://shop.oreilly.com/product/9780596522315.do The Psychology of Web Performance http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/ ExtSrcJs http://code.google.com/p/extsrcjs/ Async-document-write https://github.com/eligrey/async-document-write Performance of 3rd Party Content http://www.stevesouders.com/blog/2010/02/17/performance-of-3rd-party-content/
73. Referências Performance matters http://blog.patrickmeenan.com/ Roundup on Parallel Connections http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/ Dynamic Stylesheets http://www.stevesouders.com/blog/2010/02/12/5d-dynamic-stylesheets/ Double download Stylesheets http://www.stevesouders.com/blog/2010/02/10/5a-missing-schema-double-download/ Browser Scope http://www.browserscope.org Page Speed http://code.google.com/speed/page-speed/docs/using_chrome.html Faster Loading through Eval() http://blog.sproutcore.com/faster-loading-through-eval/
74. Referências Cut Your JavaScript Load Time 90% with Deferred Evaluation http://blog.sproutcore.com/cut-your-javascript-load-time-90-with-deferred-evaluation/ SPDY http://dev.chromium.org/spdy Font Face Performance http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/ Data URI’s http://www.nczonline.net/blog/2009/10/27/data-uris-explained/ Font Face Yahoo! http://www.slideshare.net/mattseeley/yahoocomtablet The Secret Weapons of the AOL Optimization Team http://assets.en.oreilly.com/1/event/29/The%20Secret%20Weapons%20of%20the%20AOL%20Optimization%20Team% 20Presentation.pdf Unfolding the Fold http://blog.clicktale.com/2006/12/23/unfolding-the-fold/
75. Referências Gmail Mobile http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html Speed Matters http://googleresearch.blogspot.com/2009/06/speed-matters.html HTML5 Prefetching http://css.dzone.com/news/mastering-html5-prefetching AppCache - HTML5 Rocks http://www.html5rocks.com/en/tutorials/appcache/beginner/ AppCache - MDN https://developer.mozilla.org/en/Offline_resources_in_Firefox AppCache - Facts http://appcachefacts.info/ AppCache - WebDirections http://www.webdirections.org/blog/get-offline/
76. Referências AppCache Offline App http://grinninggecko.com/developing-cross-platform-html5-offline-app-1/ Whatwg - Offline http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html Offline Apps - W3C http://www.w3.org/TR/offline-webapps/ Bookmarklet para gerar AppCache manifest http://westciv.com/tools/manifestR/ AppCache - Opera http://dev.opera.com/articles/view/offline-applications-html5-appcache/ Improving AppCache http://www.louisremi.com/2011/04/13/improving-the-appcache/ http://www.stevesouders.com/blog/2011/10/03/improving-app-cache/ Whats wrong with AppCache
77. Referências BookMarklet Manifest Validator http://manifesto.ericdelabar.com/ Appcache and Beyond http://www.louisremi.com/2011/10/26/appcache-beyond/ Pages Cached By The Cache Manifest Do Not Need To Reference The Cache Manifest http://www.bennadel.com/blog/1947-Pages-Cached-By-The-Cache-Manifest-Do-Not-Need-To-Reference-The-Cache-Manifest. htm Non-Cached Pages Cannot Access Resources Cached In The Cache Manifest http://www.bennadel.com/blog/1946-Non-Cached-Pages-Cannot-Access-Resources-Cached-In-The-Cache-Manifest.htm WhatWg Offline http://developers.whatwg.org/offline.html#offline Apple AppCache http://developer.apple. com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache. html Facebook Offline