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.
|
1
2
3
4
5
6
7
8
|
<!doctype html><html dir="ltr" lang="pt-BR"><head><title>Lorindo.com</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 --> |
Ou então gerar cabeçalhos HTTP apartir de linguagens server-side, como o PHP.
|
1
2
3
4
5
|
<?phpheader("Cache-Control: private, max-age=10800, pre-check=10800");header("Pragma: private");header("Expires: " . date(DATE_RFC822,strtotime("30 day")));?> |
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:
#Força a utilizar Cache-Control e Expires header
Header unset ETag
FileETag None
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"
#Força o IE a sempre carregar utilizando a última versão disponível
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
Se você usa um servidor windows, terá que configurar pelo arquivo web.config, alterando ou adicionando a seguinte linha:
|
1
|
<BlobCache location="C:\blobCache" path="\.(gif|jpg|png|css|js)$" maxSize="10" enabled="true"/> |
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.
