Alta Performance em Aplicações Web

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

Transcript

1. ALTA PERFORMANCE EM Anderson Aguiar @andersonaguiar APLICAÇÕES WEB { }
2. Geralmente as principais preocupações no desenvolvimento de uma aplicação web são: Modelar a base de dados, criar chaves, índices... Documentar o back-end, fazer testes, evitar duplicação de código, etc. 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 download de elementos do front-end, como imagens, CSS e Javascript. É correto fazer isso?!
3. A importância da performance no front-end :O
4. •Esperar é ruim! •Esperar é muito irritante! •Esperar estressa! •Tempo é dinheiro.
5. O Yahoo! descobriu que, para cada 400ms de melhora na performance, seu tráfego aumenta em 9% Ao cortar 2,2s da landing page do Firefox, a Mozilla aumentou o número de downloads em 15,4%, totalizando um ganho de mais de 60 milhões de cópias por ano A Amazon concluiu que apenas 100ms de melhora aumentam 1% seu faturamento O Google aumentou o número de resultados por página de 10 para 30. Isso aumentou o tempo de carregamento de 0.4s para 0.9s, o que diminuiu em 20% o tráfego das buscas
8.  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 outras páginas, dificulta o cache)  Tag <img /> com o atributo src vazio ou errado  Não utilização de sprites  Códigos duplicados
9. 1. CSS no topo e JS no fim da página 2. Utilize imagens, CSS e JS somente nas páginas que for necessário 3. Combine arquivos JS, CSS e imagens(Sprite) para diminuir as requisições HTTP 4. Remova scripts duplicados 5. Minifique JS e CSS! 6. NÃO redimensione imagens no HTML 7. Exporte as imagens no formato correto 8. Google AJAX Libraries API para servir estruturas javascript populares (como Mootools, jQuery e Dojo) 9. Utilize JS e CSS externos 10. Não utilize expressões no CSS, são custosas! 11. Evite criar CSS separado para impressão
10. <img src=“forkintuba.png” alt=“...” width=“256” height=“32” /> Resultado: Exemplo: Tamanho original: 256x32 <img src=“forkintuba.png” alt=“...” width=“80” /> Resultado:
11. Combine cores semelhantes Tente usar poucas cores, assim poderá ser exportado em PNG8 Sprites horizontais tendem a ser menores Avaliar páginas que irão utilizar
12. background-position: -0px -0px; background-position: -20px -0px; background-position: -40px -0px; background-position: -60px -0px; background-position: -80px -0px; background-position: -100px -0px; background-position: -120px -0px; background-position: -140px -0px; background-position: -160px -0px; background-position: -180px -0px; 1 requisição ao invés de 10! Tools: http://css-sprit.es/ http://spritegen.website-performance.org/ http://www.spritecow.com/ background-position: 0px 0px; background-position: 0px -60px; background-position: 120px 0px; background-position: 120px -60px; background-position: 240px 0px; background-position: 240px -60px; 1 requisição ao invés de 6!
13. Eles também usam :)
14. Utilize a ferramenta do Yahoo. http://www.smushit.com/ysm ush.it/  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 Pelo firebug, ou enviando todas através do site
15. reset.css fonts.css header.css menu.css footer.css principal.css funcoes.js slider.js lightbox.js menu.js timer.js noticias.js 5 > 1 5 > 1 10 > 2
16. 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.html JS Minifier: http://fmarcia.info/jsmin/test.html JS Compress: http://jscompress.com/
17. Antes 9.86k
18. Depois 7.6k
19. 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/
20. Antes 22.4k
21. Depois 17.5k
22. Exemplo de melhoria
23. Online JavaScript/CSS Compression Using YUI Compressor http://www.refresh-sf.com/yui/
24. O que eles fizeram: Simplesmente combinaram os arquivos Javascript e CSS e removeram os não utilizados. Com isso diminuiram 2.2 segundos do tempo de carregamento da página. Feito isso, obtiveram15,4% de aumento nos downloads do browser.
25. = combinação perfeita Utilize as ferramentas acima para diagnosticar detalhadamente o seu site. Monitore constantemente, e implemente melhorias para otimizar ainda mais suas páginas.
26. Foque no front-end, você deve fazer o controle do tempo de resposta. Com estas técnicas + (nginx, gzip e cache), você poderá reduzir em 50%(ou mais) o tempo carregamento da página, consequentemente melhorar a experiência do usuário e ajudar na parte de SEO. Menos elementos = Menor tempo de carregamento Menos requests = Menor tempo de carregamento Menor tempo de carregamento =  && $$ “Nunca pare, sempre dá para melhorar um pouco mais “ :)
27. https://groups.google.com/forum/#!forum/html5-css3-brasil https://groups.google.com/forum/#!forum/jquery-br https://groups.google.com/forum/#!forum/listaphp https://groups.google.com/forum/#!forum/dojotuba
28. http://developer.yahoo.com/performance/rules.html http://code.google.com/intl/pt-BR/speed/page-speed/docs/rules_intro.html http://prezi.com/xnety6t2emcs/construindo-aplicacoes-web-de-alta-performance- front-end/ http://www.slideshare.net/stoyan/high-performance-web-pages-20-new-best- practices http://stevesouders.com/examples/expression-counter.php http://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/
29. Dúvidas?
30. Disponível em: http://www.slideshare.net/andersonagr Obrigado! Contato: @andersonaguiar andersonaguiarrr@gmail.com