Como Servir Ativos Estáticos com uma Política de Cache Eficiente no WordPress

Uma das características de um site amigável é que ele não deixa os visitantes esperando por muito tempo durante o carregamento. O armazenamento em cache de recursos estáticos é uma etapa crítica para melhorar o desempenho do site, mas não ajuda muito simplesmente configurar isso e seguir em frente. Sem uma política eficiente de cache do WordPress, você pode se esforçar para fornecer tempos de carregamento rápidos.

Felizmente, aprender como aproveitar o cache do navegador no WordPress é mais fácil do que você imagina. Você pode configurar o cache do navegador manualmente, e o Sistema de gerenciamento de conteúdo (CMS) também permite que você use ferramentas que fazem isso por você.

Neste artigo, explicaremos como o cache do navegador funciona e discutiremos seus benefícios. Também mostraremos como verificar se o cache está ativado em seu site e veremos diferentes maneiras de ativá-lo.

O que é o cache do navegador?

O cache do navegador é um processo que salva cópias dos elementos de um site em seu computador. Quando você visita um site, seu navegador baixa diferentes partes do conteúdo, como imagens e texto. Em vez de baixar esse conteúdo toda vez que você visita o site, seu navegador “armazena em cache” ou armazena parte dele para o caso de você precisar dele mais tarde.

Na próxima vez que você visitar o site, seu navegador verificará quais elementos estão armazenados localmente. Ele carregará esses elementos do cache em vez de solicitá-los do servidor do site. Isso pode tornar o carregamento da página significativamente mais rápido, dependendo do número de ativos armazenados no cache.

Se você tivesse que verificar o cache do seu navegador agora, provavelmente encontrará algumas centenas de megabytes de arquivos dentro dele. A maioria dos navegadores modernos permite que você tenha uma visão geral dos arquivos em cache se você acessar as configurações de privacidade.

O problema do cache é que um navegador não pode decidir fazer isso sozinho. Para aproveitar o cache do navegador no WordPress, você precisará configurar seu site ou servidor para fazer isso. Isso significa que seu site controla quais recursos o navegador armazena em cache e por quanto tempo.

Quais são os benefícios de armazenar ativos estáticos em cache?

O principal benefício do cache do navegador é que ele pode ajudar os visitantes a carregar as páginas mais rapidamente ao retornar ao seu site. Falamos de “recursos estáticos” porque não é possível armazenar em cache todos os elementos de um site.

Recursos dinâmicos são elementos que mudam toda vez que você carrega uma página. Por exemplo, se você fizer login em um aplicativo que mostra um feed de postagem em tempo real, como o Twitter ou o Instagram, esses recursos são dinâmicos.

Como os ativos dinâmicos podem mudar com frequência, armazená-los em cache pode não servir a nenhum propósito. Afinal, da próxima vez que você entrar no Twitter ou no Instagram, verá postagens totalmente novas.

O armazenamento em cache fornece os melhores resultados possíveis quando está limitado a ativos estáticos. Aprender a servir ativos estáticos com uma política de cache eficiente no WordPress pode trazer vários benefícios:

• Reduzindo o uso de largura de banda. Como os ativos em cache são carregados do armazenamento local, há menos transferência de dados entre o servidor e o dispositivo do visitante. Isso ajuda os visitantes com planos de internet limitados a economizar no uso de dados.
• Diminuindo a carga em seu servidor. Quando os navegadores usam ativos em cache, o servidor recebe menos solicitações para esses arquivos. Isso reduz a carga de trabalho do servidor e pode ajudar a evitar sobrecargas do servidor durante períodos de alto tráfego.
• Ativando a navegação off-line parcial. Em alguns casos, o cache de recursos estáticos pode permitir que os visitantes acessem determinadas partes de um site, mesmo quando estiverem offline. Se o navegador já tiver armazenado em cache os arquivos necessários, ele poderá exibir o conteúdo sem precisar de uma conexão ativa com a Internet.

O armazenamento em cache de ativos estáticos permite que você faça melhor uso dos recursos do servidor e melhore a experiência dos visitantes. Tudo isso funciona instruindo seu servidor sobre quais ativos ele deve informar aos navegadores para armazenar em cache.

Como verificar se o cache do navegador está ativado em seu site

A maneira mais fácil de verificar se um site aproveita o cache é usar ferramentas de desenvolvedor de navegador, como as que você encontra no Firefox e no Google Chrome. Essa abordagem exige que você examine algum código, mas não precisa ser um desenvolvedor para entendê-lo.

