Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Extreme Web Performance

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.

Jaydson Gomes

March 01, 2012
Tweet

More Decks by Jaydson Gomes

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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
  4. 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."
  5. 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
  6. 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?
  7. 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.
  8. 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.
  9. O que fazer? Minimizar o número de requisições CSS Sprites

    Combine imagens no menor número possível de arquivos.
  10. 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/
  11. 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
  12. 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>
  13. 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
  14. 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
  15. 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"
  16. 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)
  17. 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
  18. 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
  19. 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/
  20. 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/
  21. 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/
  22. 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/
  23. 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
  24. 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