Como aproveitar o cache do navegador

Como aproveitar o cache do navegador

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.

<!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 -->

Ou então gerar cabeçalhos HTTP apartir de linguagens server-side, como o PHP.

<?php
header("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
<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>

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

Developers Google

Template de htacess modelo simples focado em seo

Developer mozilla

Microsoft: definir as configuracoes do cache baseado em disco

1
Deixe um comentário

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Nekomamushi Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of
Nekomamushi
Visitante
Nekomamushi

Gostaria de sabe, posso usar esse código de cache junto com plugin de cache? ou é necessario apenas um?