Aproveitar o cache do navegador consiste em definir uma data de validade nos cabeçalhos de HTTP para recursos estáticos, instruindo o navegador a carregar os recursos baixados anteriormente a partir do disco local, não através da rede. Se você já usou o PageSpeed, tenho certeza que se deparou com uma mensagem como esta.
Nesse artigo vou falar sobre como especificar uma expiração para os recursos armazenáveis em cache que tem uma vida útil de atualização curta.
Forma errada
Uma forma bem comum de tentar fazer isso, porém extremamente inconsistente, é usar as Meta Tags Expires, Pragma e Cache-control no cabeçalho do documento, na tentativa de determinar a data e a hora em que a página expira e que os dados desta devem ser armazenados.
[code lang=”html”]
<!doctype html>
<html dir="ltr" lang="pt-BR">
<head>
<title>ValueHost.com.br</title>
<meta http-equiv="expires" content="Tue, 05 Jan 2013 12:12:12 GMT">
<meta http-equiv="cache-control" content="public" /> <!– reconhecida pelo HTTP 1.1 –>
<meta http-equiv="Pragma" content="public"> <!– reconhecida por todas as versões do HTTP –>
[/code]
Ou então gerar cabeçalhos HTTP apartir de linguagens server-side, como o PHP.
[code lang=”php”]
<?php
header("Cache-Control: private, max-age=10800, pre-check=10800");
header("Pragma: private");
header("Expires: " . date(DATE_RFC822,strtotime("30 day")));
?>
[/code]
Esses métodos podem até ser muito simples de serem implementados, talvez por isso sejam tão usados, porém já estão obsoletos.
Forma correta
A forma certa de aproveitar o cache do navegador, especificando uma data de expiração para arquivos de imagem, JS, CSS, mídia, PDFs, Flash e etc, é pelo arquivo .htaccess em servidores linux, adicionando o código abaixo:
[code lang=”xml”]
#Força a utilizar Cache-Control e Expires header
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
FileETag None
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Html
ExpiresByType text/html "access plus 0 seconds"
# Data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
# Feed
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"
# Favicon
ExpiresByType image/x-icon "access plus 1 week"
# Media: images, video, audio
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# HTC files
ExpiresByType text/x-component "access plus 1 month"
# Webfonts
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# CSS / JS
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
</IfModule>
#Força o IE a sempre carregar utilizando a última versão disponível
<IfModule mod_headers.c>
Header set X-UA-Compatible "IE=Edge,chrome=1"
<FilesMatch "\.(js|css|gif|png|jpeg|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|crx|oex|xpi|safariextz|vcf)$" >
Header unset X-UA-Compatible
</FilesMatch>
</IfModule>
[/code]
Fazendo essa simples configuração, você consegue diminuir muito o tempo de carregamento da sua página web, garantindo uma melhor performance e experiência para os usuários.
Referências
Template de htacess modelo simples focado em seo
Microsoft: definir as configuracoes do cache baseado em disco
