Como aproveitar o cache do navegador

aproveitar cache do navegadorAproveitar 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>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.

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

Se você usa um servidor windows, terá que configurar pelo arquivo web.config, alterando ou adicionando a seguinte linha:

<BlobCache location="C:\blobCache" path="\.(gif|jpg|png|css|js)$" maxSize="10" enabled="true"/>

Você pode saber mais detalhes sobre como aproveitar o cache do navegador em servidores windows  no site da Microsoft.

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.

PageSpeed - cache do navegador

Referências

Developers Google
Template de htacess modelo simples focado em seo
Developer mozilla
Microsoft: definir as configuracoes do cache baseado em disco

  • eu

    Perfecto! era isso o que eu procurava 5/5

  • Vinicius Assef

    E se eu precisar definir uma expiração diferente para uma determinada imagem, por exemplo?

  • Leonardo

    Aqui também funcionou. Havia 4 solicitações e agora tem uma apenas, mas parece externa. Muito bom seu post, não só pela solução, mas pela a orientação dada. Qualquer um que usa wordpress consegue fazer.

    Os maiores problemas que tenho aqui são adiar analize javascript e otimizar imagens, mas não são imagens internas, pois essas consigo otimizar, são aquelas do facebook da caixa de fãs. São externas eu não entendo, mas acho que são.

    Esse tutorial mostra como adiar analize javascript, sei dele faz muito tempo, mas não sei onde devo fazer as alterações:http://www.matheusferraz.com.br/pagespeed-adiar-analise-de-javascript/

  • Henrique

    Fiz a alteração, poderia ver se está correta?

    http://www.scoremedia.com.br

  • Elvis

    Realmente muito bom minha pontuação estava 75 fiz alteração no .htaccess a pontuação foi para 94

  • Goldenoire

    Olá Lorindo,
    usei a forma que apresentou para aproveitar o cache do navegador colocando o código no arquivo .htaccess e funcionou na perfeição.
    Pelo facto apresento-lhe os meus agradecimentos.
    Agora vou experimentar a compressão de dados com zlib e
    depois deixarei feedback.

  • Leandro Macedo

    gostei da notica vou tentar utilizar no meu site

    http://www.agenciavocare.com.br

  • Monique

    Fiz a inserção e continuo sem aproveitar o cache. Alguém poderia me indicar se existe um lugar no código específico? Sou newbie ainda.

  • Monique

    Fiz a inserção e continuo sem aproveitar o cache. Alguém poderia me indicar se existe um lugar no código específico? Sou newbie ainda.

    • wellingtonlorindo

      Seu servidor é linux, Monique? Colocou o arquivo na raiz?

  • Gutierre

    Pessoal,

    só é preciso lembrar que os módulos do Apache tem que estar instalados:

    mod_expires.c
    mod_headers.c
    mod_deflate.c

    No caso de servidores como a Locaweb, é preciso fazer a solicitação via chamado.

    Fizemos no http://www.oemprego.com.br , http://www.softwarerh.com.br e http://www.softwareavaliacao.com.br e funcionou perfeitamente.

    • wellingtonlorindo

      Bem lembrado, Gutierre!
      Valeu!

  • Renato

    muito bom, menos 1 problema pra mim,,,,

  • http://www.ascconnect.com/ Anderson Scherer da Costa

    Devo desabilitar o cache do joomla se utilizar esse procedimento?

    • wellingtonlorindo

      Olá, Anderson! O procedimento acima é apenas para o cache do browser, você pode continuar usando o cache do seu CMS, joomla no caso, para fazer o cache da página, do banco de dados e outros. Só tome cuidado para o joomla não sobreescrever as configurações que você colocou no .htaccess e vice versa.

      Abraço

  • Rogério Carvalho

    Olá, antes de testar essa dica do cache minha página estava com 48 pontos no google. Depois habilitei o gzip e foi para 63. Após colar o código que você disponibilizou aqui obtive 78 pontos. Ainda falta melhorar, mas já considero uma melhora extremamente significante. Quem quiser fazer o teste, segue o site: http://dinheirohonestamente.com
    Agradeço muito pela dica que você compartilhou conosco. Parabéns pela postagem!

    • wellingtonlorindo

      Olá, Rogério! Fico feliz que post tenha sido útil. =)

  • Maiara

    Como fazer isso no wordpress?

    • wellingtonlorindo

      Você precisa editar o arquivo .htaccess que fica na pasta raiz do seu servidor de hospedagem, Maiara. Caso não tenha o acesso via ftp, você pode procurar por algum plugin que te permita editar esse arquivo como o WordPress SEO. Depois de instalá-lo, vá em SEO > Edição de arquivos > Arquivo .htaccess

  • Beatriz

    Olá Wellington, usando o WordPress SEO, no arquivo .htaccess, qual código eu edito?

    • wellingtonlorindo

      Oi, Beatriz! Você só precisa copiar o código que coloquei no artigo, colar no final do seu .htaccess e depois salvar.

  • Pedro Farbo

    Muito bom meu amigo! Me ajudou a melhorar a velocidade de minha página no PageSpeed do google! Estou com 85 pontos na navegação desktop, agora o meu único problema é o bloqueio de rendenização por causa do Js e do CSS.. Preciso resolver isso o mais rápido possível.. Se tiver alguma idéia de como resolver isso no wordpress sem dar merda no layout do site por favor me diga! :D

  • Wellington

    Tem como fazer isso no Blogger?

    • wellingtonlorindo

      Acredito que não, chará.

  • Beatriz

    Wellingtonlorindo, uma catástrofe!
    Coloquei o código de 01 à 49 e colei, salvei, deu certo, porém ainda continuou dizendo que
    aproveitar o cache do navegador, então voltei para esta página e copiei o outro código do Windows e colei abaixo do outro código e salvei…
    apareceu um erro 500 no hostgator, e não consigo mais entrar na página do wordpress, para arrumar o código.

    Será que poderia me ajudar?

    • http://oconluio.wordpress.com/ William Florencio

      Já tentou deixar seu .htaccess em branco novamente? Funciona comigo quando dá erro aqui.

      • http://oconluio.wordpress.com/ William Florencio

        Se você só consegue acessar o .htaccess pelo wordpress, baixa o Filezilla, configura uma conexão com seus dados e acessa de lá.

  • Beatriz

    Wellingtonlorindo, já consertei…
    Obrigada, estava em vermelho agora ficou em amarelo.

    Valeu;)

    • wellingtonlorindo

      =)

  • Andre Dias Arnaut

    Perfeito depois de muito tempo foi o melhor codigo que achei e funcionou. Valeu

  • Marcelo Paes

    Wellington, boa tarde.

    Colei o código conforme descrito acima no .hatccess.
    Ainda é acusado pelo PageSpeed o problema.
    Meu site: http://www.concursosabertos.com.br

    Será que eu fiz alguma coisa errada ? Caso queira me enviar por email o Código vai ai: marcelo@concursosabertos.com.br.

    Meu servidor é Linux / Apache – Hospedagem Kinghost será que tem alguma diferença:

    Abraços e aguardo retorno.

    Estou precisando solucionar este problema com urgência.

    • http://www.2freelancers.com.br/ João Carlos Moleta

      Verifique se não está usando alguma ferramenta de cache, tenta zerar o cache e tentar novamente. Tanto para ti, quanto para galera que continuar recebendo a mensagem do PageSpeed. Outra coisa, no PageSpeed tem opção Mostrar como corrigir

  • http://www.vinicius-stutz.com/ Vinícius Stutz

    Depois de ler o material em https://developers.google.com/speed/docs/insights/LeverageBrowserCaching fiquei desesperado e encontrei seu site. Bom artigo!

    • wellingtonlorindo

      =)

  • Emerson Nogueira

    Meu Caro, Parabéns pelo post.
    Fiz exatamente como recomendou e a minha nota subiu 15 pontos somente com esta alteração.
    Obrigado!

    • wellingtonlorindo

      Fico feliz que tenha gostado, Emerson!

  • Douglas Moraes

    Super Lorindo, utilizei o código em meu site http://www.sitbrasil.com, realmente fantástico, quando fui realizar novos testes minhas notas subiram em média 5 pontos. Muito útil a postagem, parabéns e sucesso sempre… Já coloquei seu site entre os meus favoritos.

    • wellingtonlorindo

      Obrigado, Douglas! :)

  • Augusto Dos Santos

    Parabéns ótima dica. Comigo funcionou perfeitamente. Minha nota no teste subiu também

  • teste

    estetes

  • Wira Nunes

    Galera meu servidor é Windows e não consegui! Alguém poderia me explicar como é um Web.Config? Estou quase mudando de servidor Windows Pra Linux na minha Hospedagem.
    O pessoal do suporte disse que não tem esse arquivo pra eu editar e que eu deveria criar esse arquivo. Mas não tenho noção de como funciona. Alguém?

    • Marcelo Tomé

      Wira, eu também tive que descobrir quase sozinho. No meu caso fui no IIS e depois de acessar a raiz do servidor dentro do IIS, procure por Cabeçalhos de Resposta HTTP e ao lado direito em Definir Cabeçalhos Comuns, deixe selecionado “Expirar conteúdo da Web” e logo abaixo escolha o número de dias pra ser guardado. Lembre-se de que depende muito de quantas aplicações você tem no servidor e o tráfego delas. Em geral deixe por 7 dias. Mas vale atenção ler bastante sobre o assunto. Espero ter ajudado. Marcelo Tomé

  • Aécio Neto

    Olá Lorindo, parabéns pelo artigo! Muito bom!

    Estou lendo ele e o sobre compressão de dados. Minha dúvida é: tenho que fazer um arquivo htaccess pra cada coisa ou coloco tudo em um mesmo arquivo?

  • http://viverdeativos.com.br Diego Vieira

    Obrigado, funcionou bacana aqui no meu blog.

  • eduardo

    Estou verificando informações para fazer no http://www.quemperturba.com.br

  • Cleo Batista

    Funcionou para minha página. Muito obrigado!

  • Deyson Thome

    Confirmo o Marcelo Paes …. o mesmo comigo , mas agradeço pelo esforço de compartilhamento.

  • http://eloahcristina.wordpress.com eloahcristina

    Eu fiz a opção o httacess…
    Mas ainda não mudou nada lá no PageSpeedy, será que demora lá ou será que fiz errado?
    Meu site é o http://www.conexaofotografica.com.br
    Obrigada

  • Cristian

    Parabéns. No meu ficou ótimo!!!

  • Anderson Gustavo Anastácio

    Boa a dica mas não alterou em nada em meu site. Testei com o código no início e depois fiz um teste com ele no fim. Nada feito. Nenhuma alteração. Porque em alguns sites o código funciona e em outros não?

    Obrigado!

    Anderson – http://curiosolinks.com.br

  • Ronaldo Costa

    Coloquei o código certinho, mas ainda está dando o mesmo resoltado de antes no pagespeed, usa a plataforma magento. http://www.storecase.com.br

  • Laxiuz

    Parabéns! Comigo funcionou logo à primeira. Copiei para o bloco de notas, em seguida enviei por FTP e alterei o nome para .htaccess em seguida, esperei apenas 30 segundos e na página ”PageSpeed Insights” aparece o sinal positivo. Trepou meu valor para 90/100. Aproveito para chamar a atenção de quem não souber: O Google Webmaster Tools, é a melhor e a mais precisa ferramenta para muitas análises dos Websites ou Blogs. 100% FREE! Agradeço sua preciosa informação. Saudações.

  • Joana

    Ou Laurindo obrigado. Tenho uma dúvida . Como é onde eu colo esse código . Vc tem algum poste no youtube que explica. Sou nova nisso . Aguardo. Abraços

  • Anderson Costa Souza

    valeu bom d+

  • douglas88

    Muito obrigado pelo seu artigo , fazendo o que vc disse , peguei o seu código e coloquei no arquivo hatcess , consegui ganhar 8 pontos no page Speed …

  • edilops

    Pessoal boa noite.
    Seguinte meu site é em HTML e com relação a esse codigo eu tenho algumas duvidas.
    1 – O arquivo tem alguma nome antes de .htaccess? ( exemplo.htaccess)
    2 – Alguem disse que copiou o codigo para o bloco de nota e colocou o nome de .htaccess e funcionou, mas onde eu devo colocar este arquivo?
    3 – Devo colocar este codigo diretamente no HTML do INDEX? desculpe as perguntas meio bobas mas ainda sou inexperiente no assunto

    • http://www.2freelancers.com.br/ João Carlos Moleta

      o .htacess deve ficar na raiz do seu site
      /public_html/ por exemplo

  • kleber Pereira

    Meu servidor roda em Nginx como proceder ness. Caso?

  • Blog da Multibom Sat

    Wellington, boa noite.

    Meu site é cadastrado na Weebly,
    e por isso não tenho acesso ao htaccess.

    No meu caso qual seria a forma mais próxima da correta
    de aproveitar o cache do navegador?

    PS. O nome do pagina do meu site que quero otimisar é http://www.multibomsat.com/blog

  • Frances Suzanne

    Você poderia por favor adicionar ao artigo como faz para adicionar expire para itens não mencionados no seu código que o Google ainda diz que tem que “aproveitar o cache”? Pra mim tá dando itens da caixinha de Like do Facebook, Twitter, Google Analytics e Jetpack.

  • Anderson Alves

    Nunca estudei programação, e estou tentando fazer o trabalho de SEO no meu site por conta, assim mesmo bem devagar, mtos backups kkk pq se não ja viu né.
    Ao colocar esse codigo na pasta do meu site, subiu 16 pontos incrível kkk.
    Agora vou correr atras dos outros problemas rsrs abraço a todos, e vcs programadores tem meu respeito pelo serio trabalho. Obs: Agora sei pq cobram caro kkkk
    http://www.torresstart.com

  • Douglas Martins

    Muito obrigado, 2 anos depois da sua postagem ainda está me ajudando! Valeu!

  • Dimitry Nardi

    Oi Lorindo tudo beleza? Cara ja uso no meu site este código e o pagespeed continua pedindo pra criar datas pra esses recursos:

    https://apis.google.com/js/api.js (30 minutos)

    https://apis.google.com/js/platform.js (30 minutos)

    https://oauth.googleusercontent.com/…e:rpc:shindig.random:shindig.sha1.js?c=2 (60 minutos)

    http://www.google-analytics.com/ga.js (2 horas)

    Consegue me dizer como faço isso?

    Muito obrigado e parabéns pelo site!Sucesso!

    • wellingtonlorindo

      Olá, Dimitry! Como no caso do @hamiltonbuenojr, estes são arquivos externos ao seu servidor, vindos do google. Acredito que não é possível determinar a data de expiração.

  • wellingtonlorindo

    Olá, Hamilton! É um arquivo externo ao seu servidor (twitter), não é possível determinar a data de validade nesse caso.

  • Wesley ̶M̶o̶r̶a̶i̶s̶

    Cara vou adicionar este site nos meus favoritos, é tem excelentes conteúdos e ótimas dicas, tenho favoritos classificado em comum e melhores dos melhores favoritos, vou adiciona este site nos melhores dos melhores.

  • Wesley ̶M̶o̶r̶a̶i̶s̶

    Aumentou e muito minhas pontuações no PageSpeed Insights.

  • Erlei Pedro Santos

    belo post, gostaria de saber qual sintax para compactar códio html e javascript, pois o page speed esta solicitando

  • Lucio Silva

    olá, essa dica funciona no worpress?

    • KaMiNa

      Funciona sim, e é recomendado (se você sabe como fazer).

  • http://diogoek.com.br Diogo Kurihara

    Perfeito! Funcionou para mim

  • Admin

    Fiz no meu site ficou top obrigado http://saudeevidaboa. com/

  • Klebson Queiroz

    Olá Lorindo, meus parabéns pelo artigo!

    Queria te pedia um favor, você podeira me dizer por gentileza como usou essa caixa de código neste poste para colocar o código?

    Vou ficar imensamente grato na resposta.