O guia definitivo de performance para o desenvolvedor front-end

PESO
no browser
CSS HTML JavaScript Servidor jQuery Bnus Imagens
E se juntssemos os feras que trabalham em grandes portais para criar o guia definitivo de performance para front-end? Mas nada daqueles guias chatos feitos para robs, que tal fazer algo divertido? Que tal juntar Briza Bueno (Americanas.com), Davidson Fellipe (Globo.com), Giovanni Keppelen (ex-Peixe Urbano), Jaydson Gomes (Terra), Marcel Duran (Twitter), Mike Taylor (Opera), Renato Mangini (Google) e Srgio Lopes (Caelum) para criar a melhor referncia possvel? Foi isso mesmo que fizemos! E iremos te ajudar nessa batalha de criar sites cada vez mais rpidos. Zeno Rocha , lder do projeto.

COMO PERDER

performance importa mesmo?

??

claro que importa e voc sabe disso. Ento por que continuamos fazendo sites lentos que prejudicam a experincia do usurio? Esse um guia prtico voltado para comunidade que vai te mostrar como fazer sites mais rpidos. No vamos perder tempo mostrando cases milionrios de performance, vamos direto ao ponto!

HTML
27
evite cdigos inline
Existem duas formas bsicas de voc lidar com CSS ou JavaScript na sua pgina. 1) Inline: onde o CSS definido dentro da tag dentro da tag < s c r i p t > 2) Externo: onde o CSS carregado na tag do atributo s r c da tag < s c r i p t >
< s t y l e >

e o JavaScript

< l i n k >

e o JavaScript atravs

A primeira opo, apesar de reduzir o nmero de requisies, aumenta o tamanho do documento HTML. Ela pode ser interessante quando voc tem arquivos pequenos e o custo de uma requisio maior. Nesse caso, faa testes para avaliar se h realmente ganho. Avalie tambm o objetivo da pgina e sua audincia, se o esperado que usurios visitem essa pgina somente uma nica vez, como por exemplo uma campanha temporria onde no se espera futuras visitas mesma, utilizar inline ajudar na reduo do nmero de requisies. > Evite escrever manualmente o CSS/JS no meio do HTML (prefira alguma ferramenta que automatize este processo). J a segunda opo, no s melhora a organizao do seu cdigo, como tambm possibilita que eles sejam armazenados no cache do navegador. Prefira essa opo para a maior parte dos casos, quando lidamos com arquivos grandes e o custo de coloc-lo inline maior.

26

estilos no topo, scripts no rodap

Quando colocamos as folhas de estilo no < h e a d > permitimos que a pgina renderize progressivamente, o que causa uma percepo ao usurio de que est carregando mais rpido. Enquanto que se colocssemos prximo ao fim da pgina, ela seria renderizada sem estilo algum at que o download do CSS terminasse. Com relao ao JavaScript, importante manter a chamada dos scripts no fim do pgina, j que eles bloqueiam a renderizao da pgina enquanto so carregados e executados.
< ! d o c t y p eh t m l > < h t m l > < h e a d > < m e t ac h a r s e t = " U T F 8 " > < t i t l e > B r o w s e rD i e t < / t i t l e > < ! -C S S> < l i n kr e l = " s t y l e s h e e t "h r e f = " s t y l e . c s s "m e d i a = " a l l " > < / h e a d > < b o d y > < p > L o r e mi p s u md o l o rs i ta m e t . < / p > < ! -J S> < s c r i p ts r c = " s c r i p t . j s " > < / s c r i p t > < / b o d y > < / h t m l >

25

comprima seu html

Para manter um cdigo legvel bom escrever comentrios e ter cuidado com indentao.
< p > L o r e mi p s u md o l o rs i ta m e t . < / p > < ! -M yL i s t> < u l > < l i > < ah r e f = " # " > < / a > < / l i > < l i > < ah r e f = " # " > < / a > < / l i > < l i > < ah r e f = " # " > < / a > < / l i > < / u l >

