Como corrigir o cache do navegador de alavancagem no WordPress em 2021

Como corrigir o cache do navegador de alavancagem no WordPress

Introdução

Seu site está carregando lentamente? Você procura uma solução eficaz para resolver o aviso de aproveitamento de cache do navegador no WordPress ? A velocidade da página é um aspecto essencial da experiência do usuário. Neste post, compartilharei pontos básicos a avançados sobre como corrigir o cache do navegador de alavancagem no WordPress. Portanto, se você também está enfrentando esse problema, leia o post completo para melhor compreensão.

O tempo que leva para carregar a página solicitada no navegador do usuário influencia muito o fato de o próprio usuário permanecer em seu site, por exemplo, para concluir uma venda. O tempo de carregamento da página depende de vários fatores: o cache do navegador é um deles.

Vamos primeiro explorar o que é o Leverage Browser Caching e como ele pode ajudar a acelerar o seu site. Então, veremos como avaliar se um site WordPress precisa de cache do navegador. Por fim, veremos várias maneiras de resolver o aviso de aproveitamento de cache do navegador no WordPress, com e sem o uso de um plug-in.

Qual é o cache do navegador de alavancagem?

O cache é um espaço de armazenamento temporário. Quando um visitante solicita uma página em seu site, o servidor coleta as informações necessárias do banco de dados, organiza-as em um documento HTML e as fornece ao navegador. O navegador analisa este documento e baixa todos os recursos relevantes para visualizar a página.

O cache é o processo de armazenamento de uma parte da carga útil da página em um cache para acelerar o carregamento das páginas no futuro. O cache pode estar presente no servidor ou dispositivo do visitante.

No cache do servidor, você pode armazenar as consultas do banco de dados e a resposta HTML estática para a página solicitada.

O cache do navegador de alavancagem é o processo de utilização de armazenamento temporário no dispositivo do visitante para armazenar recursos como folhas de estilo, scripts e imagens por um período especificado.

As visitas subsequentes a uma página fazem com que o navegador baixe os mesmos recursos repetidamente, cada vez que o usuário solicita a página. Como esses recursos estáticos representam uma quantidade significativa de carga útil para um site WordPress, o cache do navegador reduz o tempo de carregamento da página.

O cache do navegador é necessário?

Uma verificação do site sobre a distribuição do tamanho dos recursos de sua carga útil geralmente revela o tamanho de seus recursos e quantas solicitações um navegador deve enviar para baixá-los antes de exibir sua página. Se você perceber que uma parte significativa de sua página da Web é composta de arquivos estáticos, considere armazenar em cache seu navegador para melhorar a velocidade da página.

Uma maneira mais natural de determinar se o cache do navegador é necessário é usar uma ferramenta de teste de velocidade de página, como GTmetrix. Basta digitar a URL do seu site para iniciar um teste detalhado. Os resultados do teste mostrarão como acelerar seu site. Como você pode ver, um aviso comum na seção de resultados é o uso do cache do navegador.

Como alternativa, você pode usar o Think with Google, uma ferramenta de teste de velocidade de página para avaliar seu site em dispositivos móveis. Uma recomendação importante dessa ferramenta é aproveitar o cache do navegador para o seu site.

O PageSpeed ​​Insights, outra ferramenta do Google para testar a velocidade da página do seu site, pode sugerir que você crie uma política de cache eficaz para melhorar a velocidade da página. O cache do navegador é uma parte importante de uma política de cache eficaz.

Resolva o aviso de cache do navegador de alavancagem no WordPress sem plugins

Se você não quiser usar um plug-in, poderá alterar as configurações do servidor da Web para corrigir o cache do navegador de alavancagem. Nesse caso, o servidor da Web instruirá o navegador do visitante a salvar recursos específicos no cache do navegador. O navegador armazenará esses arquivos localmente por um determinado período e os usará durante as visitas subsequentes à página.

A configuração do servidor da Web para instruir os navegadores dos visitantes a iniciar o armazenamento em cache varia de servidor para servidor. Neste post, mostraremos como habilitar o cache do navegador nos dois servidores web mais populares: Apache e Nginx.

Você pode corrigir o cache do navegador de alavancagem seguindo estas etapas:

