Como habilitar o cache do navegador usando o Cloudflare no WordPress?

O cache do navegador é uma técnica para acelerar seu site pedindo ao navegador para armazenar ou "armazenar em cache" arquivos estáticos por um período de tempo para que eles não precisem ser baixados novamente em visitas subsequentes. Isso é tudo o que há para ele em poucas palavras.

Neste tutorial, aprenderemos como adicionar o cabeçalho expires no Cloudflare, que basicamente informa ao navegador por quanto tempo ele deve armazenar em cache os recursos estáticos.

Se você deseja usar o cache do navegador, deve informar aos navegadores da Web por quanto tempo eles devem reter imagens, CSS e arquivos Javascript localmente no navegador do cliente. O navegador do usuário usará menos dados ao navegar nas páginas do seu site se determinados padrões e configurações forem usados ​​(porque precisa baixar menos arquivos). O uso do cache do navegador no WordPress resulta em um tempo de carregamento mais rápido para o seu site.

O que é o cache do navegador?

Cache é o processo de armazenamento de dados em um cache. Um cache nada mais é do que um espaço de armazenamento temporário de dados.

O armazenamento temporário de conteúdo em navegadores da Web é chamado de cache do navegador. O navegador da Web de um visitante baixa e salva vários recursos do site na unidade local. Imagens, arquivos HTML e arquivos JavaScript estão entre eles. A página da web será carregada rapidamente e o consumo de largura de banda será reduzido na próxima vez que o usuário visitar o site.

Vantagens do cache

As páginas da Web podem ser pré-buscadas e armazenadas em cache em clientes, proxies e servidores. O cache online tem várias vantagens, incluindo desempenho aprimorado da Web.

• O armazenamento em cache reduz o consumo de largura de banda, reduz o tráfego de rede e reduz o congestionamento da rede.
• Por dois motivos, o armazenamento em cache reduz a latência de acesso:
  • a) Documentos frequentemente visitados são recuperados de um cache proxy local e não de servidores de dados distantes, reduzindo os atrasos de transmissão.
  • b) Como o armazenamento em cache reduz o tráfego de rede, os documentos que não são armazenados em cache podem ser recuperados muito mais rapidamente do que seriam sem ele, graças à diminuição do congestionamento ao longo do caminho e à menor carga de trabalho do servidor.
• Ao distribuir dados entre caches de proxy na WAN, o armazenamento em cache minimiza a carga de trabalho do servidor Web distante.
• O cliente pode adquirir uma cópia em cache no proxy se o servidor remoto estiver indisponível devido a uma falha ou particionamento de rede. Como resultado, a robustez do serviço Web é melhorada.

Como funciona o cache do navegador?

Uma explicação de como funciona o cache do navegador é mostrada no gráfico abaixo.

O servidor web coleta dados de um site e os envia para a janela do navegador. Dependendo se o visitante é um visitante pela primeira vez ou já visitou o site, o armazenamento em cache é executado.

Vamos dar uma olhada nesses dois exemplos para ver como funciona o cache.

Caso 1: Um usuário de primeira viagem

O gráfico abaixo mostra uma circunstância em que uma pessoa está visitando um site pela primeira vez.

O navegador da web coleta dados do servidor da web quando você acessa um site pela primeira vez. Isso se deve ao fato de que os recursos online ainda não foram armazenados em cache. O navegador da Internet salvará os recursos on-line em um cache para que você possa ter uma experiência melhor na próxima vez que visitar o site.

Caso 2: O usuário já havia visitado o site.

Se um usuário visitar um site uma segunda vez no mesmo dispositivo de computação, a segunda visita será carregada mais rapidamente do que a primeira. Isso ocorre porque o navegador da Web usará o cache para obter recursos da Web estáticos, como imagens, CSS e JavaScript. A página HTML será entregue através do navegador da web.

Este cenário de caso é descrito no gráfico abaixo.

A visualização acima implica que a informação é atual. O termo "conteúdo fresco" refere-se a coisas que ainda não expiraram e podem ser recuperadas do cache. O material obsoleto é o conteúdo que passou da data de expiração do cache e só pode ser obtido no servidor da web.

Analise seu site usando GTMetrix

Você deve ter notado o erro "Adicionar cabeçalhos de expiração" se usou o GTmetrix para avaliar seu site.

Como verificar o cabeçalho de cache no seu navegador?

Os cabeçalhos de resposta são usados ​​pelo cache do navegador. O navegador envia 'cabeçalhos de solicitação' com cada solicitação HTTP e o servidor responde com 'cabeçalhos de resposta' e os dados.

O servidor especifica um cabeçalho de resposta chamado 'controle de cache' que informa ao navegador quanto armazenar em cache os arquivos (em segundos).

Clique nos três pontos (menu kebab) no canto superior direito do seu navegador Chrome

Clique em Mais ferramentas -> ferramentas do desenvolvedor

Em Network -> js , você encontrará as pastas necessárias.

Abra o arquivo jquery e clique em Header para observar o controle de cache .

Como você pode ver, os arquivos de cache são carregados instantaneamente da unidade ou da memória (RAM).

O cache do navegador permite que você faça o seguinte:

• A carga do servidor deve ser reduzida.
• Reduza o tempo que leva para uma página carregar
• Reduza seus custos de largura de banda.

Como habilitar o cache do navegador usando o Cloudflare (Adicionar cabeçalhos de expiração Cloudflare)?

Se você usa o Cloudflare, pode adicionar facilmente cabeçalhos de expiração a cada solicitação com apenas dois cliques e sem plug-ins.

Acesse o painel da Cloudflare

Digite seu domínio

Clique em Cache -> Configuração no menu do lado esquerdo

Role para baixo até "Browser Cache TTL" e altere a duração de acordo

Será definido para 4 horas por padrão. Mude para algo que dure mais de dois meses e pronto!

Conclusão

O cache do navegador é uma estratégia para melhorar seu site instruindo o navegador a salvar ou "armazenar em cache" os arquivos por um determinado período de tempo para que eles não precisem ser recuperados novamente em várias visitas. Em poucas palavras, isso é tudo o que há para isso.

Se você quiser usar o cache do navegador, precisará informar aos navegadores da Web por quanto tempo eles devem manter imagens, CSS e arquivos Javascript no navegador do cliente. Se forem aplicados padrões e configurações específicos, o navegador do usuário consumirá menos dados ao navegar nas páginas do seu site. O uso do cache do navegador no WordPress reduz o tempo de carregamento do seu site.