S que para a mquina, nada disso importa. Por isso, lembre-se de

comprimir seu HTML atravs de uma ferramenta automatizada.

< p > L o r e mi p s u md o l o rs i ta m e t . < / p > < u l > < l i > < ah r e f = " # " > < / a > < / l i > < l i > < ah r e f = " # " > < / a > < / l i > < l i > < ah r e f = " # " > < / a > < / l i > < / u l >

Isso ir economizar muitos e muitos bytes, acelerando assim o download, anlise e tempo de execuo. > Ferramentas teis: HTML Compressor .

24

experimente o async & defer

Para explicar como esses atributos so teis para melhorar a performance, melhor entender o que acontece quando no utilizamos eles.

< s c r i p ts r c = " e x a m p l e . j s " > < / s c r i p t >

Dessa forma, a pgina aguarda o script terminar de carregar antes de continuar sua renderizao e sua execuo feita imediatamente aps. Isso pode aumentar significativamente o tempo de carregamento da pgina. Algumas vezes esse comportamento desejado, outras vezes no.
< s c r i p ta s y n cs r c = " e x a m p l e . j s " > < / s c r i p t >

O download do script feito de forma assncrona enquanto o processo de renderizao da pgina continua a ser feito. O script executado

depois que o download estiver completo.

< s c r i p td e f e rs r c = " e x a m p l e . j s " > < / s c r i p t >

Assim como o exemplo acima, o download do script feito de forma assncrona. Mas sua execuo se d apenas quando todo o processo de renderizao estiver concludo.

CSS
23
comprima sua folha de estilo
Para manter um cdigo legvel bom escrever comentrios e ter cuidado com indentao.
. c e n t e r{ w i d t h :9 6 0 p x ; m a r g i n :0a u t o ; } / *-S t r u c t u r e-* / . i n t r o{ m a r g i n :1 0 0 p x ; p o s i t i o n :r e l a t i v e ; }

S que para a mquina, nada disso importa. Por isso, lembre-se de comprimir seu CSS atravs de uma ferramenta automatizada.
. c e n t e r { w i d t h : 9 6 0 p x ; m a r g i n : 0a u t o } . i n t r o { m a r g i n : 1 0 0 p x ; p o s i t i o n : r e l a t i v e }

Isso ir economizar muitos e muitos bytes, acelerando assim o download, anlise e tempo de execuo. Para aqueles que usam pr-processadores como Sass, Less e Stylus, possvel configurar a compilao para gerar o cdigo j minificado. > Ferramentas teis: YUI Compressor , CSS Minifier e cssmin.js .

22

combine vrios arquivos css em um s

Outra boa prtica para organizao e manuteno separar seu estilo em diversos arquivos.
< l i n kr e l = " s t y l e s h e e t "h r e f = " s t r u c t u r e . c s s "m e d i a = " a l l " > < l i n kr e l = " s t y l e s h e e t "h r e f = " b a n n e r . c s s "m e d i a = " a l l " > < l i n kr e l = " s t y l e s h e e t "h r e f = " l a y o u t . c s s "m e d i a = " a l l " > < l i n kr e l = " s t y l e s h e e t "h r e f = " c o m p o n e n t . c s s "m e d i a = " a l l " > < l i n kr e l = " s t y l e s h e e t "h r e f = " p l u g i n . c s s "m e d i a = " a l l " >

Porm, preciso realizar uma requisio HTTP para cada um dos arquivos e sabemos que o navegador no consegue lidar com muitos downloads paralelos.
< l i n kr e l = " s t y l e s h e e t "h r e f = " m a i n . c s s "m e d i a = " a l l " >

Logo, combine seu CSS. Quanto menor for o nmero de arquivos, menor ser o nmero de requisies feitas e mais rpida sua pgina carregar. Quer ter o melhor dos dois mundos? Automatize esse processo atravs de uma ferramenta de build. > Ferramentas teis: Grunt .

21

no use seletor universal