1. Adicionando Cabeçalhos de Expiração: Esses cabeçalhos informam ao navegador quando solicitar uma nova versão de um recurso do servidor.
2. Alterar cabeçalhos de verificação de cache: você pode usar esses cabeçalhos para definir os critérios de cache.
3. A configuração de cabeçalhos de tags de entidade (ETags): é possível identificar se um recurso no servidor foi alterado em relação ao arquivo local.

Corrija o cache do navegador de alavancagem no Apache

1. Crie ou edite o arquivo .htaccess

Em um servidor Apache, você pode definir todos os parâmetros necessários no arquivo .htaccess. Este arquivo permite que você defina as configurações do Apache manualmente. É um arquivo de texto simples que armazena parâmetros do Apache e define permissões e configurações para o diretório em que reside.

Leia mais: Lista de verificação de SEO na página: 10 dicas de otimização acionáveis ​​para classificar melhor

Se você colocar um arquivo .htaccess no diretório principal do seu site, suas regras serão aplicadas a todas as páginas do seu site. Você também pode colocar outro arquivo .htaccess em um de seus subdiretórios para definir permissões específicas apenas para esse local. Observe que os arquivos .htaccess de nível inferior substituem as configurações dos arquivos .htaccess nos diretórios raiz.

Se você tiver acesso de terminal ao servidor, poderá efetuar login remotamente para criar um arquivo .htaccess no local apropriado (para regras de cache do navegador no nível do site, essa deve ser a pasta raiz).

Como alternativa, se você estiver usando o gerenciador de arquivos cPanel, vá para o local desejado e crie um arquivo .htaccess .

Se você já tem um arquivo .htaccess , você pode simplesmente adicionar as novas regras de cache do navegador.

2. Adicionar cabeçalhos de expiração

A primeira configuração no arquivo .htaccess é habilitar a função expirar cabeçalhos. Adicione a seguinte linha ao arquivo:

Expira Ativo em

Depois disso, você pode definir o período para diferentes arquivos de texto usando a sintaxe mostrada abaixo:

ExpiresByType texto / CSS “acesso 1 mês”

ExpiresByType texto / HTML “acesso 1 mês”

Para definir um tempo de expiração para imagens, use imagem em vez de barra de texto e extensão de imagem.

ExpiresByType imagem / jpeg “acesso 1 mês”

ExpiresByType imagem / svg “acesso 1 mês”

Para definir o prazo de inscrição, use application e especifique a extensão do arquivo.

Aplicação ExpiresByType / pdf “acesso 1 mês”

Para todos os outros arquivos não cobertos por nenhuma configuração específica, use a definição ExpiresDefault:

ExpiraDefault “acesso 1 mês.”

3. Defina uma política de cache

Em seguida, você precisa definir os critérios de cache usando as configurações de verificação de cache.

Há três partes principais de uma política de cache:

• como um recurso é armazenado em cache
• a localização do cache
• o tempo antes do recurso expirar

Um cache público indica ao navegador que os recursos podem ser armazenados em cache em qualquer lugar. Por outro lado, um cache privado permite armazenamento apenas no dispositivo cliente.

Por exemplo, a página de perfil de um usuário conectado deve ser armazenada em cache apenas no dispositivo cliente.

Por outro lado, a página inicial de um blog também pode ser armazenada em cache em uma CDN. Você pode configurar uma política de cache pública adicionando a seguinte regra:

<IfModule mod_headers.c>

Conjunto de cabeçalhos de controle de cache público

</ IfModule>

Você também pode especificar critérios diferentes para diferentes tipos de arquivos adicionando os seguintes filtros ao módulo de cabeçalho:

<ifModule mod_headers.c>

<arquivosCorrespondem “\. (ico | jpeg | jpg | png) $”>

Conjunto de cabeçalhos de controle de cache público

</ FilesMatch>

<arquivosCorrespondem “\. (php) $”>

Conjunto de cabeçalhos de controle de cache privado

</ FilesMatch>

</ IfModule>

O código acima especifica que o navegador pode armazenar arquivos de imagem em qualquer lugar, mas os arquivos PHP devem ser armazenados no dispositivo cliente.

Você também pode adicionar uma configuração Expira a cada regra de correspondência de arquivo. O tempo de expiração deve ser definido em segundos. Ao defini-lo como zero, o navegador deve solicitar o arquivo toda vez que a página for carregada:

O conjunto de cabeçalhos expira 0

4. Desative as tags de entidade no Apache

Por fim, é necessário desabilitar as Tags de Entidade usando o seguinte código:

