1,2,3 live! fronted optimizations @ guru sc - 2011.10.01

1, 2, 3... LIVE!

Performance no frontend:
faça suas aplicações voarem

Monday, October 3, 11

Carlos Antonio

@cantoniodasilva


@plataformatec


Desenvolvemos
aplicações em Rails

@plataformatec


Desenvolvemos

@plataformatec

Coaching em
Rails e Agile


Desenvolvemos

@plataformatec

Coaching em
Consultoria
Rails e Agile


Novo projeto => Yay!


X meses depois...


DONE!


Hora do deploy o/


Setup do servidor - ruby,
rubygems, etc...
Setup do apache ou nginx
Passenger
Capistrano
...


cap production deploy...
Sucesso!


Hora das férias?


yeah!


No 1º (feliz) dia de férias:

O cliente liga: a app está
morrendo, lenta, demora uma
vida para carregar!


1 vida == 10s


:bomb:


Esperar é um saco.


E a culpa é de quem?


Ruby é lento.


Será mesmo?


80 a 90% do tempo de
renderização é gasto no
navegador.


WTF!?!


SIM!

A maior parte do tempo de
renderização de uma página não é
gasto no servidor, mas sim no
navegador.


Performance?

Vamos otimizar o frontend!


Hora do checklist!


#1 Diminuir o número de requisições
#2 Utilizar um CDN
#3 Evitar src ou href vazios
#4 Adicionar header Expires
#5 Habilitar Gzip
#6 Colocar CSS no topo
#7 Colocar JS no final
#8 Evitar expressões CSS
#9 Deixar JS e CSS em arquivos externos
#10 Reduzir Lookups DNS
#11 Minificar JS e CSS
#12 Evitar redirects
#13 Remover scripts duplicados
#14 Configurar ETags
#15 Permitir cache para Ajax
#16 Usar GET para requisições Ajax
#17 Reduzir o número de elementos DOM
#18 Evitar 404
#19 Reduzir o tamanho dos cookies
#20 Usar domínios sem cookie para componentes
#21 Evitar filtros
#22 Não escalar imagens no HTML
#23 Ter um favicon.ico pequeno e cacheável


Ahhhhhhhhhhh!
Tudo isso?


Easy!



Combine arquivos

JS CSS



Sirva 1 arquivo js e 1
arquivo css em produção.

Arquivos separados
ajudam a organizar em
Jammit, Asset Packager, Rails 3.1 asset pipeline, etc. desenvolvimento. Mas o
usuário não precisa disso.



Use CSS Sprites

Combine imagens pequenas
em uma única imagem maior.


#2 Utilizar um CDN

Distribua seus assets em
diferentes lugares, mais
próximos do usuário.

Akamai Technologies, EdgeCast, level3


#2 Utilizar um CDN

Para aplicações realmente
grandes! $$



<img src="">

Browsers constumam fazer
uma nova requisição para a
página atual.
Isso está definido em RFC, então em teoria
os browsers estão fazendo o correto.

Browsers novos ignoram isso.

HTML 5 adicionou na RFC instrução para
ignorar src/href vazios.



E não precisamos de
requisições que não valem nada.



Diga para seu navegador
fazer cache de assets por
algum tempo.



Mas não eternamente!

1 mês ~ 1 ano



Apache => mod_expires

<IfModule mod_expires.c>
<FilesMatch ".(ico|jpg|jpeg|png|gif|js|css)$">
ExpiresActive On
ExpiresDefault "access plus 1 month"
</FilesMatch>
</IfModule>



Nginx => HttpHeadersModule

if ($request_uri ~* ".(ico|css|js|gif|jpe?g|png)$") {
expires 30d;
break;
}


#5 Habilitar Gzip

Compacte todo texto que
sai do seu servidor!


#5 Habilitar Gzip

html
css
javascript
Todo texto ==
xml
json
etc...


#5 Habilitar Gzip

Até 70% de ganhos ao
compactar usando gzip.


#5 Habilitar Gzip

Apache => mod_deﬂate

<IfModule mod_deﬂate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml

AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/x-javascript application/
javascript
AddOutputFilterByType DEFLATE application/rss+xml
</IfModule>


#5 Habilitar Gzip

Nginx => HttpGzipModule

gzip on;
gzip_types text/plain text/css application/x-javascript text/xml
application/xml application/xml+rss text/javascript;


#6 Colocar CSS no topo

CSS é carregado e
interpretado mais rápido.

<!DOCTYPE html>
Mais feedback visual
<html> para o usuário!
<head>
<meta charset="UTF-8">
<title>Example App</title>
<link href="/stylesheets/application.css" media="all" rel="stylesheet" type="text/css" />


#7 Colocar JS no ﬁnal

Scripts bloqueiam
downloads paralelos e
renderização da página.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
</body>
</html>


#8 Evitar expressões CSS