Evite usar seletor universal, assim voc est obrigando o navegador a buscar todos os elementos em seu HTML, e depois aplicar determinada regra para cada elemento.

*{ m a r g i n :0 ; p a d d i n g :0 ; b o r d e r :n o n e ; t e x t d e c o r a t i o n :n o n e ; o u t l i n e :0 ; }

Inclusive muitos elementos podem no aceitar o atributo que voc est tentando definir. Por isso, recomendamos que voc use um CSS Reset, ou at crie o seu prprio. > Ferramentas teis: Yahoo! Reset , Normalize e Eric Meyer's Reset .

20

prefira <link> a @import

H duas maneiras de incluir uma folha de estilo externa na sua pgina, pode ser atravs da tag < l i n k >:
< l i n kr e l = " s t y l e s h e e t "h r e f = " s t y l e . c s s " >

Ou da propriedade @ i m p o r t dentro de uma folha de estilo externa ou inline em uma tag < s t y l e >:
@ i m p o r tu r l ( ' s t y l e . c s s ' ) ;

Quando voc utiliza a segunda opo a partir de uma folha de estilo externa, o navegador incapaz de realizar o download em paralelo, o que causa atraso na cascata de carregamento dos arquivos.

19

pense e repense seu key selector

Key selector o seletor chave da sua expresso CSS. Na maioria das vezes, os desenvolvedores no ligam para ele por no saberem exatamente como funciona.
h e a d e rn a vu ll ia{ }

Repare na expresso acima. O que acontece que o navegador comea a renderizar sua expresso CSS pela direita, ou seja seu key selector a. Isso exige muito do browser, pois primeiro ele busca todos os elementos a em seu HTML, depois todos l i a e assim por diante at chegar em h e a d e rn a vu ll i a.
h e a d e rn a vu ll i*{/ *P s s i m o* /} h e a d e rn a vu ll ia{/ *M u i t oR u i m* /} n a va{/ *R u i m* /} n a va . n a v l i n k{/ *B o m* /} n a v. n a v l i n k{/ * t i m o* /} . n a v l i n k{/ *E x c e l e n t e* /}

JAVASCRIPT
carregue cdigo de terceiros de forma

18

assncrona
Quem nunca carregou um cdigo de terceiros para embedar um vdeo do YouTube ou colocar um boto de like/tweet? O grande problema que nem sempre esses cdigos so entregues de maneira eficiente, seja pela conexo do usurio, ou pela conexo no servidor onde esto hospedados. Ou esse servio pode estar temporariamente fora do ar ou mesmo ser bloqueado pelo firewall do usurio ou da empresa dele.

Para evitar que isso se torne um ponto crtico no carregamento de um site ou, pior, trave o carregamento da pgina toda, sempre carregue estes cdigos de forma assncrona (ou ento use Friendly iFrames ).
v a rs c r i p t=d o c u m e n t . c r e a t e E l e m e n t ( ' s c r i p t ' ) , s c r i p t s=d o c u m e n t . g e t E l e m e n t s B y T a g N a m e ( ' s c r i p t ' ) [ 0 ] ; s c r i p t . a s y n c=t r u e ; s c r i p t . s r c=u r l ; s c r i p t s . p a r e n t N o d e . i n s e r t B e f o r e ( s c r i p t ,s c r i p t s ) ;

> Vdeo: comparao de uma pgina normal vs uma pgina onde o cdigo de terceiros est inacessvel .

17

guarde o tamanho do array

O loop sem dvida uma das partes mais importantes com relao a performance no JavaScript. Busque otimizar a lgica dentro de um loop para que cada iterao seja feita de forma eficiente. Um modo para fazer isso armazenando o tamanho do array que ser percorrido, assim ele no precisa ser recalculado toda vez que o loop for iterado.
v a ra r r=n e wA r r a y ( 1 0 0 0 ) ; f o r( v a ri=0 ;i<a r r . l e n g t h ;i + + ){ / /R u i m-ot a m a n h op r e c i s as e rc a l c u l a d o1 0 0 0v e z e s } f o r( v a ri=0 ,l e n=a r r . l e n g t h ;i<l e n ;i + + ){ / /B o m-ot a m a n h os c a l c u l a d o1v e zed e p o i sa r m a z e n a d o }