Para fazer isso no Google Chrome, visite o site que deseja verificar, clique com o botão direito do mouse em qualquer lugar da página e selecione a opção Inspecionar . Isso abrirá a guia de ferramentas do desenvolvedor no navegador, que deve ficar assim:

Clique na guia Rede . Se você vir uma lista vazia, precisará recarregar a página com a guia de ferramentas do desenvolvedor aberta. A guia Rede exibirá todas as solicitações e ativos que o navegador carrega ao acessar a página.

O elemento no qual estamos interessados ​​deve ser o primeiro da lista. No nosso caso, é Jetpack.com e contém os cabeçalhos da página. Selecione esse arquivo e ele abrirá uma nova guia à direita, indo direto para a seção Cabeçalhos .

Alguns cabeçalhos nos dirão se o site usa cache e como ele é implementado. Estes são:

• Cache-Control. Este cabeçalho especifica as diretivas de cache, como max-age (o tempo máximo em que um recurso é considerado novo) ou no-cache (força os caches a enviar a solicitação ao servidor de origem para validação antes de liberar uma cópia em cache).
• Expira. Este cabeçalho fornece uma data e hora de expiração para o recurso. Depois disso, o recurso é considerado obsoleto e o navegador o revalidará.
• ETag. Este cabeçalho é um identificador para uma versão específica de um recurso. Quando o recurso muda, a ETag também muda, permitindo que os navegadores determinem se um recurso armazenado em cache ainda é válido.
• Última modificação. Este cabeçalho indica a última data de modificação do recurso. Os navegadores podem usar essas informações para validar se a versão em cache ainda está atualizada.

Se você encontrar esses cabeçalhos no arquivo, o site usa cache. Lembre-se de que configurações específicas de cache podem variar de site para site. Alguns sites podem dizer aos navegadores para armazenar arquivos estáticos por um dia, enquanto outros dizem para armazenar arquivos por meses ou períodos mais longos.

Como aproveitar o cache do navegador com um plug-in

A maneira mais fácil de aproveitar o cache do navegador em um site WordPress é usando um plug-in. Existem muitos plug-ins de cache que você pode usar. Uma ótima opção é o WP Super Cache.

Depois de instalar e ativar o WP Super Cache em seu site, você pode implementar o cache usando várias abordagens. A maneira mais simples é ir para Configurações → WP Super Cache e selecionar a opção Caching On ao lado de Caching .

As configurações padrão do plug-in permitem o armazenamento em cache para visitantes desconectados e definem um tempo de vida de 30 minutos para os ativos armazenados. Se você quiser alterar essas configurações, precisará ir para a guia Avançado .

Aqui, você pode decidir para quais visitantes ativar o cache, se deseja habilitar o cache dinâmico, se o plug-in deve limpar o cache ao atualizar as páginas e muito mais. O plug-in ajuda você a recomendar as opções mais eficazes.

Se você não tem um domínio firme do armazenamento em cache, convém manter as configurações padrão. Definir configurações de cache sem entender completamente como elas funcionam pode levar a problemas com seu site.

Como aproveitar o cache do navegador sem um plug-in

Se não quiser usar um plug-in, você pode habilitar o cache do navegador em seu site manualmente. Esse processo pode envolver a manipulação de código no servidor ou no nível do site, dependendo do método de implementação escolhido.

1. Adicione os cabeçalhos “Cache-Control” e “Expires” no NGINX

Para adicionar os cabeçalhos “Cache-Control” e “Expires” no NGINX, você precisará modificar o arquivo de configuração do servidor. Esse arquivo geralmente é chamado de nginx.conf e está localizado no diretório principal do nginx .

A maneira mais fácil de se conectar ao servidor do seu site é usar um cliente FTP (File Transfer Protocol). Em seguida, você precisará localizar o arquivo nginx.conf , que deve estar em

/etc/nginx/nginx.conf ou /etc/nginx/sites-available/default .  

Abra o arquivo usando um editor de texto e procure o bloco de código do servidor em nginx.conf . Aqui, vamos adicionar o seguinte novo bloco de código, que especifica quais arquivos o servidor deve informar aos navegadores para armazenar em cache e quanto tempo esse cache deve durar antes de expirar:

 location ~* \.(jpg|jpeg|png|gif)$ {    expires 30d;    add_header Cache-Control "public, no-transform"; }

Esse código inclui os cabeçalhos “Cache-Control” e “Expires”. Você pode modificar o intervalo de tempo de expiração e os tipos de arquivo que os navegadores devem armazenar em cache.