Expressões são executadas a
cada render, resize, scroll, ou
movimento do mouse!

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );


#9 Deixar JS e CSS em arquivos externos

Arquivos externos podem
ser cacheados.

Js/css inline, não.
Remover do html
também diminui o
tamanho final da página.



Muitos hosts diferentes que
não estão cacheados,
signiﬁcam mais tempo para
lookup de DNS.
Navegadores possuem
cache de DNS, e cada
navegador expira isso em
um tempo diferente.

100~120 ms por lookup
de DNS



3 Lookups de DNS

foo.com/image1.png
bar.com/image2.png
baz.com/image3.png



Elimine tudo que não é
necessário dos arquivos:
espaços, comentários, etc.

Diferença entre
minificar e obfuscar?



20 ~ 25% de ganho no
tamanho dos arquivos.



Mas não faça isso manualmente!

Existem diversas ferramentas
para ajudar nesse processo.

Closure Compiler,YUI Compressor, UglifyJS, Packer, JSMin, CSSMin, etc...


#12 Evitar redirects

HTTP status 301 e 302 são
extremamente custosos, e
fazem o usuário esperar mais.


#13 Remover scripts duplicados

Duplo trabalho? Quem gosta.

É mais comum do que
imaginamos.
Um estudo do Yahoo
mostrou que 2 dos 10
sites mais acessados dos
EUA possuía scripts
duplicados.



Cache, cache, cache!

Conﬁguração de servidor
Apache / Nginx

ETag: "10c24bc-4ab-457e1c1f"



Requisição 1 Requisição 1

200 OK 200 OK + ETag
Requisição 2 +
Requisição 2 ETag em cache

200 OK 304 Not modifed

Padrão Otimizado
Ser vidor envia header ETag junto com o componente requisitado.
Navegador requisita o componente novamente, enviando ETag em cache.
Ser vidor retorna 304 se a ETag do componente não mudou.

If-None-Match


#15 Permitir cache para Ajax

Assíncrono != Instântaneo

Tenha os mesmos cuidados com
cache em requisições Ajax.


#16 Usar GET para requisições Ajax

POST usa 2 etapas: 1 para enviar os
cabeçalhos, outro para enviar o body.

Não quer dizer que não é
para usar POST. Quer
dizer: não use POST por
usar.



Muitos elementos signiﬁcam uma
página complexa de renderizar, e mais
lenta para acessar usando javascript.

document.getElementsByTagName('*').length



Cuidado com

<div></div>

para montar seu layout!


#18 Evitar 404

Fazer uma requisição para receber
404 é jogar tempo fora.

Isso é muito comum com assets!


#19 Reduzir o tamanho dos cookies

Cookies são enviados em TODOS os
requests, inclusive para assets.

Quanto menor o tamanho dos
cookies, melhor!



Assets não precisam de cookies. Eles
são tráfego de rede desnecessário.



Site => www.example.org
(www seta cookies)

Assets => static.example.org
(cookie-free)



Site => example.org
(seta cookies)

Assets => static.example.org
(seta cookies - já era)

Use outro host diferente
static-example.org


#21 Evitar ﬁltros

AlphaImageLoader para corrigir
transparência do IE < 7.

Esqueça!


#22 Não escalar imagens no HTML

Imagem maior == download maior.

Escalar no navegador == mais
processamento para renderizar.

<img width="100" height="100" src="mycat.jpg" alt="My Cat" />



É um mal necessário, então é melhor
não responder com 404.



Mantenha pequeno, abaixo de 1kb.

Deﬁne um header Expires para alguns
meses no futuro.

Não coloque muito tempo
de Expires, pois o seu
nome não pode ser
mudado para expirar o
cache.


E agora, quem poderá nos
ajudar?


YSlow
http://developer.yahoo.com/yslow/


Page Speed
http://code.google.com/speed/page-speed/


Smush.it
http://www.smushit.com/ysmush.it/


Sprite.me
http://spriteme.org/


Sucesso!

Hora de voltar para aquelas
merecidas férias...


Finalizando...


Seu cliente não liga para isso.


Seu cliente não liga
nem um pouco
para isso.


Ele só quer resposta rápida ao
invés de “carregando...”


10s não é rápido o suﬁciente.


10s não é aceitável.


Otimize no frontend.

E 80% dos seus problemas de
performance serão resolvidos.


No ﬁnal, o que ganhamos?


Trabalho extra! :)


Uma web melhor!


E lembre-se:

Com grandes poderes vêm
grandes responsabilidades.
Uncle Ben


@cantoniodasilva blog.plataformatec.com.br

Obrigado!


1,2,3 live! fronted optimizations @ guru sc - 2011.10.01

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a 1,2,3 live! fronted optimizations @ guru sc - 2011.10.01

Semelhante a 1,2,3 live! fronted optimizations @ guru sc - 2011.10.01 (14)

1,2,3 live! fronted optimizations @ guru sc - 2011.10.01