> Resultado no JSPerf > Observao: Embora engines de browsers modernos otimizam automaticamente esse processo, continua sendo uma boa prtica atender o legado de browsers que ainda perduram. Em iteraes sobre colees HTML como uma lista de Nodes (NodeList) geradas por exemplo atravs de d o c u m e n t . g e t E l e m e n t s B y T a g N a m e ( ' a ' ), isto particularmente crtico e essencial. Essas colees so consideradas "vivas", ou seja, so automaticamente atualizadas quando h alteraes no elemento qual pertencem.

v a rl i n k s=d o c u m e n t . g e t E l e m e n t s B y I d ( ' a ' ) ; f o r( v a ri=0 ;i<l i n k s . l e n g t h ;i + + ){ / /R u i m-ac a d ai t e r a oal i s t ad el i n k ss e r r e c a l c u l a d ap a r av e r i f i c a r s eh o u v em u d a n a } f o r( v a ri=0 ,l e n=l i n k s . l e n g t h ;i<l e n ;i + + ){ / /B o m-ot a m a n h od al i s t ap r i m e i r a m e n t eo b t i d oea r m a z e n a d o ,d e p o i sc o m p a r a d oac a d ai t e r a o } / /P s s i m o :e x e m p l od el o o pi n f i n i t o f o r( v a ri=0 ;i<l i n k s . l e n g t h ;i + + ){ d o c u m e n t . b o d y . a p p e n d C h i l d ( d o c u m e n t . c r e a t e E l e m e n t ( ' a ' ) ) ; / /ac a d ai t e r a oal i s t ad el i n k sa u m e n t a ,n u n c as a t i s f a z e n d oac o n d i o d et r m i n od ol o o p / /i s s on oa c o n t e c e r i as eot a m a n h od al i s t af o s s ea r m a z e n a d oeu s a d oc o m o c o n d i o }

16

evite document.write
O uso do d o c u m e n t . w r i t e faz com que a pgina fique na dependncia do seu retorno para ser completamente carregada. Essa (m) prtica j foi abolida h anos pelos desenvolvedores, mas ainda existem casos onde seu uso ainda necessrio, como no fallback sncrono de algum arquivo JavaScript. O HTML5 Boilerplate , por exemplo, faz o uso desta tcnica para carregar o jQuery localmente, caso a CDN do Google no responda.
< s c r i p ts r c = " / / a j a x . g o o g l e a p i s . c o m / a j a x / l i b s / j q u e r y / 1 . 9 . 0 / j q u e r y . m i n . j s " > < / s c r i p t > < s c r i p t > w i n d o w . j Q u e r y| |d o c u m e n t . w r i t e ( ' < s c r i p ts r c = " j s / v e n d o r / j q u e r y 1 . 9 . 0 . m i n . j s " > < \ / s c r i p t > ' ) < / s c r i p t >

> Ateno:

executado durante ou aps o evento w i n d o w . o n l o a d substitui todo o contedo da pgina atual.

d o c u m e n t . w r i t e < s p a n > f o o < / s p a n > < s c r i p t > w i n d o w . o n l o a d=f u n c t i o n ( ){ d o c u m e n t . w r i t e ( ' < s p a n > b a r < / s p a n > ' ) ; } ; < / s c r i p t >

O resultado da pgina final ser somente bar e no foobar como esperado. O mesmo ocorre quando executado aps o evento w i n d o w . o n l o a d.

< s p a n > f o o < / s p a n > < s c r i p t > s e t T i m e o u t ( f u n c t i o n ( ){ d o c u m e n t . w r i t e ( ' < s p a n > b a r < / s p a n > ' ) ; } ,1 0 0 0 ) ; w i n d o w . o n l o a d=f u n c t i o n ( ){ / /. . . } ; < / s c r i p t >

