Este artigo faz parte do guia de otimização de performance de websites criado pelo Oficina da Net, neste guia vamos mostrar alguns dos principais passos para você melhorar a velocidade de acesso a suas páginas. Neste primeiro artigo vamos trazer dicas de onde você pode iniciar, a partir de então, vamos criar um artigo para cada uma das dicas explicando como fazer e o que fazer.

Em alguns dos casos será necessário que você tenha acesso a configurações de servidor para utilizar CND (content network delivery). Em contrapartida outros casos são otimizações feitas no código fonte e mídias do site que vão dar um grande upgrade no tempo de acesso.


1 - Encontrar os culpados


É necessário inspecionar suas páginas para encontrar componentes desnecessários ou que podem ser otimizados. Esse tipo de inspeção geralmente envolve uma ferramenta como o Firebug, para determinar quais os objetos sejam eles (imagens, arquivos CSS, documentos HTML, arquivos javascript, etc) estão sendo solicitados pelo usuário, quanto tempo levam para carregar e o quão grandes são (tamanho em Kb). Uma dica é manter os arquivos os menores possíveis. Imagens, arquivos css e javascript não devem passar de 25Kb de tamanho cada um.


2 - Separe o HTML do CSS


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. Além de facilitar a manutenção, separar o HTML e CSS ajuda pois o css embutido no HTML toda vez é carregado, já dentro de um arquivo css ele é armazenado em cache e é carregado apenas na primeira visualização.


3 - Salvar as imagens usando o formato correto


Se o site possui várias imagens, é essencial aprender sobre os diferentes formatos e qual é o ideal para cada imagem. Há três formatos comuns para imagens na web: JPG, GIF e PNG. Em geral, deve-se usar JPG para fotos realistas com gradações suaves e tons de cores (degradês) e GIF ou PNG para imagens com cores sólidas (tais como gráficos e logotipos). O PNG funciona bem com transparência, mas quando há muitas cores envolvidas ele vai ficar muito grande, portanto é aconselhável usar jpg para imagens com muitas cores.

Além de salvar as imagens no formato correto, você pode otimizá-las salvando com um pouco menos de qualidade, ou então usar o (www.jpegmini.com) ele converte de graça imagens para uma melhor otimização. Geralmente se consegue reduzir pelo menos 30% de cada imagem, então se você tem fotos de 1MB vai conseguir reduzir para 700kb, o que sobre 1000 acessos reduz 300Mb de tráfego, e 1000 acessos em uma página de um site é um valor relativamente baixo. Em 30 dias você consumiria 30Gb, otimizadas as imagens isto daria 21Gb. Coloque este valor em 1 ano que você verá o valor da hospedagem reduzir. Agora imagine fazer isto para todas as imagens do seu site.


4 - Comprima o JavaScript/CSS


Você escreve JS/CSS elegante, bem documentado, com código organizado e variáveis de nomes legíveis. Mas seus primos não se importa com isso, eles querem um site rápido e isso significa não trafegar no request bytes e mais bytes de documentação ou de código legível. Comprima todo o seu código JavaScript e CSS usando o YUI Compressor ou o Google Closure Compiler. Faça isso em build time ou dinamicamente.

O código vai ficar bem menor, mais leve e em contrapartida ficará praticamente ilegível. Para dar manutenção sobre ele, você precisa usar o arquivo original e toda vez minificá-lo antes de subir para o servidor. É trabalhoso mas é fundamental.


5 - Reduzir o número de requisições ao servidor


Toda vez que uma página é aberta, ela faz diversas conexões com o servidor, a cada imagem, cada css, cada javascript é feita uma requisição no servidor. Reduzir o número de requisições é a principal fonte de melhora de performance de um site. 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.

Combine arquivos CSS, arquivos javascript para fazer menos requisições: Se você tiver cinco arquivos CSS para uma página, serão necessários, pelo menos, 5 requisições HTTP separadas. Ao combinar arquivos, é possível reduzir a sobrecarga de solicitações HTTP necessárias para gerar uma página web.


6 - Ative o GZIP no servidor


Fazendo uma analogia, compactar objetos da página via server side é semelhante a zipar um arquivo grande para enviar por e-mail: você (servidor web) zipa um retrato grande da família (o componente da página) e envia por e-mail para seu amigo (o browser) que, por sua vez, descompacta o arquivo zip para ver a imagem. Os métodos de compressão mais comuns são Deflate e gzip.

No guia vamos mostrar como instalar o gzip no servidor se você hospeda em servidor próprio. Se não for o caso, entre em contato com seu servidor de hospedagem e peça instruções sobre como ativar a compactação server side.


7 - Use serviços de terceiros


Você usa jquery? Sabe que não precisa hospedar ele em seu servidor. O Google hospeda ele de graça para você. Além de ser muito mais rápido, provavelmente o usuário que acessa seu site já deve ter acessado outro que use o jquery hospedado no Google, desta forma ele já vira em cache quando for acessar o seu site. Assim é um request a menos. O link para versão atual (1.6.4) (27/10/2011).


8 - Coloque CSS no topo e JavaScript embaixo.


Simples assim. Referencie os seus CSS no head com < link > para evitar o flash effect (é um exemplo onde uma página web aparece rapidamente sem estilo antes de carregar uma folha de estilos CSS externa. A página corrige-se tão rapidamente como as regras de estilo são carregados e aplicada, no entanto, a mudança é bem visível e distrair) e coloque seus scripts logo antes do fechamento do body para não atrasar a renderização da tela. O javascript quando é solicitado, ele não carrega outra coisa antes de carregar totalmente o arquivo js. Assim ele para a renderização contínua somente para carregar o js, por isto que se deve colocar ele pelo fim, assim o site já carregou as imagens, HTML e css para então carregar o javascript.


9 - Redimensione imagens servindo com tamanho correto e não com atributos HTML ou css


Não use os atributos width e height das imagens para redimensionar seu tamanho. Sirva as imagens já com tamanho certo e otimizadas. Mas coloque sempre o width e height de todas as imagens para ajudar o browser nos cálculos da renderização da página.


10 - Crie seu próprio cache


Faça cache de memória ou em arquivo para evitar muitas requisições ao banco de dados. Quando menos usar o banco de dados melhor para o servidor. Faça uma vez a busca no banco e depois gere um cache com arquivo, copie o resultado do banco de dados, monte seu HTML de resultado e salve ele num arquivo, para que na próxima vez você possa buscar diretamente do arquivo e não usar o BD.


Concluindo


Estas dicas vão fazer uma enorme diferença na velocidade de processamento e de acesso as suas páginas. Como mencionei, vamos passar agora por cada uma das 10 dicas ensinando passo a passo como realizar cada um dos processos, então aguarde pelas próximas matérias. E espero que tenham gostado!