Alta Performance em Aplicações Web

ALTA PERFORMANCE EM
APLICAÇÕES WEB

{Anderson Aguiar
@andersonaguiar }

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.

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

Exemplo:

Tamanho original: 256x32

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

Resultado:

<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

1 requisição ao invés de 10! 1 requisição ao invés de 6!

background-position: -0px -0px;
background-position: -80px -0px; background-position: 0px 0px;
background-position: -100px -0px; background-position: 0px -60px;

Tools:
http://css-sprit.es/
http://spritegen.website-performance.org/
http://www.spritecow.com/

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

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

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/

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/

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/

Obrigado!
Disponível em:
http://www.slideshare.net/andersonagr

Contato:
@andersonaguiar
andersonaguiarrr@gmail.com

Alta Performance em Aplicações Web

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Alta Performance em Aplicações Web

Semelhante a Alta Performance em Aplicações Web (20)

Alta Performance em Aplicações Web