O resultado ser o mesmo do exemplo anterior caso a funo agendada pelo s e t T i m e o u t seja executada aps evento w i n d o w . o n l o a d.

15

minimize repaints e reflows

Repaints e reflows so causados quando existe alguma re-renderizao no DOM quando determinada propriedade ou elemento alterado. Repaints so disparados quando a aparncia de um elemento alterada sem alterar seu layout. Nicole Sullivan descreve isso como uma mudana de estilo como o ato de alterar um b a c k g r o u n d c o l o r. Reflows so os mais custosos, causados quando as mudanas alterando o layout da pgina, como por exemplo alterar o width de um elemento. No h dvida que ambos reflows e repaints devem ser evitados, portanto ao invs de fazer isso:

v a rm y L i s t=d o c u m e n t . g e t E l e m e n t B y I d ( " m y L i s t " ) ; f o r( v a ri=0 ;i<1 0 0 ;i + + ){ m y L i s t . i n n e r H T M L+ =" < s p a n > "+i+" < / s p a n > " ; }

Faa isso:
v a rm y L i s t=" " ; f o r( v a ri=0 ;i<1 0 0 ;i + + ){ m y L i s t+ =" < s p a n > "+i+" < / s p a n > " ; } d o c u m e n t . g e t E l e m e n t B y I d ( " m y L i s t " ) . i n n e r H T M L=m y L i s t ;

Assim voc evita manipular o DOM a cada iterao do loop, realizando isso apenas uma vez. > Resultado no JSPerf

14

comprima seu script

Assim como no CSS, para manter um cdigo legvel bom escrever comentrios e ter cuidado com indentao.
B r o w s e r D i e t . a p p=f u n c t i o n ( ){ v a rf o o=t r u e ; r e t u r n{ b a r :f u n c t i o n ( ){ / /d os o m e t h i n g } } ; } ;

S que para a mquina, nada disso importa. Por isso, lembre-se de comprimir seu JavaScript atravs de uma ferramenta automatizada.
B r o w s e r D i e t . a p p = f u n c t i o n ( ) { v a ra = ! 0 ; r e t u r n { b a r : f u n c t i o n ( ) { } } }

Isso ir economizar muitos e muitos bytes, acelerando assim o download, anlise e tempo de execuo. > Ferramentas teis: YUI Compressor , Google Closure Compiler e UglifyJS .

13

combine vrios arquivos js em um s

Outra boa prtica para organizao e manuteno separar seu script em diversos arquivos.
< s c r i p ts r c = " n a v b a r . j s " > < / s c r i p t > < s c r i p ts r c = " c o m p o n e n t . j s " > < / s c r i p t > < s c r i p ts r c = " p a g e . j s " > < / s c r i p t > < s c r i p ts r c = " f r a m e w o r k . j s " > < / s c r i p t > < s c r i p ts r c = " p l u g i n . j s " > < / s c r i p t >

Porm, preciso realizar uma requisio HTTP para cada um dos arquivos e sabemos que o navegador no consegue lidar com muitos downloads paralelos.
< s c r i p ts r c = " m a i n . j s " > < / s c r i p t >

Logo, combine seu JS. Quanto menor for o nmero de arquivos, menor ser o nmero de requisies feitas e mais rpida sua pgina carregar. Quer ter o melhor dos dois mundos? Automatize esse processo atravs de uma ferramenta de build. > Ferramentas teis: Grunt .

JQUERY
12
use sempre a ltima verso do jquery
Os membros do core do jQuery esto sempre buscando trazer novidades para a biblioteca, estes ajustes muitas vezes, esto relacionados a melhorias da legibilidade do cdigo, novas funcionalidades e principalmente otimizao de algoritmos.

Por isso, use sempre a ltima verso do jQuery.

< s c r i p ts r c = " h t t p : / / c o d e . j q u e r y . c o m / j q u e r y l a t e s t . j s " > < / s c r i p t >

