Recentemente o Google anunciou que iria contar o tempo de carregamento das páginas em seu algoritmo. Isto significa que páginas lentas podem ser prejudicadas nos resultados de buscas.

O carregamento do Front End dos nossos sites é um fator importante no resultado final para o usuário. O Maurício Maia do Buzzvolume publicou um post comparando o desempenho do Front End dos principais sites de notícias do Brasil. A maioria deles não teve um bom desempenho.

Vamos então as melhores práticas para acelerar o carregamento do seu site.

Minimize HTTP Requests

Para a maior parte dos sites o maior gargalo no tempo de carregamento de uma página é o front end. Entre os fatores mais importantes no tempo de carregamento é o número de componentes que serão requisitados pelo browser.

Coloque estilos no topo

A W3C claramente recomenda que os estilos fiquem no HEAD do documento. Colocar os estilos primeiro permite que página carregue progressivamente o que representa um melhor feedback para o usuário.

Coloque scripts no final

A especificação HTTP/1.1 que browsers não baixem mais de 2 componentes em paralelo por hostname. Os scripts da sua página bloqueiam downloads em paralelo de outros componentes mesmo que estes estejam em hostnames diferentes. Mover os scripts para o final pode ser um problema caso você use document.write para renderizar coisas na sua página.

Evite expressões CSS

CSS Expressions estão disponíveis no IE desde a versão 5. Elas permitem que você faça com que um dos atributos sejam dinâmicos e não uma constante como é o padrão. Estes atributos podem receber o valor do resultado de uma expressão javascript. Este recurso é ignorado em outros browsers mas no IE pode deixar sua página mais lenta.

Minimize CSS e Javascript

O processo conhecido como “Minification” consiste em retirar caracteres desnecessários e comentários do código para diminuir o tamanho do arquivo e assim diminuir o tempo total de carga da página. A maioria das ferramentas disponíveis hoje em dia conseguem diminuir em até 25% o tamanho dos arquivos.

Evite redirecionamentos

Redirecionamentos são criados usualmente utilizando código de status 301 e 302.O problema dos redirecionamentos é que normalmente não existe nenhum processo de cache para eles mesmo o famoso “301 Moved Permanently”. Estes códigos ficam no HTTP Header como no exemplo :

HTTP/1.1 301 Moved Permanently
Location: http://examplo.com/novaurl
Content-Type: text/html

Lembre-se que isto deixa a experiência do usuário pior pois nenhum HTML vai ser carregado até que o redirecionamento seja resolvido.

Remova scripts duplicados

Pode não parecer mas muitos websites ainda hoje tem o mesmo script importado mais de uma vez. Isto pode acontecer por causa de plugins e widgets de terceiros ou mesmo por falta de planejamento e atenção. Além do problema da demora em baixar um arquivo desnecessário ainda podemos atrapalhar o carregamento de outros elementos em paralelo.

Minimize o número de iFrames

Iframes permitem que outros documentos HTML sejam inseridos dentro do documento atual. Eles são importantes veículos para widgets e mesmo anúncios. Mesmo assim eles cobram um preço caro em performance. Evite usar sempre que possível.

Minimize acesso ao DOM

Acessar elementos DOM via javascript muitas vezes é lento. Para evitar problemas de performance faça cache das referências a elementos. Por exemplo :

elemento = document.getElementById(“id”);

Passe a utilizar a referência em vez de sempre chamar getElementById quando for acessar este elemento. Muito mais pode ser feito para evitar parsear sempre a arvore DOM.

Reduza o número de elementos DOM

Uma página com muitos elementos DOM significa uma página maior e por isto mais demorada para carregar. Mas um dos maiores impactos pode ser no acesso do javascript aos elementos da página. Faz muita diferença quando você tem loops que tem que passar por todos os elementos. Se você tem 300 ou 3000 elementos é uma grande diferença se você tem um loop que passa por todos eles.

Carregue frameworks javascript de um CDN

Alguns hosts fornecem a possibilidade de se carregar frameworks javascript conhecidos a partir de seus CDNs isto aumenta bastante a possibilidade que um de seus visitantes já tenha aquele framework cacheado para a URL fornecida pelo host. Uma alternativa gratuita e muito abrangente é fornecida pelo Google.