Tudo sobre o cache do navegador! Nosso artigo XXL sobre como aumentar a velocidade de suas páginas

Graças ao cache do navegador, os arquivos não precisam ser baixados repetidamente quando um site é acessado, mas são armazenados no navegador.

 

Os usuários se beneficiam do fato de que o tempo de espera até que um site seja totalmente carregado é reduzido. O tempo de carregamento mais curto das páginas também traz vantagens para os operadores de sites: Graças à maior velocidade da página (velocidade de carregamento da página), a classificação nos mecanismos de pesquisa é influenciada positivamente.

 

Descubra tudo o que você precisa saber sobre o cache do navegador e como usá-lo corretamente em nossa postagem no blog!

 

O que é o cache do navegador?

O cache do navegador é o cache de um navegador da Web no qual são armazenadas cópias de recursos que já foram acessados (por exemplo, imagens, arquivos JavaScript, vídeos).

 

Se uma página da Internet já tiver sido acessada uma vez e alguns dos recursos tiverem sido salvos no cache do navegador, a página será carregada mais rapidamente na segunda visita. O motivo disso é que os dados não precisam ser baixados novamente, mas podem ser recuperados do cache.

 

Você pode imaginar o processo de cache do navegador da seguinte forma:

 

• Quando você visita uma determinada página na Internet pela primeira vez, todos os elementos dessa página devem ser baixados. Portanto, a visita a um site sempre envolve o download de dados.
• Alguns dos elementos dos sites mudam regularmente, outros são estáticos. Os elementos estáticos dos sites são adequados para o cache do navegador. Eles são armazenados no cache de seu navegador.
• Na próxima vez que a página for chamada, o navegador acessará os recursos armazenados em seu cache. Como resultado, ele precisa solicitar menos dados do servidor e o servidor precisa enviar menos dados.

 

O conceito de cache é bastante difundido. Ele também é usado por servidores proxy em redes de computadores maiores, por exemplo . Se houver um grande número de participantes na rede, o servidor proxy providencia para que os recursos do cache sejam enviados aos usuários. Isso significa que ele não precisa encaminhar a solicitação do cliente para o servidor e não é necessário atravessar a Internet para recuperar os recursos.

 

Até mesmo a mera definição do cache do navegador revela sua grande vantagem: ele leva a uma otimização da velocidade de carregamento. Como a comunicação com o servidor é mais curta e os recursos podem ser recuperados diretamente da memória, eles podem ser disponibilizados mais rapidamente.

 

Vantagem: velocidade

A vantagem do armazenamento em cache do navegador é a otimização da velocidade de carregamento. Como uma agência de SEO, nós da Specht GmbH usamos o cache do navegador para aumentar a velocidade da página (velocidade de carregamento da página). Uma alta velocidade de página é um dos fatores de classificação mais importantes para os mecanismos de pesquisa, como o Google.

 

Quanto mais rápido todo o seu site e todas as subpáginas associadas forem carregadas quando acessadas pelos usuários, maiores serão as suas chances de obter boas classificações nos resultados de pesquisa. As altas classificações nos resultados de pesquisa são acompanhadas de melhor visibilidade, mais visitantes do site e maior rapidez na realização de suas metas individuais. O aumento da velocidade da página também tem um efeito positivo na experiência do usuário (UX).

 

No SEO na página, as seguintes opções para melhorar o tempo de carregamento devem ser utilizadas em particular:

 

• Compactação de imagens
• Remoção de plug-ins supérfluos do CMS
• Uso do cache do navegador

 

O Google oferece suporte a operadores de sites (webmasters), especialistas em SEO e agências de marketing on-line na otimização de mecanismos de pesquisa. Ele fornece várias ferramentas úteis para otimizar seu próprio site, como o Google Search Console e o Google Analytics. O operador do mecanismo de pesquisa também fornece ferramentas para reduzir o tempo de carregamento dos sites com Google Pagespeed Insights uma ferramenta de SEO útil para reduzir o tempo de carregamento dos sites.

 

Desvantagem: pontualidade

Uma desvantagem dos caches do navegador é sua atualização potencialmente limitada. Como usuário, não é possível saber quando os webmasters atualizam subpáginas individuais ou até mesmo sites inteiros. Os recursos armazenados no cache podem ficar desatualizados após as atualizações.

 

