Cache do navegador WordPress

Acelere seu site WordPress drasticamente com o uso de cache de navegador de alavancagem, também conhecido como cache de expiração .

Muitos provedores de teste e otimização de velocidade se referirão a isso como “ Cache do navegador ”, “ Alavancar o cache do navegador ”, “ Cabeçalhos de expiração”, “ Cabeçalhos de cache ”, “ Controle de cache ” e “ Cache da Web ”. Conforme indicado pelo Google PageSpeed ​​Insights, GTMetrix e MaxCDN seguem este guia para configurá-lo corretamente.

O que é o cache do navegador?

O cache do navegador é o método do seu servidor web dizendo ao navegador para armazenar uma página ou recursos específicos por um determinado período de tempo para que eles não precisem ser baixados do servidor toda vez que as páginas são carregadas. Isso pode armazenar em cache uma página inteira e/ou recursos como JavaScript, CSS, imagens (jpeg, png, gif, etc) e muito mais.

Seu site WordPress carregará normalmente para cada usuário na primeira vez, mas depois será notavelmente mais rápido à medida que navegam pelas páginas e executam ações. Os recursos são armazenados no navegador e, como resultado, são carregados localmente em vez de serem baixados novamente.

A importância do cache do navegador

Em última análise, o objetivo e a importância do cache do navegador é acelerar seu site WordPress para que seus usuários tenham uma experiência mais agradável. Isso pode levar a um aumento de tráfego, melhores classificações de pesquisa e até mesmo melhores taxas de conversão no que você está tentando alcançar.

Como um efeito de bônus adicional, a carga é retirada do seu servidor web ao não baixar recursos em cada carregamento de página para o mesmo visitante e também economiza largura de banda em seu servidor web.

O cache da Web fornece velocidade mútua ao servidor e ao usuário

Implementando o cache do navegador

Configurar o cache do navegador de alavancagem em seu site WordPress é realmente muito rápido e fácil, mas a configuração pode ser diferente com base na configuração e no servidor da Web que você está usando. Por padrão, a configuração mais comum é o WordPress rodando em um servidor web Apache, mas existem outros servidores web populares disponíveis, como Nginx, IIS, etc.

Usar um plug-in de cache do navegador WordPress Leverage simplifica a implementação.

Para facilitar ainda mais, existem vários plugins de cache de navegador de alavancagem do WordPress disponíveis. Usamos, testamos e recomendamos o plugin WordPress Leverage Browser Caching Ninjas. É um plugin de instalação e ativação que faz o resto para você, simples assim.

Cache do navegador Apache

O Apache usa um arquivo .htaccess para cache do navegador. Deve haver um arquivo .htaccess na raiz da sua instalação do WordPress e se não houver um, você pode criar um e colocar as seguintes linhas de código nele, bem no topo:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

(https://gist.github.com/tribulant/36be0f683eedfa468f51)

Nginx Alavanca o Cache do Navegador

Se você estiver executando um servidor Nginx (En-gine-ex), a configuração é diferente do Apache acima. Você desejará adicionar o seguinte código ao seu arquivo de configuração do vhost, geralmente localizado em /etc/nginx/sites-enabled/default . Adicione o seguinte ao seu bloco de servidor:

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}

(https://gist.github.com/tribulant/19bb56a222af41854ecc)

Lighttpd

O módulo mod_expire é usado pelo Lighttpd para controlar os cabeçalhos que fornecem cache de conteúdo pelo navegador. Isso pode entrar na configuração do núcleo do Lighttpd de acordo.

$HTTP["url"] =~ "^/images/" {
expire.url = ( "" => "access plus 1 hours" )
}

(https://gist.github.com/tribulant/26263533eee33e3b61ed)

Cache do navegador de alavancagem do Microsoft IIS

Configurar o cache do navegador para IIS (Internet Information Services) é muito fácil.

Selecione-o na interface de Administration Tools e exiba suas propriedades. Após selecionar a aba HTTP Headers , você deverá ver duas áreas interessantes; Enable Content Expiration e Custom HTTP headers . O primeiro deve ser autoexplicativo e o segundo pode ser usado para aplicar os cabeçalhos Cache-Control.

Técnica do cache do navegador

Aproveitar o cache do navegador é obtido pelo servidor da Web enviando cabeçalhos HTTP para o navegador antes que o HTML seja enviado. Eles informam ao navegador certas coisas sobre o conteúdo HTML que está prestes a seguir, como o tipo de conteúdo, data atual, detalhes do servidor, controle e expiração de cache, etc.

Os cabeçalhos Cache-Control , Expires e Etag são os que fornecem instruções de cache do navegador. Esses cabeçalhos são criados automaticamente pelos métodos mencionados acima para alavancar o cache do navegador no Apache, Nginx e IIS adequadamente, para que você não precise entrar em detalhes, a menos que esteja interessado.

Cabeçalho de controle de cache

Cache-Control fornece ao navegador certas instruções, como por quanto tempo o conteúdo é considerado “fresco”, status público/privado de cache, validação e muito mais.

Cache-Control: max-age=3600, public

(https://gist.github.com/tribulant/6309926734d3c127064c)

Expira o cabeçalho

O cabeçalho Expires fornece uma data HTTP somente até quando o recurso deve e pode ser armazenado em cache até.

Expira: sábado, 28 de novembro de 2015 05:36:25 GMT

(https://gist.github.com/tribulant/1b655d60a8a665b18b85)

Cabeçalho Etag

Etag foi introduzida no HTTP 1.1 como um método de validação com um token enviado pelo servidor e utilizado pelo navegador para verificar se a representação do conteúdo foi alterada. Até o Etag , os navegadores usavam principalmente o cabeçalho Last-Modified , mas Etag é mais relevante agora. A maioria dos servidores web irá gerar ambos os cabeçalhos Last-Modified e Etag de qualquer maneira.

Etag: “pub1259380237;gz”

(https://gist.github.com/tribulant/2b542d76410bc047be00)

O resultado final do cache do navegador

O cache do navegador é mutuamente benéfico para você (seu servidor web) e seus usuários, fornecendo velocidade e desempenho para ambas as partes.

Com o cache do navegador, seja forte e agressivo, seu servidor web é inteligente o suficiente para saber quando os recursos foram alterados para gerar cabeçalhos atualizados para os usuários obterem novos conteúdos conforme necessário. Não entre em pânico que seus usuários ficarão presos em conteúdo antigo, não é o caso.

O cache do navegador da Web é altamente recomendado para sites WordPress e, em última análise, o plug-in recomendado do WordPress Leverage Browser Caching Ninjas fará o truque. Basta instalar, ativar e pronto!