ALTA PERFORMANCE EM      APLICAÇÕES WEB        {Anderson Aguiar             @andersonaguiar   }
Geralmente as principais preocupações nodesenvolvimento de uma aplicação web são:Modelar a base de dados, criar chaves, ín...
A importância da performance no front-end :O
•Esperar é ruim!•Esperar é muito irritante!•Esperar estressa!•Tempo é dinheiro.
O Yahoo! descobriu que, para cada 400ms de melhora naperformance, seu tráfego aumenta em 9%Ao cortar 2,2s da landing page ...
 Falta de cuidado na exportação das imagens Redimensionar imagens no HTML Muitas requisições HTTP(imagens, JS, CSS) In...
1.  CSS no topo e JS no fim da página2.  Utilize imagens, CSS e JS somente nas páginas que for necessário3.  Combine arqui...
Exemplo:  Tamanho original: 256x32<img src=“forkintuba.png” alt=“...” width=“256” height=“32” />Resultado:<img src=“forkin...
Combine cores semelhantesTente usar poucas cores, assimpoderá ser exportado em PNG8Sprites horizontais tendem a sermeno...
1 requisição ao invés de 10!        1 requisição ao invés de 6!background-position: -0px -0px;background-position: -20px -...
Eles também usam :)
Utilize a ferramenta do Yahoo.http://www.smushit.com/ysmush.it/Pelo firebug, ou enviandotodas através do site Teste vário...
reset.css                    funcoes.jsfonts.css                    slider.jsheader.css   principal.css   lightbox.js   no...
YUI Compressor:http://developer.yahoo.com/yui/compressor/Google Closure Compiler:http://code.google.com/intl/pt-BR/closure...
Antes 9.86k
Depois  7.6k
YUI Compressor:http://developer.yahoo.com/yui/compressor/CSS Compressor & Minifier:http://www.minifycss.com/css-compressor...
Antes 22.4k
Depois  17.5k
Exemplo de melhoria
Online JavaScript/CSS Compression Using YUI Compressorhttp://www.refresh-sf.com/yui/
O que eles fizeram: Simplesmente combinaram os arquivosJavascript e CSS e removeram os não utilizados. Com issodiminuiram ...
= combinação perfeitaUtilize as ferramentas acima para diagnosticar detalhadamente oseu site. Monitore constantemente, e i...
Foque no front-end, você deve fazer o controle do tempo de resposta.Com estas técnicas + (nginx, gzip e cache), você poder...
https://groups.google.com/forum/#!forum/html5-css3-brasilhttps://groups.google.com/forum/#!forum/jquery-brhttps://groups.g...
http://developer.yahoo.com/performance/rules.htmlhttp://code.google.com/intl/pt-BR/speed/page-speed/docs/rules_intro.htmlh...
Dúvidas?
Obrigado!                      Disponível em:http://www.slideshare.net/andersonagr                          Contato:      ...
Alta Performance em Aplicações Web
Alta Performance em Aplicações Web
Upcoming SlideShare
Loading in …5
×

Alta Performance em Aplicações Web

2,309 views

Published on

