Muitas pessoas quando estão começando no mundo do desenvolvimento costumam dar um diagnóstico errado para alguns problemas de performance que seus sites podem eventualmente enfrentar. E nem sempre significa que você cometeu os piores erros, mas significa que há vários aspectos que você pode melhorar. Montei esta lista como uma espécie de guia rápido e que pode ajudá-lo a prestar atenção em alguns pontos básicos do desenvolvimento para web. No geral, quanto maior for a audiência do seu site, mais valor você dará para as boas práticas de desenvolvimento e dicas de otimização. Mas antes mesmo de alcançar uma audiência com milhões de page views, pode começar treinando desde já. A escolha é sua.

1 – Separe o HTML do CSS

Óbvio que esta dica seria a primeira. Se você quer ter um site leve e fácil de dar manutenção, você precisa aprender padrões e boas práticas de desenvolvimento de HTML e CSS. Os famosos “padrões web” (web standards). A base de um site leve está na divisão de camadas (conteúdo e apresentação). Deixe que o CSS cuide do design e deixe no HTML somente o conteúdo. Este é o passo fundamental em qualquer processo de deixar um site mais leve e rápido de ser carregado.

2 – Coloque o script do web analytics no rodapé

Usar algum serviço de métricas para contabilizar as visitas do seu site, é fundamental. Há várias ferramentas gratuitas disponíveis no mercado como por exemplo o Clicky, StatCounter, Yahoo Web Analytics, Google Analytics dentre outros. E uma característica comum da maioria dessas ferramentas é o uso de javascript como forma de fazer essas contabilizações. E geralmente este script fica no servidor do serviço que o oferece, e não no mesmo servidor do seu site. Se um site for muito grande e tiver milhares de acesso por dia, muitos visitantes poderão reclamar de que o site está um pouco lento. Como você não hospeda o script, não há 100% do controle se ele será entregue tão rápido quanto se estivesse no seu próprio servidor.

Normalmente as pessoas colocam estes scripts no <head> do site, o que não está errado de forma alguma. Entretanto, o restante da página pode demorar um pouco mais para carregar enquanto o script do seu web analytics não for baixado na primeira vez. Uma dica importante se você tem notado um delay no carregamento do script em relação ao seu site, é colocá-lo no rodapé. Isso fará com que seu site seja carregado primeiro, ou seja, toda a interface e navegação, e o script do web analytics será o último a ser baixado, sem que o usuário note.

3 – Redução do Javascript

Esta é uma técnica antiga porém muito útil. Se seu site precisa ter muito script use a técnica do “javascript minify“, ou redução de javascript. Geralmente costumamos colocar o script de forma endentada, soltando linhas e espaços para deixá-lo compreensível e fácil de dar manutenção. Entretanto, se você colocasse todos os seus scripts em um único arquivo, excluísse todos os espaços desnecessários e desse nomes mais curtos para as funções, acredite, você terá ganhos significativos.

Não se preocupe, isso não é algo que você deva fazer “na mão”. Existem alguns programas que fazem isso por você, inclusive sites como este onde basta colocar seu script em um campo que ele será reduzido do outro lado. A única coisa que você precisa ficar esperto, é quanto a guardar uma cópia do seu script original caso queira dar alguma manutenção no futuro ou reaproveitá-lo em outro projeto. Se não fizer este backup, seu script poderá ficar praticamente ilegível para olhos humanos.

4 – Design “limpo”

Este item poderá sofrer várias críticas, mas ainda assim eu resolvi mantê-lo. Se o design do seu site for “limpo”, ou seja, se tiver somente o que for “necessário”, ele será naturalmente “leve”. Este é o tópico mais conceitual e menos prático do grupo, mas que eu considero não menos importante. O fato é que designers precisam entender que alguns sites devem ser construídos para compartilhar informação e não para se tornarem obras de arte rebuscadas. Não há nada de errado com o simples e o enxuto. A prova disso é o iPhone. Manter um design simples não significa ter um design feio, significa apenas que o design foi pensado na função. Nem tudo deve seguir esta regra, mas ela pode ser seguida em milhares de casos.

5 – Redução na quantidade de requisições ao servidor

Este deve ser um trabalho em conjunto com todos envolvidos no projeto. A começar pelo design e o programador de interface e continuando no programador. Programadores devem procurar sempre fazer as coisas mais enxutas possíveis. Os designers podem pensar em projetos mais úteis e menos rebuscados e os programadores de interface podem e devem pensar em soluções de recortes mais inteligentes e enxutos.

