Nos outros dois artigos sobre otimização, já vimos como diminuir o número de requisições usando o Minify e também como diminuir o tamanho dos arquivos transferidos usando compressão.
Neste artigo, apresentarei mais uma forma de se conseguir diminuir mais ainda o tempo de carga de uma página, usando a técnica de caching.

Como o cache pode ajudar?

Nos outros artigos, vimos como diminuir o número de requisições (agrupando vários arquivos em um só) e também como diminuir o tamanho do que é transferido.
Mas… e se não precisarmos fazer todas essas requisições? A grande maioria das páginas de um site tem arquivos em comum, e que não mudam. Imagens estáticas, folhas de estilo CSS e scripts em JavaScript. E após a primeira carga, o navegador já vai ter esses arquivos localmente.
Só nos resta dizer pra ele quando e o que ele pode usar nas requisições seguintes.

Quais as formas de se usar o cache?

Uma vez que o navegador tenha, digamos, uma imagem estática em cache, existem duas formas dele proceder pra saber se o arquivo é atual ou não.
A primeira é fazer uma requisição indicando a data em que o arquivo foi buscado. Essa requisição é feita enviando um cabeçalho “If-Modified-Since”, com a data do arquivo local. Caso o arquivo não tenha sido modificado, o servidor responde com o código 304 (Not Modified) ao invés de devolver o arquivo novamente.
A segunda forma é somente pedir o arquivo caso ele já tenha expirado.
Logicamente a segunda forma é bem mais econômica, pois evita a abertura da conexão.
Porém, temos um problema: como saber se um arquivo já expirou?

O cabeçalho “Expires”

Qualquer arquivo solicitado em uma conexão HTTP pode ter associado um cabeçalho Expires, que indica explicitamente a “data de vencimento” daquele arquivo. Ou seja, até a data especificada, o arquivo é válido e não precisa ser checado novamente. Após isso, o navegador deve considerar o arquivo como expirado, e solicitar novamente.
Então, para arquivos estáticos, podemos colocar uma regra dizendo que a data de vencimento dele é em um futuro distante. Isso pode ser feito, em um servidor Apache, com uma regra semelhante a esta:

ExpiresActive On
ExpiresByType image/gif "access plus 5 years"
ExpiresByType image/jpeg "access plus 5 years"
ExpiresByType image/png "access plus 5 years"
ExpiresByType text/css "access plus 5 years"

Neste exemplo (que utilizo aqui neste site), estou indicando explicitamente que arquivos do tipo GIF, JPEG, PNG e CSS tem validade de 5 anos da data do download. Antes disso, o navegador pode assumir que o conteúdo é atual e utilizá-lo.
Deixei o JavaScript de lado porque atualmente não estou utilizando nenhum script neste site. Caso queira adicionar na lista, basta duplicar uma das linhas, usando o tipo text/javascript.
Após o primeiro acesso, todas as imagens e folhas de estilo serão cacheadas, e o navegador não irá solicitá-las novamente. Isso dá um bom ganho de desempenho, pois o número de requisições necessárias para carregar as páginas subsequentes (e o correspondente tamanho em bytes) cai consideravelmente.

O resultado

Tomando como exemplo a página inicial deste site, e testando com um navegador com o cache completamente limpo, temos, para o primeiro acesso 21 conexões, sendo 1 para a página propriamente dita, 3 arquivos CSS externos, e 17 imagens externas.
Em um segundo acesso à mesma página (cliquei no logotipo lá em cima à esquerda), apenas uma única conexão foi aberta, para baixar somente a página em si. Todas as imagens e folhas de estilo já estavam no cache do navegador, e ele “sabe” que elas só vão expirar daqui a 5 anos. Logo, não tem porque verificar se foram alteradas.

Possíveis problemas

Um dos problemas neste tipo de configuração é o que fazer caso se precise fazer uma alteração em uma imagem ou em um arquivo CSS.
Nesses casos, como o navegador não está nem checando, o melhor a fazer é alterar o nome do arquivo, por exemplo, colocando um número contendo a versão ou a data de modificação. Com isso, o navegador irá interpretar o arquivo como algo novo, que ele ainda não possui em cache, e que precisa ser baixado.
Porém, o ganho que se consegue com o uso dessa técnica faz, na minha opinião, valer a pena o esforço. Existem algumas formas de se automatizar o processo de alteração do nome do arquivo, que deixarei para discutir em um outro artigo.

Artigos relacionados

• Otimização de sites, parte 2 – Compressão
• Otimização em PHP, parte 1: Minify
• Otimização de sites com memcached
• Otimização: imagens inline
• Páginas de manutenção

Compartilhe!