Dicas para deixar seu site diferenciado da maioria. Técnicas de otimizações: compression, sprite, images, requests, etc.

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
2,309
On SlideShare
0
From Embeds
0
Number of Embeds
385
Actions
Shares
0
Downloads
37
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Alta Performance em Aplicações Web

  1. 1. ALTA PERFORMANCE EM APLICAÇÕES WEB {Anderson Aguiar @andersonaguiar }
  2. 2. Geralmente as principais preocupações nodesenvolvimento de uma aplicação web são:Modelar a base de dados, criar chaves, índices...Documentar o back-end, fazer testes, evitar duplicação decódigo, etc.É correto fazer isso?!Com certeza. Mas não adianta SÓ o back-end estar todo“bonitinho” e deixar o front de qualquer jeito, sendo que 70-90%do tempo de carregamento de uma página é gasto no downloadde elementos do front-end, como imagens, CSS e Javascript.
  3. 3. A importância da performance no front-end :O
  4. 4. •Esperar é ruim!•Esperar é muito irritante!•Esperar estressa!•Tempo é dinheiro.
  5. 5. O Yahoo! descobriu que, para cada 400ms de melhora naperformance, seu tráfego aumenta em 9%Ao cortar 2,2s da landing page do Firefox, a Mozilla aumentou onúmero de downloads em 15,4%, totalizando um ganho de maisde 60 milhões de cópias por anoA Amazon concluiu que apenas 100ms de melhora aumentam1% seu faturamentoO Google aumentou o número de resultados por página de 10para 30. Isso aumentou o tempo de carregamento de 0.4s para0.9s, o que diminuiu em 20% o tráfego das buscas
  6. 6.  Falta de cuidado na exportação das imagens Redimensionar imagens no HTML Muitas requisições HTTP(imagens, JS, CSS) Inclusão de arquivos não utilizados na página CSS no final da página JS no início da página(às vezes é necessário) Javascript e CSS inline(não é possível compartilhar em outraspáginas, dificulta o cache) Tag <img /> com o atributo src vazio ou errado Não utilização de sprites Códigos duplicados
  7. 7. 1. CSS no topo e JS no fim da página2. Utilize imagens, CSS e JS somente nas páginas que for necessário3. Combine arquivos JS, CSS e imagens(Sprite) para diminuir as requisições HTTP4. Remova scripts duplicados5. Minifique JS e CSS!6. NÃO redimensione imagens no HTML7. Exporte as imagens no formato correto8. Google AJAX Libraries API para servir estruturas javascript populares (como Mootools, jQuery e Dojo)9. Utilize JS e CSS externos10. Não utilize expressões no CSS, são custosas!11. Evite criar CSS separado para impressão
  8. 8. Exemplo: Tamanho original: 256x32<img src=“forkintuba.png” alt=“...” width=“256” height=“32” />Resultado:<img src=“forkintuba.png” alt=“...” width=“80” />Resultado:
  9. 9. Combine cores semelhantesTente usar poucas cores, assimpoderá ser exportado em PNG8Sprites horizontais tendem a sermenoresAvaliar páginas que irão utilizar
  10. 10. 1 requisição ao invés de 10! 1 requisição ao invés de 6!background-position: -0px -0px;background-position: -20px -0px;background-position: -40px -0px;background-position: -60px -0px;background-position: -80px -0px; background-position: 0px 0px;background-position: -100px -0px; background-position: 0px -60px;background-position: -120px -0px; background-position: 120px 0px;background-position: -140px -0px; background-position: 120px -60px;background-position: -160px -0px; background-position: 240px 0px;background-position: -180px -0px; background-position: 240px -60px;Tools:http://css-sprit.es/http://spritegen.website-performance.org/http://www.spritecow.com/
  11. 11. Eles também usam :)
  12. 12. Utilize a ferramenta do Yahoo.http://www.smushit.com/ysmush.it/Pelo firebug, ou enviandotodas através do site Teste vários níveis de qualidade da imagem(não escolha qualquer extensão) Remova cores não utilizadas Remova metadata dos JPEGs Utilize PNG8 ao invés de GIFs
  13. 13. reset.css funcoes.jsfonts.css slider.jsheader.css principal.css lightbox.js noticias.jsmenu.css menu.jsfooter.css timer.js 5>1 5>1 10 > 2
  14. 14. YUI Compressor:http://developer.yahoo.com/yui/compressor/Google Closure Compiler:http://code.google.com/intl/pt-BR/closure/compiler/JSMIN:http://www.crockford.com/javascript/jsmin.htmlJS Minifier:http://fmarcia.info/jsmin/test.htmlJS Compress:http://jscompress.com/
  15. 15. Antes 9.86k
  16. 16. Depois 7.6k
  17. 17. YUI Compressor:http://developer.yahoo.com/yui/compressor/CSS Compressor & Minifier:http://www.minifycss.com/css-compressor/CSS Compressor:http://www.csscompressor.com/Refresh-sf(using YUI Compressor):http://www.refresh-sf.com/yui/
  18. 18. Antes 22.4k
  19. 19. Depois 17.5k
  20. 20. Exemplo de melhoria
  21. 21. Online JavaScript/CSS Compression Using YUI Compressorhttp://www.refresh-sf.com/yui/
  22. 22. O que eles fizeram: Simplesmente combinaram os arquivosJavascript e CSS e removeram os não utilizados. Com issodiminuiram 2.2 segundos do tempo de carregamento dapágina.Feito isso, obtiveram15,4% de aumento nos downloads dobrowser.
  23. 23. = combinação perfeitaUtilize as ferramentas acima para diagnosticar detalhadamente oseu site. Monitore constantemente, e implemente melhoriaspara otimizar ainda mais suas páginas.
  24. 24. Foque no front-end, você deve fazer o controle do tempo de resposta.Com estas técnicas + (nginx, gzip e cache), você poderá reduzir em50%(ou mais) o tempo carregamento da página, consequentementemelhorar a experiência do usuário e ajudar na parte de SEO.Menos elementos = Menor tempo de carregamentoMenos requests = Menor tempo de carregamentoMenor tempo de carregamento =  && $$“Nunca pare, sempre dá para melhorar um pouco mais “:)
  25. 25. https://groups.google.com/forum/#!forum/html5-css3-brasilhttps://groups.google.com/forum/#!forum/jquery-brhttps://groups.google.com/forum/#!forum/listaphphttps://groups.google.com/forum/#!forum/dojotuba
  26. 26. http://developer.yahoo.com/performance/rules.htmlhttp://code.google.com/intl/pt-BR/speed/page-speed/docs/rules_intro.htmlhttp://prezi.com/xnety6t2emcs/construindo-aplicacoes-web-de-alta-performance-front-end/http://www.slideshare.net/stoyan/high-performance-web-pages-20-new-best-practiceshttp://stevesouders.com/examples/expression-counter.phphttp://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites/http://www.webperformancetoday.com/2010/06/15/everything-you-wanted-to-know-about-web-performance/
  27. 27. Dúvidas?
  28. 28. Obrigado! Disponível em:http://www.slideshare.net/andersonagr Contato: @andersonaguiar andersonaguiarrr@gmail.com

×