FileETag Nenhum

A desativação da ETag exige que o navegador confie nos critérios de cache e evite a revalidação de arquivos sempre que uma página for carregada.

Salve o arquivo .htaccess e reinicie o Apache para que as alterações tenham efeito.

Resolva o cache do navegador de alavancagem no Nginx

No Nginx, você pode encontrar o arquivo de configuração nginx.conf no local /etc/nginx/site-enabled/default.

Você pode adicionar um cabeçalho Expires a tipos de arquivo específicos usando o seguinte código:

localização ~ * \. (ico | jpeg | jpg | png) $ {

expira 30d;

}

Você também pode adicionar um cabeçalho Cache-Control ao mesmo bloco de código:

localização ~ * \. (ico | jpeg | jpg | png) $ {

expira 30d;

add_header Cache-Control “público”;

}

Salve o arquivo de configuração e reinicie o Nginx para que as alterações tenham efeito.

Resolva o Cache do navegador de alavancagem com um plug-in

Se você estiver usando um plug-in de cache para WordPress, ele já pode ter suporte para cache do navegador.

Agora vamos ver como resolver a alavancagem do cache do navegador com alguns dos plugins de cache mais famosos.

1. WP Foguete

O WP Rocket é um dos plugins mais rápidos e recomendados para WordPress que pode gerenciar todas as otimizações de velocidade com apenas alguns cliques. O WP Rocket não apenas permite que você resolva o cache do navegador de alavancagem, mas também otimize seu site usando várias técnicas, como:

• compressão de arquivo estático (GZip) – para reduzir o tamanho total dos dados (leia o post completo sobre como habilitar a compressão GZip no WordPress)
• habilitar cache de arquivo (incluindo pré-carregamento de cache) – para colocar menos estresse no servidor (e recuperar uma cópia pré-digitalizada de cada página)
• Otimização de fontes do Google – para garantir que fontes mais massivas sejam carregadas rapidamente,
• Carregamento lento – para que as imagens sejam cobradas apenas quando o usuário rolar para baixo até a seção de uma página em que a imagem é necessária
• Minificação e Combinação – redução de tamanho e combinação de recursos de texto para entregá-los mais rapidamente ao usuário final
• Adiar o carregamento do JS – para que a página apareça rapidamente em vez de esperar o download de todos os recursos.
• Integre e habilite uma rede CDN – para que imagens mais pesadas sejam entregues mais rapidamente
• Pré- busca de DNS – para reduzir o tempo necessário para resolver a origem do conteúdo de terceiros

Tudo isso pode parecer incompreensível para quem não está diretamente envolvido na otimização de um site. No entanto, na realidade, essas são todas as medidas que você precisará tomar se quiser acelerar o WordPress.

É altamente recomendável ler nossa análise do WP Rocket,

2. Cache LiteSpeed

O LiteSpeed ​​Cache é um plugin de cache que permite resolver a alavancagem do cache do navegador simplesmente habilitando a função. Instale e ative o plugin e vá para as configurações de cache. Alterne para a guia Navegador e permita a opção Cache do navegador .

Também é possível definir o tempo de expiração. Observe, no entanto, que essa configuração se aplica a todos os arquivos armazenados em cache no site.

3. Cache mais rápido do WP

WP Fastest Cache é outro plugin de cache do WordPress com opções de personalização simples. A versão gratuita permite ativar o cache do navegador. Vá para a página de configurações e marque a caixa de seleção para cache do navegador.

4. Cache Total W3

O W3 Total Cache é outro plugin de cache do navegador amplamente utilizado. Ele permite que você personalize uma ampla gama de opções de cache. Uma vez instalado, vá para a seção Cache Browser na página de configurações.

Este plugin permite que você defina permissões para várias categorias de arquivos, como imagens, scripts e folhas de estilo. Para cada grupo, você pode definir cabeçalhos Expires, Expires lifes e ETags.

perguntas frequentes

Conclusão

Neste post, exploramos a importância da velocidade da página e por que você deve corrigir a alavancagem do cache do navegador no WordPress. Vimos ferramentas de teste de velocidade que indicam se o seu site WordPress precisa de cache do navegador. Em seguida, discutimos como configurar os vários servidores da Web para habilitar o cache do navegador sem usar um plug-in. Por fim, analisamos três plugins populares que permitem corrigir o cache do navegador de alavancagem no WordPress.