Mas cuidado! Devemos evitar referncias para o arquivo listado acima, pois isso pode lhe causar problemas no futuro, j que a cada nova verso ocorre uma atualizao automtica nesse script. Logo, use o link para a verso especfica do jQuery que voc precisa.
< s c r i p ts r c = " / / a j a x . g o o g l e a p i s . c o m / a j a x / l i b s / j q u e r y / 1 . 9 . 1 / j q u e r y . m i n . j s " > < / s c r i p t >

J dizia o sbio Barney Stinson : "New is always better" :P

11

seletores
De fato seletores um dos assuntos mais importantes na utilizao do jQuery. H vrias formas de selecionar um elemento no DOM, porm isso no quer dizer que elas tem a mesma performance, voc pode buscar um elemento atravs de classe, id ou usar os mtodos f i n d ( ), c h i l d r e n ( ). De todas elas, buscar pelo ID mais rpido, pois baseado em operaes nativas do DOM:
$ ( " # f o o " ) ;

> Resultado no JSPerf

10

abuse do encadeamento de mtodos

Encadeamento significa voc pode executar um mtodo de jQuery logo aps a outro, sem a necessidade de especificar novamente o seletor. Quase todos os mtodos do jQuery possibilitam fazer encadeamento, pois grande parte deles retornam um objeto jQuery.
$ ( " # o b j e c t " ) . a d d C l a s s ( " f o o " ) . c s s ( " b o r d e r c o l o r " ," # c c c " ) . w i d t h ( 2 0 0 ) ;

Testes mostram que o no encadamento dos mtodos mais lento.

$ ( " # o b j e c t " ) . a d d C l a s s ( " f o o " ) ; $ ( " # o b j e c t " ) . c s s ( " b o r d e r c o l o r " , " # f 0 f " ) ; $ ( " # o b j e c t " ) . w i d t h ( 2 0 0 ) ;

> Resultado no JSPerf

use for ao invs de each

O uso das funes nativas do JavaScript, quase sempre, trazem execues mais rpidas que as respectivas em jQuery. Sendo assim, ao invs de utilizar o mtodo j Q u e r y . e a c h, use o f o r do prprio JavaScript. Mas ateno, apesar do f o ri n ser nativo, sua performance muitas vezes pior que o j Q u e r y . e a c h. J o bom e velho f o r nos traz uma melhor forma de deixar nossas iteraes mais rpidas, e voc ainda pode aplicar um cache para o tamanho total do array e conseguir aumentar o nmero de operaes por segundo.
f o r(v a ri=0 ,l e n=a . l e n g t h ;i<l e n ;i + +){ e=a [ i ] ; }

O uso de w h i l e reverso e f o r reverso bem discutido na comunidade, e muitas vezes citado como a forma mais rpida de se fazer uma iterao com JavaScript, porm bastante criticado devido ao fato de deixar o cdigo com uma leitura mais difcil. > Resultado no JSPerf

no use jquery...
...a no ser que seja estritamente necessrio :) s vezes JavaScript puro pode ser at mais simples que jQuery.

Pra que usar o mtodo

a t t r ( )

para buscar o ID?

$ ( ' a ' ) . o n ( ' c l i c k ' ,f u n c t i o n ( ){ c o n s o l e . l o g ($ ( t h i s ) . a t t r ( ' i d ' )) ; } ) ;

Se voc pode buscar esse atributo nativamente atravs do

$ ( ' a ' ) . o n ( ' c l i c k ' ,f u n c t i o n ( ){ c o n s o l e . l o g (t h i s . i d) ; } ) ;

t h i s.

E ainda ser mais rpido. > Resultado no JSPerf

IMAGENS

use css sprites

Essa tcnica consiste em agrupar diversas imagens em uma s.

E depois posicion-las atravs de CSS.

. i c o n f o o{ b a c k g r o u n d i m a g e :u r l ( ' m y S p r i t e . p n g ' ) ; b a c k g r o u n d p o s i t i o n :1 0 p x1 0 p x ; } . i c o n b a r{ b a c k g r o u n d i m a g e :u r l ( ' m y S p r i t e . p n g ' ) ; b a c k g r o u n d p o s i t i o n :5 p x5 p x ; }

