Como servir ativos estáticos com uma política de cache eficiente

Sites como GTMetrix e Google PageSpeed ​​Insights fornecem sugestões sobre como melhorar o desempenho do seu site. Se você está lendo isso, pelo menos está ciente de que todo site tem oportunidades de melhorar o desempenho, seja por meio de otimizações manuais ou do uso de plugins como o 10Web Booster.

Em ambas as ferramentas, você pode ver uma sugestão paraservir ativos estáticos com uma política de cache eficiente .Essa sugestão é armazenar os arquivos localmente para que as visitas repetidas ao site sejam mais rápidas. As etapas para melhorar essa recomendação não melhoram a visita inicial ao site (existem outras melhorias para isso). Ainda assim, todas as visitas subseqüentes se beneficiarão ao aproveitar o cache do navegador.

Deve-se notar que a sugestão de servir ativos estáticos com uma política de cache eficiente também foi referida como alavancar o cache do navegador ou o cache do navegador no WordPress.

Este artigo explica como servir ativos estáticos com uma política de cache eficiente e como uma política de cache eficiente pode melhorar o desempenho do seu site.

Ao usar o GTMetrix, a sugestão será semelhante ao exemplo abaixo na página de resultados. Ele destacará as possíveis economias com a implementação do cache do navegador.

No Google PageSpeed ​​Insights, a sugestão parece semelhante e fornece informações semelhantes.

As sugestões são semelhantes porque GTMetrix e PageSpeed ​​Insights usam a ferramenta Lighthouse para sua estrutura de análise de página da web. O Lighthouse é uma ferramenta de código aberto destinada a melhorar o desempenho do site e pode ser executada em vários formatos diferentes.

Vamos reservar um momento para uma rápida atualização para nos lembrarmos de como o desempenho de um site é medido por uma coleção de métricas, sendo a mais importante delas o Core Web Vitals.

Aqui está um resumo:

• Largest Contentful Paint ( LCP ) – A medida de quanto tempo leva para o maior objeto carregar na janela de visualização da página.
• First Input Delay ( FID ) – Mede a capacidade de resposta do site. Ele mede o tempo entre o usuário clicar ou interagir com o site e o site responder.
• Deslocamento cumulativo de layout ( CLS ) – mede o quanto o layout de uma página muda inesperadamente.

Uma maneira de impactar positivamente o LCP e o FID é servir ativos estáticos com uma política de cache eficiente, o que significa informar ao navegador que ele pode armazenar localmente um recurso por um determinado período de tempo.

Uma política de cache eficiente significará tempos de carregamento mais rápidos porque não importa quão rápida seja a velocidade da sua internet, o carregamento de um cache local será mais rápido e economizará tempo.

Existem alguns componentes, então vamos discuti-los com mais detalhes.

Como servir ativos estáticos com uma política de cache eficiente

Para entender como atender ativos estáticos com uma política de cache eficiente, primeiro precisamos entender os diferentes aspectos, como ativos estáticos, armazenamento em cache e uma política de armazenamento em cache. Vamos dividi-los aqui.

O que são ativos estáticos?

Ativos estáticos são arquivos. Quando nos referimos a recursos estáticos neste artigo, nos referimos a arquivos individuais que não devem ser alterados em breve ou com frequência.

Arquivos como imagens, javascript, arquivos CSS e fontes são arquivos que podem ser considerados recursos estáticos. Em relação ao WordPress, esses arquivos CSS, javascript e imagem e fonte geralmente fazem parte de um tema, um plug-in ou conteúdo do usuário.

Arquivos e páginas gerados dinamicamente não são considerados ativos estáticos. Um exemplo disso dentro do WordPress seriam as páginas estáticas geradas por plugins de cache. Isso é elaborado na próxima seção.

O que é cache?

O armazenamento em cache é o processo de armazenar respostas em um cache para que, na próxima vez que a mesma pergunta for feita, a resposta possa ser retornada mais rapidamente.

Artigos relacionados

Como limpar o cache do WordPress com segurança e eficiência?

Encontre o melhor plug-in de cache do WordPress com nossas 5 principais escolhas

Se você já trabalhou com plug-ins de cache do WordPress antes, pode estar familiarizado com o cache de página inteira. O cache de página é diferente do cache de ativos estáticos.

Cache de página x cache de ativos estáticos

Este artigo analisa especificamente o cache de ativos (arquivos) estáticos. Isso não deve ser confundido com cache de página inteira, que armazena páginas geradas para uso posterior.

Tanto o cache de página quanto o cache de arquivo ajudam a melhorar o desempenho de um site. Ao discutir o cache de ativos estáticos, nos referimos a ativos específicos, como javascript, CSS e arquivos de imagem.

