13 de agosto de 2012 Browsers

Performance front-end – Parte 1

Entenda como você pode melhorar a velocidade do seu site de maneira rápida e simples.

Por Diego Eis

RTT (Road-trip Time) é o tempo que leva para o browser (ou qualquer outro cliente) conversar com o servidor buscando a informação solicitada pelo usuário.
Normalmente um browser inicia a comunicação com o servidor com pelo menos 3 RTTs: Uma requisição para a resolução do DNS. Outra para o setup de conexão TCP e outra para a requisição HTTP. Normalmente os websites tem muitas requisições HTTP. E isso é muito ruim. 

Ter muitas requisições significa que seu browser precisa ir e voltar várias vezes durante a abertura da página. Essa ida e volta são os RTT, ou a Road-trip Time. São as RTTs que contribuem para uma latência ruim nas redes. Se seu cliente demora para trazer a informação, o download da página é prejudicado.

Existem várias estratégias para que você diminua a quantidade de RTTs e melhore a performace da sua página sem fazer muito esforço. Com pequenos passos você consegue resultados bem grandes e interessantes. Lembre-se que alguma dicas não se aplicam a sites pequenos. Mas o que são sites pequenos? Sites pequenos são aqueles sites institucionais, os famosos “Home, Interna e Contato”. O site por si só já é minúsculo. A sua estrutura de arquivos é tranquila de se trabalhar e não precisa de tanta atenção. A performance desses sites dependem mais de onde o servidor está localizado, de qual CMS você estará utilizando e etc… Mas obviamente um mínimo de “asseio” é necessário.

Evite @import

Quando utilizamos um @import para adicionar diversos arquivos de CSS em apenas um, o browser precisa baixar o arquivo que importa o código, parsear e executar antes de descobrir que ele precisa baixar os arquivos importados.

Recomenda-se utilizar a tag link para importar os arquivos separadamente ou utilizar qualquer script que junte os arquivos e minimize para que todo seu código CSS se transforme em apenas um. Dependendo da linguagem utilizada, isso pode ser feito automaticamente, como em projetos Ruby on Rails.

Otimize a ordem dos seus scripts e estilos

Colocar a chamada dos arquivos na ordem correta pode ajudar bastante no carregamento da página. Códigos Javascripts geralmente modificam e alteram o conteúdo da página, logo os browsers demoram mais para rederizá-los por que é necessário que todas as funções daquele scripts sejam executadas e somente depois ele começa o download de outro arquivo.

Imagine que você tenha 3 arquivos de CSS e 2 de JS para chamar na sua página, e você o faz assim:

<link rel="stylesheet" type="text/css" href="stylesheet1.css">
<script type="text/javascript" src="scriptfile1.js">
<script type="text/javascript" src="scriptfile2.js">
<link rel="stylesheet" type="text/css" href="stylesheet2.css">
<link rel="stylesheet" type="text/css" href="stylesheet3.css">

Suponha agora que para fazer o download de cada um desses arquivos demora em torno de 100ms (milisegundos), o download dos arquivos seria algo como a imagem abaixo. Essa imagem peguei de uma página do Google que fala sobre o mesmo assunto:

Se você simplesmente ordenar os arquivos de outra forma, o carregamento pode ficar apenas em 200ms. Ok, você deve estar falando que eu sou louco por me preocupar com milisegundos… Mas milisegundos podem se transformar em segundos quando nós nos preocupamos.

<link rel="stylesheet" type="text/css" href="stylesheet1.css">
<link rel="stylesheet" type="text/css" href="stylesheet2.css">
<link rel="stylesheet" type="text/css" href="stylesheet3.css">
<script type="text/javascript" src="scriptfile1.js">
<script type="text/javascript" src="scriptfile2.js">

O browser baixa paralelamente os três arquivos de CSS e o primeiro arquivo de JS. Depois que o primeiro arquivo de JS foi baixado, ele começa a baixar o segundo. É uma boa prática colocar os arquivos de CSS baixarem primeiro, uma por que a renderização do browser é mais rápida quando se trata de código CSS e outra que o JS pode modificar características desses CSS, logo eles precisar estar carregados quando os scripts forem funcionar.

Combine imagens utilizando sprites

