Professional Documents
Culture Documents
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
??
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
25
Isso ir economizar muitos e muitos bytes, acelerando assim o download, anlise e tempo de execuo. > Ferramentas teis: HTML Compressor .
24
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
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
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
*{ 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
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
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
> 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:
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
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
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
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.
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 >
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 " ) ;
10
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.
a t t r ( )
t h i s.
IMAGENS
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 .
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.
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
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/