Alta Performance em Aplicações Web
•
5 gefällt mir•2,078 views
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.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Alta Performance em Aplicações Web
Ähnlich wie Alta Performance em Aplicações Web (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (9)
Alta Performance em Aplicações Web
- 1. ALTA PERFORMANCE EM APLICAÇÕES WEB {Anderson Aguiar @andersonaguiar }
- 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. É 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 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. Exemplo: Tamanho original: 256x32 <img src=“forkintuba.png” alt=“...” width=“256” height=“32” /> Resultado: <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. 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/
- 13. Eles também usam :)
- 14. Utilize a ferramenta do 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 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
- 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 “ :)
- 29. Dúvidas?
- 30. Obrigado! Disponível em: http://www.slideshare.net/andersonagr Contato: @andersonaguiar andersonaguiarrr@gmail.com