ALTA PERFORMANCE EM

Anderson Aguiar @andersonaguiar

APLICAÇÕES WEB

{ }

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?!

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 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

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

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

<img src=“forkintuba.png” alt=“...” width=“256” height=“32” /> Resultado:

Exemplo:

Tamanho original: 256x32

<img src=“forkintuba.png” alt=“...” width=“80” /> Resultado:

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

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!

Eles também usam :)

Utilize a ferramenta do Yahoo. http://www.smushit.com/ysmush.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

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

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/

Antes

9.86k

Depois

7.6k

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/

Antes

22.4k

Depois

17.5k

Exemplo de melhoria

Online JavaScript/CSS Compression Using YUI Compressor

http://www.refresh-sf.com/yui/

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.

= 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.

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 “ :)

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

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/

Dúvidas?

Disponível em:

http://www.slideshare.net/andersonagr

Obrigado!

Contato:

@andersonaguiar

andersonaguiarrr@gmail.com