O cache de página armazena os resultados de uma página gerada dinamicamente pelo WordPress e reserva essa versão por um período de tempo específico. Os caches de página geralmente são armazenados em um servidor ou rede de borda, como um CDN, e os ativos estáticos são armazenados localmente na máquina do usuário.

O armazenamento em cache sobre como servimos ativos estáticos com uma política de cache eficiente significa dizer ao navegador por quanto tempo ele pode armazenar um recurso localmente no navegador antes de ter que baixá-lo novamente.

O que torna um ativo estático armazenável em cache?

De acordo com o GTMetrix, um ativo pode ser armazenado em cache se atender aos seguintes requisitos:

• É uma fonte, CSS, javascript ou arquivo de mídia.
• Ele retorna um código de status HTTP 200, 203 ou 206
• Não possui uma política explícita de não cache

O que é uma política de cache?

Vimos o que é um ativo estático, bem como o que significa armazenar em cache um ativo.

Os termos atualização e obsoletos podem ser usados ​​aqui para descrever o status de um arquivo em cache. Se um arquivo puder ser retirado do cache, ele pode ser chamado de novo . Quando expirar, será chamado de obsoleto .

Uma política responderá a perguntas como por quanto tempo um arquivo é considerado novo e como verificar se um arquivo é novo. A política afirma que precisamos verificar com o servidor somente após um período de tempo específico ou nos avisar para verificar com o servidor a cada solicitação, mas apenas baixar novamente o arquivo se ele tiver sido alterado.

Mais alguns termos que serão bons de entender antes de prosseguirmos.

Como o UX e o SEO são afetados por uma política de cache?

A experiência do usuário (UX) e a otimização do mecanismo de pesquisa (SEO) estão intimamente ligadas. De acordo com o Google, estudos mostram que os usuários se preocupam com a capacidade de resposta do site, então o Google classifica as páginas com mais capacidade de resposta.

Se os recursos estáticos forem armazenados em cache de forma eficaz, a página será renderizada mais rapidamente devido à redução do tempo necessário para carregar esses recursos. A redução no tempo leva a melhorias nos principais sinais vitais da web, como LCP e FID e, em última análise, a uma classificação mais alta do mecanismo de pesquisa.

Você pode ler mais sobre como os principais sinais vitais da web afetam a classificação da página aqui.

Como corrigir ativos estáticos de exibição com um problema de política de cache eficiente

Corrigir manualmente

Servir ativos estáticos com uma política de cache eficiente não é uma configuração específica do WordPress, você pode defini-la manualmente modificando o arquivo de configuração de seus servidores da Web ou usar um plug-in como a hospedagem 10Web Booster para garantir que seu site seja configurado com configurações de cache otimizadas.

Esta seção cobrirá a edição dos arquivos de configuração de um servidor da web diretamente para habilitar o controle de cache e cabeçalhos HTTP expirados em seus servidores para que, quando ele servir ativos estáticos, aplique cabeçalhos HTTP na resposta.

Quando um recurso é solicitado, o servidor web responde com o recurso e algumas informações extras nos chamados cabeçalhos HTTP. Pense nos cabeçalhos HTTP como metadados sobre a conexão. No caso de cache, os cabeçalhos HTTPCache-ControleExpirescontrolam como armazenamos um ativo em cache.

O cabeçalho cache-control contém instruções sobre se e/ou como armazenar em cache o recurso estático. Existem muitas diretivas para controle de cache, então vamos entender algumas das mais populares.

Aqui estão alguns exemplos de como um cabeçalho de controle de cache pode parecer.

Exemplo: armazenar em cache um ativo por sete dias
Cache-Control: max-age=604800

Exemplo: pode ser armazenado em um cache compartilhado por até sete dias
Cache-Control: public, max-age=604800

Exemplo: Pode ser armazenado, mas deve ser revalidado a cada requisição
Cache-Control: no-cache

Exemplo: não pode ser armazenado em cache
Cache-Control: no-store

O cabeçalho de controle de cache é mais recente e tem mais opções, mas no caso de o controle de cache não ser suportado, o cabeçalho HTTP expires realiza a mesma tarefa de cabeçalho e instrui por quanto tempo um ativo é válido antes de precisar de revalidação. (Observe que a diretiva max-age no cabeçalho Cache-Control tem precedência sobre Expires)
Expires: Wed Feb 13 21:01:38 CST 2023

Modificando uma configuração de servidor diretamente

Primeiro, vamos olhar para o “jeito difícil” para entendermos o que acontece quando usamos outras ferramentas e serviços que facilitam para nós.

Apache

No servidor Apache HTTP, o fragmento a seguir pode ser adicionado a uma definição de site ou a um arquivo .htaccess.