Se você não consegue decidir quais tipos de arquivos armazenar em cache, dê uma olhada no que está na sua pasta de mídia do WordPress. Todos os arquivos estáticos que os visitantes acessam regularmente devem ser armazenados em cache. Quanto ao cabeçalho de expiração, 30 dias geralmente é um bom prazo para a maioria dos sites.

Depois de adicionar o código, salve as alterações no arquivo e saia do editor. Você precisará reiniciar o NGINX para aplicar as alterações.

2. Adicione os cabeçalhos “Cache-Control” e “Expires” no Apache

O uso dos cabeçalhos “Cache-Control” e “Expires” no Apache requer que você habilite seus módulos correspondentes. Você pode ativar esses módulos abrindo o terminal e executando os seguintes comandos:

 sudo a2enmod expires sudo a2enmod headers sudo systemctl restart apache2

O comando final reiniciará o Apache com ambos os módulos ativos. Em seguida, você precisará modificar o arquivo de configuração do Apache, que geralmente é chamado de httpd.conf ou apache2.conf .

Você pode encontrar este arquivo em /etc/httpd/conf/httpd.conf , /etc/apache2/apache2.conf , ou

/etc/apache2/sites-available/000-default.conf , dependendo da configuração do servidor.

Em seguida, procure o bloco <Directory> dentro do arquivo de configuração do Apache e adicione o seguinte código dentro dele:

 <IfModule mod_expires.c>    ExpiresActive On    ExpiresDefault "access plus 1 month"    ExpiresByType image/jpg "access plus 1 month"    ExpiresByType image/jpeg "access plus 1 month"    ExpiresByType image/gif "access plus 1 month"    ExpiresByType image/png "access plus 1 month" </IfModule> <IfModule mod_headers.c>    <FilesMatch "\.(jpg|jpeg|png|gif)$">        Header set Cache-Control "public, no-transform"    </FilesMatch> </IfModule>

A primeira parte desse código controla as configurações de expiração para arquivos em cache. A segunda parte indica quais tipos de arquivo os navegadores devem armazenar em cache. Assim como no NGINX, você pode modificar essas configurações dependendo dos arquivos que deseja que os navegadores armazenem.

Quando terminar, salve as alterações no arquivo de configuração do Apache e feche-o. Você precisará reiniciar o Apache para que as alterações entrem em vigor.

3. Use uma rede de entrega de conteúdo (CDN)

Uma rede de entrega de conteúdo (CDN) é uma rede de servidores que você pode usar para armazenar cópias em cache do seu site em regiões-chave. Os CDNs tendem a ser serviços pagos e ajudam a fornecer cópias em cache do seu site a partir do servidor geograficamente mais próximo do visitante.

Essa abordagem diminui a carga em seus próprios servidores. Além disso, os CDNs tendem a ser otimizados para desempenho de primeira linha e são normalmente distribuídos em todo o mundo, para que possam atender a sites da melhor localização possível para cada visitante.

O Jetpack CDN é uma opção que se integra perfeitamente ao WordPress, é fácil de usar e altamente eficaz.

O melhor de tudo é que é um CDN gratuito que armazena imagens e outros tipos de ativos estáticos do seu site. Depois de instalá-lo e ativá-lo, você pode ativar o CDN acessando Jetpack → Configurações no painel do WordPress.

Em seguida, localize as configurações de desempenho e velocidade e alterne a opção Ativar acelerador de site .

4. Hospede scripts e ativos de terceiros localmente (sempre que possível)

Os scripts de terceiros são elementos como código de sites externos, pixels de rastreamento, fontes e outros recursos que requerem carregamento para funcionar. Quanto mais scripts e recursos você carregar de fontes de terceiros, mais demorado será o processo, o que pode tornar seu site mais lento.

Idealmente, você deve eliminar todos os scripts e recursos de terceiros que não usa. Como alternativa, você pode hospedar código e recursos em seu servidor local para reduzir o tempo de carregamento.

Você pode identificar scripts de terceiros, bem como JavaScript não utilizado, usando o PageSpeed ​​Insights. Essa ferramenta destaca oportunidades para melhorar o desempenho do site, incluindo listas de códigos não utilizados e scripts de terceiros que podem ser removidos de suas páginas.

Você pode excluir com segurança quaisquer scripts de terceiros não utilizados em seu site. Para scripts importantes, você pode querer considerar a opção de hospedá-los localmente.

Etapa final: instale um plug-in gratuito para melhorar o Core Web Vitals

Aprender como aproveitar o cache do navegador no WordPress é uma etapa fundamental para melhorar o desempenho do site. Felizmente, não é a única coisa que você pode fazer para melhorar a experiência do usuário.

