Como aproveitar o cache do navegador no WordPress?

Neste tutorial, aprenderemos como aproveitar o cache do navegador no WordPress para acelerar seu site.

Existem várias maneiras de acelerar sites WordPress em geral, no entanto, durante a análise de otimização de velocidade do site, o cache do navegador é o problema mais frequentemente descoberto.

Você pode usar uma variedade de ferramentas da Internet, incluindo Google PageSpeed ​​Insights, GTMetrix e Pingdom, para rastrear e testar a velocidade do seu site. Eles fornecem resultados precisos e mostram onde seu site precisa funcionar. Você pode ter visto o aviso "Leverage Browser Caching" ao avaliar a velocidade do site.

Você também pode ler: Servir ativos estáticos com uma política de cache eficiente

O que é aproveitar o cache do navegador?

Cache é o período de tempo que os navegadores mantêm os recursos em cache de um site em seus sistemas locais.

Imagens, JavaScript, CSS e outros recursos estão entre eles. Os materiais armazenados em cache que são salvos em sua máquina são carregados de volta toda vez que alguém vê o site. Assim, há um aumento perceptível na velocidade de carregamento do site. As pessoas desejam usar o cache do navegador no WordPress por esse motivo.

Como funciona o cache do navegador no WordPress?

Existem vários processos em execução em segundo plano sempre que um usuário entra em um determinado domínio.

Seu site WordPress fica visível por tudo que é comunicado ao navegador do usuário. Esses elementos do site incluem scripts, gráficos, folhas de estilo, conteúdo e muito mais. Quando necessário, eles devem ser transferidos do servidor do site para o navegador do usuário. Seguem as etapas desse processo:

1. Um URL é inserido no navegador do visitante.
2. Uma solicitação é feita pelo navegador ao servidor que hospeda seu site (a solicitação HTTP).
3. O usuário recebe os dados depois de montados pelo servidor. Os usuários começam a experimentar uma desaceleração neste momento. As pessoas podem minimizar o tamanho dos scripts, otimizar os tamanhos das imagens e outras medidas para interromper essa lentidão.
4. O navegador pode agora finalmente exibir o site após a transferência dos dados. Quando os usuários acessam páginas diferentes, o procedimento é repetido. O baixo desempenho pode resultar do servidor receber um grande número de solicitações de uma só vez. As pessoas devem, portanto, otimizar seus sites para manter sua velocidade.

Tanto os navegadores da Web quanto os programas de software usam conteúdo em cache. Ele é salvo momentaneamente em seu disco local. O termo "Web Cache" ou "HTTP Cache" refere-se a esses dados. O navegador fará o upload dos dados do seu computador e baixará o conteúdo do site toda vez que você visitar o mesmo site.

Você precisa usar uma ferramenta específica para determinar se o seu site WordPress utiliza efetivamente o cache do navegador.

Diferença entre o cache do navegador e o cache do servidor

Para reduzir a carga e a latência nos servidores da Web, o cache da Web do lado do servidor (para cache do lado do servidor, sempre recomendamos o LiteSpeed ​​Cache para WordPress) geralmente envolve o uso de um proxy da Web que armazena as respostas da Web dos servidores da Web aos quais está na frente. O cache da Web no lado do cliente também pode incluir o cache baseado em navegador, que salva uma cópia em cache do conteúdo da Web acessado anteriormente.

Este procedimento envolve o uso do servidor da Web para produzir páginas da Web em cache para o seu site. As ações mencionadas acima são um exemplo de cache de página da Web, que é principalmente do lado do servidor.

Você pode aprimorar o sistema de cache do servidor de algumas maneiras diferentes. A melhor escolha seria atualizar os cabeçalhos do Apache. A próxima etapa seria usar plugins do WordPress e, em seguida, o CDN seria adicionado.

Método 1: Aproveite manualmente o cache do navegador no WordPress

Nota: Este método só funciona com LiteSpeed ​​Enterprise ou Apache.

Ao incluir algum código no arquivo .htaccess, você pode alavancar manualmente o cache do navegador no WordPress. Para três objetivos distintos, você realmente precisa adicionar três bits de código:

1. Adicionar cabeçalhos de expiração
2. Adicionar cabeçalhos de controle de cache
3. Desativar ETags

Você deve ter acesso aos arquivos do seu site para adicionar este código, o que você pode fazer entrando em sua conta de hospedagem ou CyberPanel.

Vá para o painel do CyberPanel

Clique em WordPress -> Listar WordPress no menu do lado esquerdo

Você entrará na Lista de Sites WordPress . A partir daqui, clique no título do seu site WordPress

Este é o seu CyberPanel WordPress Manager . Clique em Gerenciador de Arquivos.