Explicando este snippet, ele diz que qualquer recurso cuja extensão corresponda a .ico ou .pdf etc. terá o cabeçalho Cache-Control definido para o recurso.

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=3600, public"
</filesMatch>

Com o Apache, muitos provedores de hospedagem oferecem a opção de adicionar diretivas a um arquivo .htaccess. Observe que, embora essa seja uma maneira fácil de adicionar à configuração do servidor, o uso de arquivos .htaccess é conhecido por causar impactos negativos no desempenho no nível do servidor.

NginxGenericName

No Nginx, esse trecho pode ser adicionado a um bloco de servidor.

Explicando esse snippet, ele diz que qualquer recurso em que a extensão corresponda a .ico ou .pdf, etc., terá os cabeçalhos expires e cache-control definidos.

location ~* \.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$ {
    expires 1h;
    add_header Cache-Control "public, no-transform";
}

Para Apache e Nginx, mostramos como modificar/adicionar cabeçalhos. Estamos mostrando os cabeçalhos específicos que usamos para cache, mas o método pode ser usado para qualquer outra forma de cache.

Consertar com um Plugin do WordPress

Se o que foi dito acima parece muito, é porque é. Modificar as configurações do servidor e manter-se atualizado sobre as alterações manuais é demorado e sujeito a erros.

O plano gratuito do 10Web Booster pode configurar o Apache para adicionar cabeçalhos para ativos estáticos e também adiciona cabeçalhos para páginas da web em cache. Se você ainda não estiver usando a hospedagem 10Web e seu host usar o Apache, esta é uma ótima maneira de começar a implementar uma política de cache eficiente.

Se precisar de mais opções ou mais controle sobre os cabeçalhos HTTP, você pode usar o 10Web Booster Pro. O 10Web Booster Pro utiliza seu Cloudflare. Quando você usa o Cloudflare, ele adiciona os cabeçalhos de controle de cache aos seus ativos estáticos e páginas em cache. Isso ignora qualquer configuração ou restrição do servidor porque seus visitantes recebem os arquivos diretamente da Cloudflare.

O que torna o plug-in 10Web Booster a melhor escolha aqui é que ele faz tudo isso automaticamente. Você não precisa gerenciar nenhuma configuração de servidor ou arquivos .htaccess.

Como alternativa, se você usar o 10Web Hosting, ele implementa o cache automaticamente e você não precisa se preocupar em adicionar cabeçalhos para ativos estáticos.

Ainda não consegue corrigir o problema? Tente Estas Duas Dicas

Se você implementou as etapas acima e ainda está vendo que os ativos estáticos de serviço com uma política de cache eficiente ainda estão aparecendo em seus relatórios, aqui estão mais algumas coisas que você pode tentar.

Verificando se os arquivos estão armazenados em cache

Se o GTMetrix e o PageSpeed ​​ainda estiverem informando que você deveria estar veiculando recursos estáticos com uma política de cache, verifique se sua implementação realmente fez as alterações esperadas.

Na maioria dos navegadores, existe uma maneira fácil de verificar se os arquivos vêm de um cache ou não.

No Chrome, em visualização e desenvolvedor, selecione Ferramentas do desenvolvedor:

Na guia Rede, você poderá identificar os arquivos provenientes de (cache de disco) ou (cache de memória). A diferença entre disco e cache de memória é que a memória desaparece quando o navegador é fechado e o disco persiste quando o navegador é fechado.

Aumente o tempo de cache

De acordo com as estatísticas do Lighthouse, uma política de cache eficiente é aquela que possui uma alta proporção de acertos e erros de cache, o que significa que a maioria dos ativos estáticos tem uma idade máxima ou um conjunto de expirações. Para sites que estão em produção ou não mudam com frequência, recomenda-se uma idade máxima de três meses a até um ano.

Eles recomendam iniciar uma política de cerca de três meses (cerca de 7890000 segundos), se você já configurou isso, pode valer a pena aumentar a idade máxima para um ano ou mais se o seu site estiver no ar.

Conclusão

Ser capaz de servir ativos estáticos com uma política de cache eficiente traz melhorias de velocidade para o desempenho do seu site.

Este artigo abordou o que são ativos estáticos, o que são cabeçalhos HTTP e como habilitar e verificar se os cabeçalhos de cache estão no lugar.

Analisamos os detalhes de habilitar manualmente os cabeçalhos modificando as configurações do servidor e como podemos facilitar o uso de um plug-in do WordPress como o 10Web Booster e aproveitar a integração do 10Web com o Cloudflare para ter acesso para definir os cabeçalhos HTTP de controle de cache.

10Web Booster é muito mais do que apenas um plug-in de cache. Você pode ler mais sobre os vários recursos de cache e otimização de velocidade neste artigo do 10Web Booster .

Perguntas frequentes