Isso faz com que diminua absurdamente o nmero de requisies HTTP e evite atrasos no download de outros recursos da sua pgina. Ao montar seu sprite, evite deixar muito espao em branco entre as imagens, isso no afeta o peso do arquivo, mas sim o uso de memria para processar o mapa de pixels. Apesar de extremamente difundida, essa tcnica pouco usada j que os desenvolvedores no utilizam ferramentas que automatizam o processo de gerao dessa imagem. Por isso, separamos algumas que podem te ajudar nisso. > Ferramentas teis: SpritePad , Compass , SpriteMe e Sprite Cow .

no escale imagens direto no cdigo

Defina sempre o w i d t heo h e i g h t de uma imagem, isso ir reduzir o tempo de renderizao evitando desnecessrios repaints e reflows.
< i m gw i d t h = " 1 0 0 "h e i g h t = " 1 0 0 "s r c = " l o g o . j p g "a l t = " L o g o " >

Sabendo disso, Joozinho que tem uma imagem de 700x700px resolve exib-la em um tamanho de 50x50px. O que o malandro Joozinho no sabe que uma dezena de KBs sero

trafegados a mais pela rede desnecessariamente. Por isso, lembre-se: s porque voc pode definir a altura e largura de uma imagem no HTML, no quer dizer que deve redimensionar imagens maiores do que precisa.

otimize suas imagens

Arquivos de imagens possuem muitos KB de informaes desnecessrias na Web. Por exemplo, uma foto JPEG tem um monte metadados exif colocados pela cmera (data da foto, modelo da cmera, local etc). Um PNG possui uma srie de informaes sobre cores, metadados e, s vezes, at uma miniatura da imagem embutida no meio. Nada disso importante para a renderizao da imagem no navegador e s gasta bytes de rede. Existem ferramentas de otimizao de imagens que removem todas essas informaes desnecessrias e te do um arquivo mais enxuto mas visualmente idntico. Online, voc encontra a Kraken.io , o Smush.it , entre outras. Para instalar no computador, existe o ImageOptim (Mac) ou o RIOT (Windows). Alm disso, h ferramentas em linha de comando como pngout, jpegtran, gifsicle e mais. As ferramentas anteriores so bem fceis de usar e geram arquivos menores mas com a mesma imagem do arquivo original. Elas fazem uma compresso sem perda de qualidade visual (chamamos de lossless). Outra forma de otimizar imagens comprimi-las com certas perdas visuais aceitveis. Otimizaes lossy. Quando voc exportar um JPEG, por exemplo, pode escolher a qualidade (um nmero de 0 a 100). Pensando em performance, pegue sempre o nmero mais baixo onde a qualidade visual ainda aceitvel. Uma ferramenta online que ajuda a diminuir a qualidade de JPEGs com perdas visualmente imperceptveis a JPEGmini . Outra otimizao lossy famosa diminuir o nmero de cores na paleta de um PNG, ou transformar arquivos PNG-24 em PNG-8.

SERVIDOR
4
habilite o cache dos arquivos
A melhor forma de otimizar os requests da sua pgina no fazer requests na pgina, claro. E uma das maneiras mais teis pra evitar requisies desnecessrias, deixar o navegador fazer cache dos arquivos. Por padro, o navegador no faz cache das coisas, pra evitar ficar com arquivos desatualizados. Mas ns podemos indicar que determinado arquivo pode ser, sim, guardado em cache.