Em public_html , você encontrará . arquivo htaccess . Observe que as regras de htaccess são suportadas apenas pelo LiteSpeed ​​Enterprise. Não é suportado pelo OpenLite Speed. Clique com o botão direito sobre ele e clique em CodeMirror

Adicione o seguinte código no final do arquivo . htaccess , copiando e colando o conteúdo do arquivo. Não modifique o arquivo de nenhuma outra maneira.

 #Customize expires cache start - adjust the period according to your needs <IfModule mod_expires.c> FileETag MTime Size AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript ExpiresActive On ExpiresByType text/html "access 600 seconds" ExpiresByType application/xhtml+xml "access 600 seconds" ExpiresByType text/css "access 1 month" ExpiresByType text/javascript "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresDefault "access 1 month" </IfModule> #Expires cache end

O código mencionado acima instrui o navegador a entregar uma cópia em cache dos recursos estáticos em vez de baixar um novo.

Os tempos de atualização/expiração também estão incluídos nas configurações:

HTML leva 600 segundos.
JavaScript e CSS por um mês
Para imagens, um ano

Os visitantes não terão que baixar recursos específicos com muita frequência graças às suas datas de expiração. Se necessário, você pode alterar rapidamente os tempos de expiração.

Para estabelecer políticas de cache do navegador sobre como um recurso é armazenado em cache, onde ele é armazenado em cache e a idade máxima antes de expirar, precisamos incluir os cabeçalhos Cache Control. Não precisamos repetir os tempos de expiração como já mencionamos anteriormente.

o código a seguir e cole-o:

 # BEGIN Cache-Control Headers <IfModule mod_expires.c> <IfModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(css)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(js)$"> Header append Cache-Control "private" </filesMatch> <filesMatch "\.(x?html?|php)$"> Header append Cache-Control "private, must-revalidate" </filesMatch> </IfModule> </IfModule>

E-tags serão desabilitadas para que os navegadores usem cabeçalhos de expiração e controle de cache no lugar de verificar arquivos. Aqui está a chave:

 Turn Etags off <IfModule mod_headers.c> Header unset ETag </IfModule> FileETag None

Feito isso, clique em Salvar .

Método 2: Aproveite o cache do navegador no WordPress usando plug-ins

Um único erro pode arruinar completamente seu site, portanto, editar o arquivo.htaccess pode ser bastante perigoso. Assim, você pode usar plugins como o W3 Total Cache se não quiser correr riscos desnecessários.

Plugin W3 Total Cache

Veja como usar o W3 Total Cache, um dos melhores plugins para esse propósito, para alavancar o cache do navegador.

Digite seu painel do WordPress

Clique em Plugins -> Adicionar Novo no menu do lado esquerdo

Procure por cache total do W3 . Agora instale e ative este plugin

A guia Desempenho aparecerá no meu lado esquerdo. Clique em Desempenho -> Configurações gerais no menu do lado esquerdo

Role para baixo até Cache do navegador e certifique-se de ativar e salvar as alterações

Agora clique em Desempenho -> Cache do navegador no menu do lado esquerdo

Certifique-se de que

1. Definir cabeçalho de expiração
2. Definir controle de cache
3. Definir tag de entidade

estão habilitados. Salve todas as alterações.

Plugin de Cache LiteSpeed

O CyberPanel oferece a cada usuário o LiteSpeed ​​Cache por padrão com cada implantação de site WordPress. Se você não estiver usando o CyberPanel, poderá baixá-lo aqui.

Simplesmente ativando o recurso, o plug-in de cache LiteSpeed ​​Cache permite explorar o cache do navegador.

Entre no seu painel do WordPress

Clique em LiteSpeed ​​Cache -> Cache no menu do lado esquerdo

Clique na guia Navegador na barra superior

Certifique-se de que o cache do navegador está ativado e clique em Salvar alterações

Conclusão

Lembre-se de que, às vezes, depois de instalar um plugin, você não notará as alterações que fizer imediatamente. O arquivo CSS/Stylesheet é o culpado por esse atraso. Você não poderá visualizar as alterações feitas devido ao cache do navegador que você já salvou em sua máquina. É aconselhável usar o recurso de navegação anônima do seu navegador para visualizar o site e vê-lo corretamente após várias modificações. Você não consumirá recursos de cache se usar essa função e poderá perceber claramente as alterações.

A abordagem que você seleciona para aproveitar o cache do navegador é irrelevante. Observá-lo em ação é a única coisa que conta. O método que você usou para chegar lá é irrelevante, desde que Alavanque o cache do navegador no WordPress funcione como pretendido. Não há abordagem certa ou errada; o resultado será o mesmo, independentemente da sua escolha. Aproveitar o cache do navegador melhorará os tempos de carregamento se você decidir fazer alterações no arquivo .htaccess ou empregar um plug-in.