Já vi milhares de trabalhos de profissionais que usam imagens onde conseguiriam exatamente o mesmo efeito somente com CSS. Uma classe dentro de uma folha de estilos é uma requisição a menos no servidor, ao contrário de mais uma imagem. Quer colocar bordas nas imagens? Faça com CSS, não coloque a borda na imagem. Há vários trechos do design que tem uma sombra atrás de algum elemento? Pense em usar a mesma imagem para o máximo de locais possíveis. Possui muitos elementos como ícones e símbolos? Use CSS Sprites, uma técnica  simples onde, ao invés de ter dezenas de imagens separadas, elas ficam todas em uma única imagem. Quanto menos arquivos forem requisitados ao servidor, mais rápido será o carregamento do site.

6 – Resuma seu CSS

Alguns atribuem a forma como o CSS fica organizado a questão de estilo. Eles não estão errados. Mas em alguns casos, resumir o CSS e colocar as declarações uma na frente da outra, você consegue enxugar alguns bytes. Pense os ganhos em um site com 100 mil visitantes por dia. Ganhos de tráfego e performance são altos e valem à pena. Vejam abaixo um exemplo:


#exemplo {
  float:  left;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  border:  1px solid #CCCCCC;
  width:  255px;
  height:150px;
  position:  relative;
  }

Este trecho poderia ser assim:

#exemplo {float:left;  margin:10px; border:1px solid #CCC; width: 255px; height:150px; position:  relative}

Resumir o CSS é simples e fácil. Você pode ler mais sobre resumo de CSS aqui. Este é o mesmo caso da redução do javascipt, com a exceção de que eu me acostumei a trabalhar com arquivos resumidos e não costumo guardar backup de um arquivo de CSS “expandido”. Mas isso já é questão de estilo.

7 – Coloque javascript somente nas páginas em que ele for usado

Se você vai fazer um site com programação no lado do servidor, muito provavelmente você irá utilizar includes. Certo? Nada de errado com isso, mas o fato é que vários programadores ficam com “preguiça” de identificar “na mão” quais páginas realmente vão precisar de determinado scprit e quais não vão precisar e preferem colocá-lo em um include que está presente em todas as páginas. Ou seja, mesmo aquelas páginas que não vão usar aquele script vão carregar o script de qualquer maneira. Shame on you! Não faça isso se quiser ter um site otimizado. Scripts devem ser chamados somente onde e quando forem necessários.

8 – Otimize o tamanho de suas imagens

Não acredite naqueles que, ao serem confrontados sobre o tamanho gigante das imagens de seus sites, alegam que hoje todo mundo tem banda larga. Ainda há vários cenários de acessos com conexões lentas (celulares navegando em edge por exemplo), sem falar nos milhares de gigas que você pode economizar com servidor naqueles sites com milhares de acesso.

Se você é daqueles que sempre salva as imagens com 90% de qualidade no Photoshop, comece a balancear a forma com que você as gera. É possível obter imagens com uma qualidade decente o suficiente sem necessariamente salvá-las com 90% de qualidade.

9 – Não use javascript proprietário de browsers

Esta deveria ser uma dica que não precisaria ser dada nunca mais. Parece assunto da época em que o Internet Explorer brigava com o Netscape. Mas o fato é que várias pessoas ainda usam scripts engraçadinhos que fazem coisas somente em um browser ou em outro. Os usuários que visitarem seu site por um navegador cujo seu script não vai funcionar, irá carregá-lo de qualquer maneira, inutilmente. Por isso, se for usar javascript, pense se ele vai funcionar em todos os navegadores e pense se ninguém irá baixar algo inutilmente que não irá funcionar. Assim você prejudica o usuário e o dono do servidoror consumir parte da banda dele com scripts inúteis.

10 – Utilize cache no servidor

Como eu disse no início, quanto maior for a audiência do seu site, mais importância você dará para boa práticas de desenvolvimento e dicas de otimização. Se você possui um site onde os visitantes retornam com muita freqüência, com certeza há trechos do seu site que podem ser cacheados, para que da próxima vez que eles acessarem, não seja necessário baixar scripts e folhas de estilos por exemplo, tudo novamente. Isso também vale para aquelas páginas que você não as atualiza com freqüência. Ao atribuir cache no servidor, você fará com que o navegador do usuário guarde arquivos em sua própria máquina para que ele ao acessar seu site novamente, não precise carregar os mesmos arquivos novamente. Assim o usuário vai carregar seu site mais rápido e menos requisições serão feitas ao seu servidor.

Henrique Pereira trabalha com planejamento digital, desenvolvimento e arquitetura da informação e mantêm o blog Revolução Etc (http://revolucao.etc.br) sobre tecnologia e desenvolvimento desde 2005.