O Google mede a qualidade da experiência do usuário de um site com um conjunto de métricas chamado Core Web Vitals. As principais métricas de desempenho incluem:

• Maior pintura de conteúdo (LCP). Essa métrica mede quanto tempo leva para carregar o maior ativo em uma página. Normalmente, é um bom indicador do tempo geral de carregamento de uma página.
• Retardo da primeira entrada (FID). Há um atraso entre carregar uma página e ela se tornar interativa. Você pode pensar que uma página acabou de carregar, mas se ela não permitir que você interaja com elementos como formulários ou links, ela pode ter um FID alto.
• Deslocamento Cumulativo de Layout (CLS) . Enquanto uma página está carregando, seu layout pode mudar, movendo os elementos no navegador. Quanto mais elementos estiverem se movendo, maior será a pontuação do CLS. O ideal é que seja zero.

Existem várias maneiras de melhorar o Core Web Vitals no WordPress. A abordagem mais fácil é usar um plug-in que otimize todas as variáveis ​​por trás dessas métricas.

O Jetpack Boost pode ajudar você a implementar várias estratégias para melhorar o Core Web Vitals. Você pode otimizar a entrega de CSS, adiar o JavaScript não essencial e habilitar o carregamento lento.

Normalmente, você precisaria usar vários plug-ins para implementar essas configurações ou fazê-lo manualmente. Depois de instalar e ativar o Jetpack Boost, você pode simplesmente ativar todas as configurações navegando até Jetpack → Boost e alternando as opções correspondentes.

Perguntas frequentes sobre o cache do navegador WordPress

Embora tenhamos abordado os fundamentos do cache do navegador no WordPress, você ainda pode ter algumas dúvidas sobre o processo. Vejamos alguns dos mais comuns.

O cache do navegador é seguro?

O cache do navegador é muito seguro. A maioria dos sites que você visita provavelmente usa algum tipo de política de cache para melhorar o desempenho dos visitantes. Como visitante, você nem notará, a menos que vá pesquisar os cabeçalhos do site ou precise limpar o cache.

A única maneira pela qual o cache do navegador pode não ser seguro é por meio de uma implementação incorreta. Se não estiver configurado corretamente, os navegadores não conseguirão armazenar ativos da maneira correta ou uma página poderá falhar ao carregar (embora isso seja muito raro).

Cache do navegador x cache do servidor: como eles diferem?

O cache do navegador e do servidor funcionam de maneira muito semelhante. A única diferença é que um método armazena arquivos localmente, enquanto o outro o faz no lado do servidor.

O melhor exemplo de cache de servidor em ação é um CDN. Com CDNs, você pode armazenar cópias em cache do seu site em um servidor de terceiros (ou um cluster deles). Quando os visitantes tentam acessar o site, o CDN intercepta essa conexão e exibe a cópia armazenada do site.

Nesse cenário, os visitantes ainda podem armazenar em cache o conteúdo estático por meio de seus navegadores. A experiência para os usuários finais não deve mudar de forma alguma, exceto que os CDNs geralmente oferecem tempos de carregamento muito melhores do que os servidores tradicionais.

O que mais posso fazer para melhorar o desempenho do meu site?

Há muitas coisas que você pode fazer para melhorar o desempenho do seu site (além de aproveitar o cache do navegador). Algumas outras mudanças que você pode fazer incluem eliminar recursos de bloqueio de renderização, minificar CSS, usar um CDN, fazer menos solicitações HTTP e reduzir o TTFB e os tempos de resposta do servidor.

Quando se trata de desempenho do site, algumas alterações são mais eficazes do que outras. Melhorias nos tempos de carregamento podem ter um impacto significativo na experiência do usuário, o que pode levar a uma taxa de conversão mais alta para o seu negócio.

Comece a servir ativos estáticos em seu site WordPress

Aproveitar o cache do navegador no WordPress é uma das maneiras mais eficazes de melhorar os tempos de carregamento. Uma estratégia eficiente se concentrará em arquivos estáticos e os configurará para recarregar periodicamente. Dessa forma, os visitantes não ficam presos a elementos desatualizados.

A maneira mais fácil de implementar o cache do navegador no WordPress é usando um plugin como o WP Super Cache. Este plug-in permite que você aproveite o cache do navegador usando um conjunto de configurações padrão ou controle cada configuração manualmente. Além disso, é grátis para usar.

Além disso, ao instalar o Jetpack Boost, você pode melhorar ainda mais o desempenho do seu site. Confira o plug-in para saber mais!