Tanto os webmasters quanto os usuários têm a responsabilidade de evitar o problema de conteúdo desatualizado. Os webmasters decidem se querem usar o cache e quais recursos devem ser armazenados em cache e por quanto tempo - discutiremos como os webmasters podem definir corretamente as regras de cache na próxima seção.

 

Enquanto os webmasters são solicitados a selecionar apenas os recursos estáticos para armazenamento em cache para garantir que os dados estejam atualizados, os usuários têm a responsabilidade de esvaziar o cache regularmente. A limpeza do cache exclui todo o conteúdo armazenado no cache.

 

Se uma página for recarregada depois que o cache tiver sido esvaziado, todas as atualizações dessa página serão exibidas. Além disso, os recursos estáticos atualizados e, portanto, novos, são armazenados no cache para que o novo conteúdo seja carregado do cache na próxima vez. O esvaziamento regular do cache também tem a vantagem de reduzir a carga na unidade de disco rígido do dispositivo final e, como resultado, o desempenho do dispositivo final é novamente maior.

 

 

Definir corretamente as regras para salvar recursos no cache do navegador

A implementação do cache tem dois aspectos: o teórico e o prático. Abordaremos o lado prático na próxima seção. Primeiramente, gostaríamos de expandir o conhecimento teórico sobre cache que já abordamos nesta publicação do blog para que você entenda ainda melhor a parte prática. Até agora, você já pegou o jeito da coisa:

 

• O armazenamento em cache dos recursos do seu site no navegador do usuário faz todo o sentido, pois ajuda a aumentar a velocidade de carregamento do seu site e de todas as subpáginas.
• Para garantir que os recursos armazenados no cache do navegador estejam atualizados, os webmasters devem definir corretamente as regras de armazenamento em cache.
• Os usuários também são responsáveis: recomenda-se que o cache seja esvaziado regularmente para garantir que os dados estejam atualizados.

 

Ao definir as regras de armazenamento em cache como um webmaster, é melhor diferenciar entre três períodos de tempo: longo prazo, médio prazo e curto prazo. Você atribui cada recurso a um desses períodos de tempo. Isso garante que o respectivo recurso seja automaticamente removido do cache se sua atualidade for comprometida.

 

Recomendações: Quando quais recursos devem ser carregados do cache

Para garantir que os recursos no cache do navegador estejam atualizados, como webmaster, você deve armazenar em cache apenas recursos estáticos de longo prazo (por exemplo, por um mês ou um ano). Exemplos de recursos estáticos são arquivos JavaScript e arquivos CSS. Aqui está uma visão geral dos recursos adequados para armazenamento em cache:

 

• CSS, HTML e JavaScript
• Arquivos de imagem, como JPG, JPEG, PNG e GIF
• Arquivos de objetos, como vídeos e PDFs

 

Tomemos as imagens como exemplo: O logotipo de uma empresa ou o infográfico em um artigo informativo não muda de jeito nenhum ou só muda depois de vários anos. Portanto, imagens como logotipos podem ser armazenadas no cache do navegador por um longo período sem problemas, pois permanecem atualizadas por um longo período, por exemplo, mais de um ano.

 

O fato de recursos como CSS, HTML e JavaScript também poderem ser salvos no cache do navegador significa que o layout de uma página pode ser salvo , por exemplo. O salvamento de arquivos CSS, em particular, tem um efeito positivo no desempenho dos sites. Os arquivos CSS podem ser salvos por um período de um mês.

 

Todos os outros arquivos que mudam regularmente, talvez até várias vezes em um dia, devem ser armazenados no cache do navegador por, no máximo, algumas horas. Os arquivos HTML são um exemplo de períodos de cache de curto prazo. Eles são usados para formatar textos, entre outras coisas. Como os textos são alterados com frequência, todos os arquivos associados devem ser recarregados todas as vezes, se possível.

 

Cabeçalho: As informações são armazenadas aqui

Na estrutura da página, há o chamado cabeçalho. Eles definem regras que regem, por exemplo, a troca de informações entre o navegador e o servidor ou o rastreamento pelos algoritmos do Google. Como as regras de armazenamento em cache também são armazenadas nos cabeçalhos, elas desempenham uma função central no armazenamento em cache do navegador.

 

Os comandos são usados no cabeçalho de cache para especificar qual recurso ou arquivo pode ser armazenado em cache. Se nenhuma informação correspondente for definida, não haverá armazenamento em cache. É feita uma distinção entre dois cabeçalhos de cache: o cabeçalho Cache-Control e o cabeçalho Expires.

 