Essa configurao feita no servidor e depende de qual voc estiver usando. No Apache, por exemplo, voc pode editar seu arquivo . h t a c c e s s e colocar a seguinte configurao:
E x p i r e s A c t i v eO n E x p i r e s B y T y p ei m a g e / g i f" a c c e s sp l u s6m o n t h s " E x p i r e s B y T y p ei m a g e / j p e g" a c c e s sp l u s6m o n t h s " E x p i r e s B y T y p ei m a g e / p n g" a c c e s sp l u s6m o n t h s " E x p i r e s B y T y p et e x t / c s s" a c c e s sp l u s6m o n t h s " E x p i r e s B y T y p et e x t / j a v a s c r i p t" a c c e s sp l u s6m o n t h s " E x p i r e s B y T y p ea p p l i c a t i o n / j a v a s c r i p t" a c c e s sp l u s6m o n t h s "

A configurao acima habilita um cache de 6 meses para imagens, CSS e JS o recomendado pelo menos 1 ms de cache. Outros servidores tm configuraes parecidas. Um ponto importante que, uma vez cacheado, o browser no refaz mais o request. Se precisarmos alterar o contedo daquele arquivo, no conseguimos. Pra enviar uma verso nova, precisamos mudar o nome

do arquivo. Uma forma recomendada colocar algum tipo de cdigo de verso ou timestamp no nome do arquivo. Por exemplo, ao invs de h o m e . j s, voc pode usar h o m e v 1 . j s e, quando precisar atualizar o arquivo, renomeia ele pra h o m e v 2 . j s. Outra forma comum passar um parmetro GET na URL: h o m e . j s ? v = 1e h o m e . j s ? v = 2. Esse mtodo tem a desvantagem sobre a alternativa de renomear j que alguns proxies na internet ignoram parmetros GET, mas aderem as regras de cache, o que lhe permite utiliz-las quando precisar.

gzip
Boa parte do contedo que trafegamos em um site texto (HTML, CSS, JavaScript, JSON, XML etc). Para esse tipo de contedo, uma boa prtica habilitar a compresso GZIP no servidor. O GZIP comprime os dados no servidor antes de enviar via rede para o navegador do usurio. como zipar um arquivo antes de mandar pra algum, o tamanho final fica bem menor. Todos os navegadores modernos tm suporte a GZIP, assim como os servidores. A configurao especfica de servidor, ento difcil falar de todos aqui. Mas costuma ser bem simples. No Apache, por exemplo, voc pode editar o arquivo . h t a c c e s s e habilitar o deflate para os tipos de arquivo que quiser:
A d d O u t p u t F i l t e r B y T y p eD E F L A T Et e x t / h t m l A d d O u t p u t F i l t e r B y T y p eD E F L A T Et e x t / p l a i n A d d O u t p u t F i l t e r B y T y p eD E F L A T Et e x t / x m l A d d O u t p u t F i l t e r B y T y p eD E F L A T Et e x t / c s s A d d O u t p u t F i l t e r B y T y p eD E F L A T Ea p p l i c a t i o n / j a v a s c r i p t

Essa configurao costuma ser bem simples de fazer em todos os servidores do mercado (veja na documentao do seu!) e uma das dicas mais eficientes para se melhorar a performance da pgina.

BNUS

ferramentas de diagnstico: suas melhores

amigas

Se voc quer se aventurar nesse mundo, imprescindvel instalar as extenses YSlow e PageSpeed no seu Chrome ou Firefox, elas sero suas melhores amigas a partir desse momento. Ou se preferir ferramentas online, visite o WebPageTest , HTTP Archive ou PageSpeed (site). Em geral elas analisam a performance do seu site, geram um relatrio e do uma nota para ele, sem contar nas dicas preciosas que apresentam para voc resolver cada um dos problemas.

por hoje s!

Esperamos que depois desse guia voc possa colocar seu site em forma :) Lembre-se que, como tudo na vida, no existe bala de prata . Otimizar a performance da sua aplicao muito legal, mas nem todas suas decises de desenvolvimento devem ser baseadas nisso, s vezes preciso sacrificar um lado para aprimorar outro. Quer saber mais? Consulte as Referncias que usamos para escrever esse guia. Tem sugestes? Envie um tweet para @zenorocha ou um pull request no Github. Compartilhe com seus amiguinhos, vamos criar uma web mais rpida para todos \o/