A Importância do Browser Cache

Vou começar a escrever alguns posts sobre como melhorar a velocidade de sites, atualmente muitos sites tem um desempenho muito fraco em relação a velocidade final para o usuário, já tive experiências de ter que aguardar quase 2 minutos para que um site fosse completamente carregado no meu browser.

Os maiores problemas de ter sites com pouco desempenho, na minha opinião, é a demora para carregamento das páginas web, consumo excessivo de banda e necessidade de consumir mais recursos dos servidores. Uma boa ferramenta para verificar o desempenho de sites é o sistema do http://www.webpagetest.org , nele podemos ter um relatório bem completo de desempenho.

Um bom início para otimizar seus sites é adotar a utilização do browser cache, o funcionamento é bem simples; sem a utilização de cache, toda vez que um usuário acessa um site o servidor web envia diversos arquivos para o browser, imagens, arquivos css, arquivos de javascript etc., mas alguns arquivos são comuns em todas as suas páginas e outros são arquivos que dificilmente sofrerão alterações, desta forma não é necessário que o browser do usuário precise fazer o download de todos os arquivos a cada acesso às páginas. Implementando a utilização de browser cache os arquivos comuns serão salvos no computador do usuário, assim não será realizado o download desses arquivos e sim será utilizado a copia local, isso agiliza muito o carregamento da página e não irá consumir banda de internet(muito importante no caso de acesso via celular). Uma alternativa para utilização do browser cache é através da configuração do arquivo .htaccess no seu servidor web, exemplo:

#BEGIN CACHE
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|swf|tar|tif|tiff|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DOCX|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|MPP|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SWF|TAR|TIF|TIFF|WAV|WMA|WRI|XLA|XLS|XLSX|XLT|XLW|ZIP)$">
     <IfModule mod_headers.c>
          Header set Cache-Control "max-age=2592000, public, must-revalidate"
     </IfModule>
     </FilesMatch>
<FilesMatch "\.(css|js|CSS|JS)$">
     <IfModule mod_headers.c>
          Header set Cache-Control "max-age=2592000, public, must-revalidate"
     </IfModule>
     </FilesMatch>
#END CACHE

O código acima faz com que os arquivos de mídia, arquivos css e arquivos javascript sejam armazenados no browser do usuário. Em sites de conteúdo onde não há alterações nas páginas já existentes,blogs por exemplo, é muito importante essa configuração, pode chegar a mais de 50% a diferença entre a mesma página com uso de cache e sem o uso de cache.
Os contras da utilização de cache são vistos em sites onde o conteúdo é muito variável nas mesmas páginas, sites de previsão do tempo por exemplo, nesse caso o problema é que o usuário terá imagens desatualizadas.