O cabeçalho Cache-Control contém informações sobre qual recurso ou arquivo pode ser armazenado em cache. As instruções a seguir são comuns:

 

• no-cache: o navegador pode armazenar em cache, mas deve perguntar ao servidor se o respectivo recurso é a versão mais recente.
• público: o recurso pode ser salvo no cache.
• privado: o recurso pode ser salvo no cache, mas somente pelo navegador e não por nenhum servidor proxy existente.
• no-store: não é permitido armazenar temporariamente o recurso.

 

Enquanto o cabeçalho Cache-Control indica quais recursos e arquivos podem ser armazenados onde, o cabeçalho Expires é usado para definir períodos de tempo para o armazenamento em cache. As recomendações da seção anterior desta postagem do blog podem ser implementadas nesse cabeçalho de cache: Ao nomear especificamente um período de tempo no cabeçalho Expires, o navegador sabe a partir de que momento deve solicitar uma nova cópia do respectivo recurso ou arquivo do servidor e armazená-lo em cache.

 

 

Implementação: Como usar o cache do navegador corretamente!

Há duas maneiras de implementar o armazenamento em cache. A maneira simples é usar plug-ins no CMS; a maneira complicada, com maior controle sobre o cache, é alterar o arquivo htaccess.

 

Configure o cache por meio do arquivo htaccess

O arquivo htaccess pode ser encontrado no diretório raiz do site com o nome ".htaccess". Abra o arquivo htaccess e primeiro ative o cache do navegador por meio do módulo "mod_headers" usando o seguinte comando como administrador:

 

Cabeçalhos do a2enmod
/etc/init.d/apache2 restart

 

Em seguida, você tem a opção de especificar os tipos de arquivos para armazenamento em cache. Por um lado, você pode resumir todos os tipos de arquivo, como neste exemplo:

 

<IfModule mod_headers.c>
<FilesMatch „\.(gif|ico|jpeg|jpg|png|css|js)$“>
Header set Cache-Control „max-age=604800, public“
</FilesMatch>
</IfModule>

 

Em segundo lugar, ao definir os tipos de arquivo para armazenamento em cache, você pode definir diferentes padrões para os diferentes tipos de arquivo simplesmente iniciando uma nova linha de correspondência de arquivo:

 

<IfModule mod_headers.c>
<FilesMatch „\.(gif|jpg|jpeg|png)$“>
Header set Cache-Control „max-age=604800, public“
</FilesMatch>
<FilesMatch „\.(css|js)$“>
Header set Cache-Control „max-age=2592000, public“
</FilesMatch>
</IfModule>

 

A especificação "max-age" indica quantos segundos (por exemplo, 604.800 segundos = uma semana) um arquivo deve ser armazenado no cache. As abreviações gif, jpg, jpeg e png são formatos para imagens, enquanto css e js representam arquivos CSS e JavaScript, respectivamente.

 

O navegador sempre prefere as informações do módulo "mod_headers" que acabamos de mencionar. As informações do módulo alternativo "mod_expires" são levadas em conta somente se não houver especificações em "mod_headers" sobre quanto tempo os arquivos devem ficar em cache antes de serem solicitados novamente ao servidor. Como webmaster, você se beneficia de uma melhor visão geral com o módulo Expires.

 

Se a especificação dos períodos de cache em "mod_headers" consumir muito tempo, inicie o módulo Expires usando o seguinte comando:

 

a2enmod expira
/etc/init.d/apache2 restart

 

De agora em diante, você pode preencher o cabeçalho Expires com todas as informações importantes para os períodos de armazenamento em cache, definindo as seguintes instruções, por exemplo:

 

<IfModule mod_expires.c>

ExpiraAtivo em

ExpiresByType image/jpg "acesso 1 ano"

ExpiresByType image/jpeg "acesso 1 ano"

ExpiresByType text/css "acesso 1 mês"

ExpiresByType application/javascript "acesso 1 mês"

ExpiresByType application/x-javascript "acesso 1 mês"

ExpiresByType application/x-shockwave-flash "acesso 1 mês"

ExpiresByType image/x-icon "acesso 1 ano"

ExpiresByType text/html "acesso mais 300 segundos"

</IfModule>

 

A última linha mencionada, "ExpiresByType text/html", fornece informações sobre por quanto tempo a página inteira, ou seja, todo o seu conteúdo, deve ser armazenada no cache.

 

