Transferir como PDF, PPTX
Carregado porAnderson Aguiar
Alta Performance em Aplicações Web
O documento discute a importância da performance no front-end de aplicações web. Ele destaca que a maior parte do tempo de carregamento de uma página é gasto com elementos front-end como imagens, CSS e JavaScript. Além disso, melhores tempos de resposta aumentam o tráfego e as vendas de sites como Yahoo!, Mozilla e Amazon.
Mais conteúdo relacionado
Alta Performance em Aplicações Web
- 1. ALTA PERFORMANCE EM APLICAÇÕES WEB {Anderson Aguiar @andersonaguiar }
- 2. Geralmente as principaispreocupaçõ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. É 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 download de elementos do front-end, como imagens, CSS e Javascript.
- 3. A importância daperformance no front-end :O
- 4. •Esperar é ruim! •Esperaré muito irritante! •Esperar estressa! •Tempo é dinheiro.
- 5. O Yahoo! descobriuque, 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 decuidado 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. CSSno 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. Exemplo: Tamanhooriginal: 256x32 <img src=“forkintuba.png” alt=“...” width=“256” height=“32” /> Resultado: <img src=“forkintuba.png” alt=“...” width=“80” /> Resultado:
- 11. Combine cores semelhantes Tenteusar poucas cores, assim poderá ser exportado em PNG8 Sprites horizontais tendem a ser menores Avaliar páginas que irão utilizar
- 12. 1 requisição aoinvé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/
- 13.
- 14. Utilize a ferramentado Yahoo. http://www.smushit.com/ysm ush.it/ Pelo firebug, ou enviando todas 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
- 15. reset.css funcoes.js fonts.css slider.js header.css principal.css lightbox.js noticias.js menu.css menu.js footer.css timer.js 5>1 5>1 10 > 2
- 16. YUI Compressor: http://developer.yahoo.com/yui/compressor/ Google ClosureCompiler: 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.
- 18.
- 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.
- 21.
- 22.
- 23. Online JavaScript/CSS CompressionUsing YUI Compressor http://www.refresh-sf.com/yui/
- 24. O que elesfizeram: 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 Utilizeas 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.
- 28.
- 29.
- 30. Obrigado! Disponível em: http://www.slideshare.net/andersonagr Contato: @andersonaguiar andersonaguiarrr@gmail.com