Não adianta muito esta meta-tag, ela funciona geralmente apenas pro HTML, o que o PageSpeed Insights sugere é guardar o cache de arquivos chamados via <script>
, <link>
, <img>
, <video>
, background-image: url(...)
como imagens, javascript, css, fontes, video, etc.
Nota:
O uso de no-cache quer dizer que não vai guardar no cache e o que você deseja é o contrário de
<meta http-equiv="Cache-control" content="no-cache">
Respondendo a pergunta, sim é muito vantajoso usar cache, isto vai diminuir o consumo do seu servidor tornando o tempo de resposta melhor e evitando possíveis travamentos do servidor quando tem um volume alto de acessos, pois serão menos requisições devido ao cache do "lado cliente".
É possível fazer usando Apache (pelas suas outras perguntas acredito que use PHP e este geralmente usa servidores Apache), você pode então fazer o uso do .htaccess
, crie o arquivo .htaccess
na pasta raiz do teu site (por exemplo public_html
ou /etc/www
) e coloque o seguinte conteúdo nele:
#Cache de 1 mês a partir da data de acesso do arquivo
<FilesMatch "\.(?i:ico|gif|jpe?g|png|css|js|svg)$">
ExpiresDefault "access plus 1 mouth"
</FilesMatch>
Isto vai fazer o cache de 1 mês pros arquivos do tipo ico, gif, jpg, jpeg, png, css e js.
Além do cache existe um código HTTP chamado 304, pra usar ele você precisa comparar o seu cache do navegador com o arquivo do servidor através da data de modificação ou através do Etag como eu expliquei nesta pergunta:
No back-end o servidor ou aplicação compara o header da requisição (ou Etag) e se não houver modificação o 304 Not modified
é emitido e não é enviado dados na resposta, pra evitar fazer o download novamente do arquivo acaso não haja mudanças, então o navegador reaproveita novamente o cache da máquina local (navegador).
Então o seu .htaccess poderia ficar assim pra usar o 304:
# Trabalha o if-modified-since com arquivos de imagem
<FilesMatch "\.(?i:ico|gif|jpe?g|png|css|js|svg)$">
# Cache para um mês
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 mouth"
</IfModule>
# Remove Etag para previnir o uso do mesmo
# Pois iremos trabalhar com if-modified-since e last-modifed
FileETag None
</FilesMatch>
Você também pode definir um tempo de expiração diferente pra cada tipo de arquivo, vamos supor que o seu site atualiza 1 vez por semana as imagens, mas os css e js levam raramente e o favicon dificilmente será atualizado, pode fazer assim:
# Ativa o cache
<FilesMatch "\.(?i:ico|gif|jpe?g|png|css|js|svg)$">
<IfModule mod_expires.c>
ExpiresActive On
</IfModule>
FileETag None
</FilesMatch>
# Cache de 1 semana pras imagens
<FilesMatch "\.(?i:gif|jpg|jpeg|png)$">
<IfModule mod_expires.c>
ExpiresDefault "access plus 1 mouth"
</IfModule>
</FilesMatch>
# Cache de 1 ano pros icones (geralmente favicon)
<FilesMatch "\.(?i:ico)$">
<IfModule mod_expires.c>
ExpiresDefault "access plus 1 year"
</IfModule>
</FilesMatch>
# Cache de 6 meses pra arquivos js e css
<FilesMatch "\.(?i:css|js)$">
<IfModule mod_expires.c>
ExpiresDefault "access plus 6 mouths"
</IfModule>
</FilesMatch>
# Remove o Etag no final
<FilesMatch "\.(?i:ico|gif|jpg|jpeg|png|css|js|svg)$">
FileETag None
</FilesMatch>
Vale notar que eu usei access plus
, isso quer dizer que o tempo de cache é a contado assim por exemplo:
data e hora do acesso (requisição ao arquivo) + 6 meses = data que vai expirar o cache
Existe o modified plus
que funciona assim:
data e hora da última modificação do arquivo no servidor + 6 meses = data que vai expirar o cache
Eu não usei o modified plus
pois se o arquivo for antigo (não tiver sido modificado) ele não gera cache.