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


Desenvolvemosaplicações em Rails

@plataformatec



Coaching emRails e Agile

@plataformatec



ConsultoriaCoaching emRails e Agile

@plataformatec


Novo projeto => Yay!


X meses depois...


DONE!


Hora do deploy \o/


Setup do servidor - ruby, rubygems, etc...

Setup do apache ou nginxPassengerCapistrano

...


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!


#1 Diminuir o número de requisições

Combine arquivos

JS CSS



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

Arquivos separados ajudam a organizar em desenvolvimento. Mas o usuário não precisa disso.

Jammit, Asset Packager, Rails 3.1 asset pipeline, etc.


http://documentcloud.github.com/jammit/

http://documentcloud.github.com/jammit/

http://synthesis.sbecker.net/pages/asset_packager

http://synthesis.sbecker.net/pages/asset_packager

http://guides.rubyonrails.org/asset_pipeline.html

http://guides.rubyonrails.org/asset_pipeline.html


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


http://www.akamai.com/

http://www.akamai.com/

http://www.edgecast.com/

http://www.edgecast.com/

http://www.level3.com/index.cfm?pageID=36

http://www.level3.com/index.cfm?pageID=36

#2 Utilizar um CDN

Para aplicações realmente grandes! $$


#3 Evitar src ou href vazios

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


#3 Evitar src ou href vazios

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


#4 Adicionar header Expires

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

htmlcss

javascriptxmljsonetc...

Todo texto ==


#5 Habilitar Gzip

Até 70% de ganhos ao compactar usando gzip.


#5 Habilitar Gzip

Apache => mod_deflate

<IfModule mod_deflate.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.

Mais feedback visual para o usuário!

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Example App</title> <link href="/stylesheets/application.css" media="all" rel="stylesheet" type="text/css" />


http://qa.casa.abril.com.br/stylesheets/reset.css?1314388810

http://qa.casa.abril.com.br/stylesheets/reset.css?1314388810

#7 Colocar JS no final

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>


https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js

https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js

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


#10 Reduzir Lookups DNS

Muitos hosts diferentes que não estão cacheados,

significam 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


#10 Reduzir Lookups DNS

3 Lookups de DNS

foo.com/image1.pngbar.com/image2.pngbaz.com/image3.png


#11 Minificar JS e CSS

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


http://code.google.com/closure/compiler/docs/gettingstarted_ui.html

http://code.google.com/closure/compiler/docs/gettingstarted_ui.html

http://developer.yahoo.com/yui/compressor/

http://developer.yahoo.com/yui/compressor/

https://github.com/mishoo/UglifyJS

https://github.com/mishoo/UglifyJS

http://dean.edwards.name/packer/

http://dean.edwards.name/packer/

http://www.crockford.com/javascript/jsmin.html

http://www.crockford.com/javascript/jsmin.html

http://code.google.com/p/cssmin/

http://code.google.com/p/cssmin/

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


#14 Configurar ETags

Cache, cache, cache!

Configuração de servidorApache / Nginx

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


#14 Configurar ETags

Padrão Otimizado

304 Not modifed200 OK

Requisição 1

Requisição 2

200 OK

Requisição 1

Requisição 2 + ETag em cache

200 OK + ETag

Servidor envia header ETag junto com o componente requisitado.Navegador requisita o componente novamente, enviando ETag em cache.Servidor 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.


#17 Reduzir o número de elementos DOM

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

document.getElementsByTagName('*').length


#17 Reduzir o número de elementos DOM

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!


#20 Usar domínios sem cookie para componentes

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)


http://www.example.org



Site => example.org (seta cookies)

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

Use outro host diferentestatic-example.org




#21 Evitar filtros

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


#23 Ter um favicon.ico pequeno e cacheável

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


#23 Ter um favicon.ico pequeno e cacheável

Mantenha pequeno, abaixo de 1kb.

Define 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 suficiente.


10s não é aceitável.


Otimize no frontend.

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


No final, 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

Technology

diminuir o nmero

reduzir o nmero

desenvolvemosaplicaes

minicar js e css

arquivo js e

colocar css

mas o usurio

evitar src ou href vazios