Esse post foi inspirado por um livro que li sobre performance em websites. Seu nome é "High Performance Websites" e ele foi escrito por um desenvolvedor do Yahoo. Para quem é desenvolvedor de front-end sua leitura é indispensável. Resolvi publicar aqui no blog algumas dessas formas de otimização e explicar o porquê de cada.

1 - Fazer poucas requisições HTTP

Pesquisas mostram que mais de 80% do carregamento de uma página é gasto no front-end. Então diminuir o número de componentes para consequentemente ter menos requisições é uma boa. Para fazer isso, utilizam-se praticamente duas técnicas, chamadas de Image Maps e CSS Sprites. Nos Image Maps utilizamos uma imagem e mapeamos seus pontos. A imagem precisa ser contínua, como uma barra de navegação. Essa tarefa de marcar os pontos é muito suscetível a erros e é cansativa, por isso recomenda-se o uso de CSS Sprites. Com ele, juntam-se todas as imagens estáticas que compõem a estrutura do site e cada pedaço da imagem é colocado como fundo de um bloco e reposicionado usando background-position. Não se preocupe, algumas ferramentas online fazem isso para você, como o http://csssprites.com/

2 - Comprimir usando GZIP

A partir do HTTP 1.1 os browser implementaram um cabeçalho chamado Accept-Encoding. Isso significa que o servidor pode mandar um arquivo comprimido com deflate ou gzip (mais popular) que o browser conseguirá descomprimir. Essa compressão geralmente diminui o tamanho do arquivo em 70%. O único contra do Gzip é usá-lo em arquivos já comprimidos, tais como mp3, jpg, pdf entre outros, pois como esses arquivos tem sua compressão própria a compressão com gzip pode até aumentar o tamanho do arquivo. Ele é recomendando principalmente em arquivos de texto plano, tais como HTML, CSS e Javascript.

3 - Tornar o CSS e o JS externos

Com o CSS e o JS externos você diminui o tamanho do seu documento HTML e aumenta em duas requisições HTTP (considerando um arquivo para cada). Como isso pode ser bom, de acordo com 1 (Diminuir requisições HTTP)? Com os arquivos externos, você pode cachear-los, diminuindo consideravelmente o tempo de carregamento. Geralmente fazendo isso se tem um desempenho melhor nos sites. A única exceção para esse ponto são em páginas que geralmente são acessadas apenas uma vez (tais como páginas de home), tornando o cache inútil.

4 - Colocar o CSS no topo

Quando o browser está renderizando a página, ele renderiza na ordem que vai encontrando os elementos no seu html. O maior problema de colocar o CSS no final da página é que os browsers evitam de renderizar para não ter que renderizar novamente depois que acharem o CSS. Isso vai deixar uma página branca para o usuário, até que o CSS seja renderizado. Uma coisa que muita gente acha é que fazendo isso a página terá um tempo de carregamento mais rápido. Mas NÃO, o tempo de carregamento não é diferente. A única coisa que muda é a visualização por parte do usuário pois com o CSS no topo, ele pode navegar na página já com um feedback visual. Simples, né?

5 - Colocar o JS no rodapé

A regra geral é que são feitos dois downloads paralelos por domínio quando uma página é acessada. Colocar o script no head ou no meio da página HTML vai paralisar os downloads paralelos enquanto somente o script é carregado. Somente evite colocá-los no rodapé se eles contiverem alguma função como document.write, por exemplo.

6 - Colocar um cabeçalho Expires nos arquivos

Ao acessar um site pela primeira vez, seu browser faz um requisição de uma página para o servidor. O servidor processa e retorna uma página para você. O browser começa a fazer requisições dos outros arquivos que estão lá (imagens, CSS, scripts) até carregar tudo. Na segunda vez que você acessa o site, o carregamento é bem mais rápido, certo? Isso acontece porque o browser mantêm em cache os arquivos do site e logicamente o carregamento é bem mais rápido. Mas isso ainda pode ser melhorado. Desse modelo que citei anteriormente, o browser ainda precisa fazer um GET condicional, para saber se o arquivo mudou (geralmente essa comparação é feita com a data de última modificação, mas também pode ser feita de outros jeitos, como com E-tags) e então o servidor retorna uma requisição 304 (arquivo não modificado). Se colocar um cabeçalho Expires nos seus arquivos, o browser não precisa fazer esse GET condicional no servidor, deixando o carregamento ainda mais rápido.

7 - Minificar arquivos JS e CSS

A técnica de minificar se constitui em tirar espaços desnecessários (espaços, tabulações, linhas em branco) e comentários dos arquivos, diminuindo consideravelmente seu tamanho. Um dos que eu gosto de usar é o YUI Compressor.

Essas são somente algumas formas. Existem várias outras, e muitas estão nesse livro que citei no começo do post. Eu repito, se você é desenvolvedor web, não deixe de ler o livro. E aproveite também seu amigo Google para se aprofundar no assunto. :)