Tivemos um artigo muito bom aqui no Tableless mostrando como funcionam os CSS Sprites. É uma técnica antiga, utilizada durante muito tempo em consoles com baixa memória para guardar grandes quantidades de imagens e informações.

Sempre utilize CSS Sprites onde puder. Se você tem uma grande quantidade de ícones, se você tem uma grande quantidade de imagens decorativas e etc… Junte-as e forme um sprite de imagens que possa ser utilizado por todo o site. Isso diminui a quantidade de requisições que o browser fará no decorrer da navegação do usuário.

Quando utilizamos muitas imagens pequenas e o browser precisa fazer essas requisições juntas, há um acumulo de tarefas, chama-se request overhead.

Eu sei que trabalhar com sprites dá trabalho para manter e principalmente criar o sprite inicial. Por isso dá para usar serviços para fazer esse trabalho para você. O SpriteMe é um deles.

Combine arquivos de CSS

Modular CSS é uma coisa boa, mas é bom para sua organização. Quando nós separamos nosso código CSS em vários arquivos, isso significa que o browser vai ter que buscar cada um desses arquivos no servidor. Logo, se você modula seu CSS, você precisa fazer um trabalho de entrega desse código apenas quando for necessário. Por exemplo: se você separa o estilo da página de contato em um arquivo contato.css, o mais inteligente seria chamá-lo apenas na página de contato e assim por diante para as outras páginas.
Se você simplesmente modula seu CSS em vários arquivos, mas não faz esse planejamento de distribuição, a modularização de CSS só servirá para sua organização pessoal.

Quando combinamos os códigos CSS em um só, diminuimos a latência. O Google recomenda que tenha no máximo 3 arquivos linkados, mas o perfeito seriam 2 arquivos. Em projetos utilizando Ruby on Rails, por exemplo, é possível juntar automaticamente todo os arquivos em apenas um, sem trabalho manual. Ele ainda minimiza seu código arrancando espaços, quebras de linha e etc. Logo você precisa chamar apenas um arquivo. Baixar um arquivo grande é muito melhor do que baixar vários pequenininhos. Por quê? Requisições, lembra?

Combine arquivos de Javascript

Pelo mesmo motivo de combinar arquivos de CSS. Dá uma olhada nessa imagem que o Google disponibilizou:

Quando linkamos uma série de arquivos separadamente, produzimos uma série de requisições no servidor e isso é ruim. Lembre-se que o sinal tem que ir e voltar para podermos começar a carregar os arquivos. Por isso é melhor você carregar um arquivo grande do que vários pequenos. A quantidade de requisições diminui e por isso tempo de carregamento é menor. Veja a imagem abaixo:

Bem diferente, né?

Você pode modularizar seus arquivos de forma que você melhore o carregamento e ainda não prejudique seu site. Por exemplo, você pode separar em um arquivo o mínimo de código que será necessário carregar para que a página funcione e em outro arquivo vai todo código que pode ser carregado depois que a página terminar de abrir. Assim você divide as prioridades.

Se for pouco Javascript, algo bem básico mesmo, considere colocá-lo direto no HTML. Sem a necessidade de chamar um arquivo.

Tente paralelizar downloads de vários domínios

De acordo com o protocolo de HTTP, os browsers podem pode ter duas conexões simultâneas por domínio. Se um documento contem referencias para várias recursos como CSS, Javascripts, Imagens e etc, de forma que estoure o máximo permitido pelo host, o browser começa a baixar um parte e deixa os outros recursos na fila. Quando ele termina de baixar todos os recursos atuais, ele vai pra fila e pega o próximo grupo.

O problema é que a cada grupo que o browser baixa, é gerado um RTT. Ou seja, se você tem 100 arquivos para baixar (CSS, Javascripts, imagens etc), levando em conta que o browser baixa 4 recursos por vez, serão 25 RTTs gerados.

A estratégia é separar parte destes recursos em outro domínio. Fazendo isso o browser pode baixar o máximo de recursos por domínio paralelamente. Por isso é que normalmente separamos arquivos – como imagens – em outro servidor.

Veja no Browserscope a lista dos browsers que aceitam ou não fazer esse truque. Normalmente os browsers mais novos estão tranquilos.

Outras dicas

Algumas outras dicas e recomendações podem ser vistas neste documento que o Google disponibilizou sobre boas práticas sobre como deixar sites mais rápidos.

Veja a segunda parte deste artigo aqui.