Como os textos das páginas HTML, em particular, mudam regularmente, foram estabelecidos períodos de cache de 180 a 600 segundos para as páginas HTML, desde que essas páginas sejam visitadas com frequência e/ou que o conteúdo das páginas seja atualizado com frequência pelos operadores do site.

 

Configure o armazenamento em cache com a ajuda de plug-ins

O CMS (sistema de gerenciamento de conteúdo; sistema para criar e gerenciar sites) mais usado é o WordPress. Existem plug-ins para o WordPress que permitem ampliar a gama de funções. Alguns dos plug-ins são especializados em cache. Por exemplo, os seguintes plug-ins do WordPress permitem que você configure e gerencie o armazenamento em cache no navegador:

 

• WP Rocket
• W3 Total Cache
• WP Fastest Cache
• WP Super Cache
• WP Velocidade da luz
• Otimizador SG
• Desempenho da Swift
• Beija-flor
• Ativador de cache
• Comet Cache

 

Esses 10 plug-ins do WordPress já são suficientes para configurar o cache personalizado no navegador, o que aumenta o desempenho de todo o site e melhora significativamente a experiência do usuário dos visitantes do site, aumentando a velocidade de carregamento do site.

 

Graças aos plug-ins do WordPress, os leigos sem nenhum conhecimento técnico podem regular facilmente o armazenamento em cache no navegador. Além disso, alguns dos plug-ins do WordPress (por exemplo, WP Rocket; Swift Performance) têm outras vantagens. Eles ajudam a melhorar holisticamente o desempenho e o tempo de carregamento do site.

 

Conclusão: Configure o armazenamento em cache e obtenha benefícios significativos de SEO!

Como webmaster ou especialista em SEO, configure o armazenamento em cache em sites e obtenha vantagens de longo alcance na otimização de mecanismos de pesquisa! Com a ajuda de plug-ins para WordPress e outros sistemas de gerenciamento de conteúdo, o armazenamento em cache é fácil de implementar, mesmo para quem não é especialista.

 

Se você tiver conhecimento técnico básico, nem precisará de plug-ins e usará alguns comandos simples no cabeçalho de suas páginas para personalizar o cache do navegador e oferecer aos visitantes do seu site uma boa experiência de usuário.

 

FAQ: Perguntas e respostas sobre o tópico "Cache do navegador"

Nesta última seção da nossa postagem no blog, resumimos algumas das perguntas mais frequentes feitas pelos usuários. Se você também tiver uma pergunta, como especialistas em otimização de mecanismos de pesquisa, teremos prazer em fornecer uma resposta adequada. Entre em contato conosco e entraremos em contato com você!

 

Como os visitantes do site podem influenciar o armazenamento em cache?

Os usuários da Internet podem influenciar o armazenamento em cache de várias maneiras. Por exemplo, eles podem desativar completamente o armazenamento em cache nas configurações do navegador. Isso faria com que nenhum recurso ou arquivo fosse salvo no navegador do usuário, independentemente das instruções do webmaster.

 

Além disso, os visitantes do site podem definir uma idade máxima para os recursos ou definir regras de cache para uma página da Web individual que sejam diferentes das regras de cache para o restante do site. Também é sempre possível esvaziar o cache.

 

Como posso limpar o cache do navegador?

Esse processo varia de acordo com o navegador.

 

Com o Google Chrome, os visitantes do site excluem o cache abrindo-o primeiro com a combinação de teclas "Ctrl + Shift + Del". Em seguida, eles podem selecionar as imagens e outros objetos no cache e iniciar a exclusão.

 

Os usuários também podem limpar o cache no Internet Explorer usando a mesma combinação de teclas do Google Chrome. Depois de usar a combinação de teclas, uma janela é aberta com a informação "Excluir dados do navegador". Ao selecionar a opção "Dados e arquivos armazenados em cache" e clicar em "Limpar", o cache do navegador é esvaziado.

 

Na próxima vez que você visitar um site visitado anteriormente, os arquivos do cache não serão mais usados depois que o cache for esvaziado. Em vez disso, o navegador solicita a versão atual de um site ao servidor.

 

Qual é a diferença entre o cache do navegador e o cache do servidor?

Enquanto o cache do navegador armazena recursos no disco rígido do visitante do site, o cache do servidor os armazena no servidor do webmaster. Portanto, o cache de servidor também contribui para aumentar a velocidade de carregamento da página.

 

As diferenças entre o cache do navegador e do servidor estão, portanto, nos níveis de gerenciamento de dados, pois diferentes tipos de dados são armazenados em diferentes locais.