Servir Ativos Estáticos com uma Política de Cache Eficiente (3 Métodos)

Publicados: 2022-04-12

Ao servir ativos estáticos com uma política de cache eficiente, o navegador do usuário armazenará esses arquivos localmente e menos tempo será necessário para carregar a página. Normalmente, assim que uma página é carregada, todos os recursos dessa página, como HTML, CSS, JavaScript e imagens, devem ser baixados.

O cache do navegador permite que o navegador recupere ativos estáticos como CSS, JavaScript e imagens de seu cache local. Como resultado, as páginas são carregadas mais rapidamente. O conteúdo em cache significa que as visitas subsequentes a uma página serão mais rápidas do que a primeira visita de um usuário, mas não na primeira visita.

Índice

O que é cachê?

Um cache é uma camada de armazenamento de dados de alta velocidade na computação que salva uma parte dos dados que geralmente é temporária por natureza, para que as solicitações subsequentes desses dados possam ser atendidas mais rapidamente do que acessar o local de armazenamento primário dos dados. O armazenamento em cache permite que você reutilize rapidamente dados que foram recuperados ou computados anteriormente.

Como o cache realmente funciona?

Os dados em um cache geralmente são mantidos em hardware de acesso rápido como RAM (memória de acesso aleatório), mas também pode ser utilizado em conjunto com um componente de software. O objetivo básico de um cache é acelerar a recuperação de dados, eliminando a necessidade de entrar em contato com a camada de armazenamento mais lenta por trás dele.

Ao contrário dos bancos de dados, que armazenam dados inteiros e duradouros, um cache geralmente armazena uma parte dos dados de forma transitória.

Vantagens do cache

Vamos passar por algumas vantagens do cache.

Melhore o desempenho do seu aplicativo

Ler dados de um cache na memória é incrivelmente rápido porque a memória é muito mais rápida que o disco (magnético ou SSD) (sub-milissegundos). Esse acesso a dados substancialmente mais rápido melhora o desempenho geral do aplicativo.

A carga de back-end deve ser reduzida

Ao deslocar uma parte da carga de leitura do banco de dados de back-end para a camada de memória, o armazenamento em cache reduz o estresse em seu banco de dados, evitando que ele sofra um desempenho fraco sob carga pesada ou até mesmo quebre sob picos.

Pontos de acesso no banco de dados devem ser eliminados

Muitos aplicativos tendem a recuperar um subconjunto de dados com mais frequência do que o restante. Como resultado, podem ocorrer pontos de acesso no banco de dados e você pode precisar provisionar em excesso seus recursos com base nos requisitos de taxa de transferência para os dados usados ​​com mais frequência. Para dados acessados ​​com frequência, um cache na memória reduz os requisitos de superprovisionamento e oferece desempenho rápido e previsível.

Reduza o custo do seu banco de dados

As operações de entrada/saída por segundo (IOPS) podem ser executadas por uma única instância de cache, permitindo substituir várias instâncias de banco de dados e reduzir significativamente os custos. Isso é crucial se o banco de dados primário cobrar pela quantidade de dados. Pode haver uma grande diferença de preço sob certas condições.

Desempenho que pode ser previsto

Lidar com picos na utilização de aplicativos é um problema predominante em sistemas modernos. O aumento da carga do banco de dados causa tempos de recuperação de dados mais longos, tornando o desempenho geral do aplicativo imprevisível. Esse problema pode ser resolvido usando um cache na memória de alto rendimento.

Aumentar o número de pessoas que lêem (IOPS)

Os sistemas in-memory têm taxas de solicitação (IOPS) substancialmente mais altas do que um banco de dados baseado em disco comparável, além de terem latência reduzida. Quando utilizado como um cache lateral distribuído, uma única instância pode atender a centenas ou mesmo milhares de solicitações por segundo.

O que é cache de ativos?

O cache é uma noção direta. Quando um navegador baixa um ativo, ele usa a política do servidor para determinar se deve ou não baixá-lo novamente em visitas subsequentes. Se o servidor não fornecer uma política, o navegador será padronizado, o que geralmente significa armazenar em cache os arquivos dessa sessão.

O que é cache de ativos estáticos?

especifique por quanto tempo o navegador deve reter ou armazenar em cache temporariamente o recurso. Quaisquer solicitações subsequentes para esse recurso são atendidas a partir da cópia local do navegador e não da rede.

Sempre que um visitante do seu site busca uma nova versão de algo que ainda não está armazenado em cache no navegador ou servidor, você está usando uma política de cache ineficiente. Quando, na verdade, você pode estar servindo a eles conteúdo salvo em cache e pronto para uso.

Leia também: Como corrigir links permanentes quebrados no WordPress

O que é uma política de cache eficiente?

Se seus arquivos estáticos não forem alterados (ou você tiver um mecanismo de bloqueio de cache aceitável), sugerimos definir sua política de cache para 6 meses ou 1 ano.

Elementos como arquivos CSS/JS globais, logotipos, gráficos e assim por diante raramente mudam em sites finalizados, então 6 meses ou um ano é uma expiração de cache justa para se trabalhar.

Obviamente, se você alterar com frequência os arquivos estáticos acima, poderá escolher um tempo de expiração de cache mais curto, desde que seja superior a 3 meses.

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

Existem várias maneiras de servir arquivos estáticos usando uma política de cache eficiente, discutiremos 3 métodos

  1. Usando o arquivo .htaccess se você estiver usando o LiteSpeed ​​Enterprise ou Apache
  2. Usando o cache LiteSpeed
  3. Usando o plugin W3 Total Cache

Servir Ativos Estáticos usando o arquivo .htaccess no Apache e LiteSpeed ​​Enterprise

Nota: Se você estiver usando OpenLiteSpeed ​​ou NGINX, este método não funcionará.

Faça login no seu painel do WordPress

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

Procure por "Gerenciador de arquivos". Instale e ative o plug-in

Clique em "Gerenciador de Arquivos" no menu do lado esquerdo

Na pasta public_html, clique com o botão direito em .htaccess e clique em renomear

Altere o nome do arquivo (.htaccess-error)

Clique no ícone "novo arquivo" na parte superior

Nomeie o arquivo ".htacess"

Cole o código a seguir e salve e feche

 <IfModule mod_expires.c> ExpiresActive On # CSS, JavaScript ExpiresByType text/css "access plus 1 year" ExpiresByType text/javascript "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" # Fonts ExpiresByType font/ttf "access plus 1 year" ExpiresByType font/otf "access plus 1 year" ExpiresByType font/woff "access plus 1 year" ExpiresByType font/woff2 "access plus 1 year" ExpiresByType application/font-woff "access plus 1 year" # Images ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/webp "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" ExpiresByType image/x-icon "access plus 1 year" # Video ExpiresByType video/webm "access plus 1 year" ExpiresByType video/mp4 "access plus 1 year" ExpiresByType video/mpeg "access plus 1 year" # Others ExpiresByType application/pdf "access plus 1 year" ExpiresByType image/vnd.microsoft.icon "access plus 1 year" </IfModule>

Servir Ativos Estáticos usando o LiteSpeed ​​Cache

Você precisa instalar e ativar o plugin LiteSpeed ​​Cache, uma vez instalado, siga o guia abaixo:

  • Vá para o seu painel do WordPress
Sirva ativos estáticos com uma política de cache eficiente
  • Clique em LiteSpeed ​​Cache -> Cache no menu do lado esquerdo
  • Clique na guia "Navegador" na parte superior
  • Ative a alternância "Cache do navegador"
  • Clique em "Salvar alterações"

Servir Ativos Estáticos usando o W3 Total Cache

Instale e ative o plugin W3 Total Cache primeiro e depois siga o guia abaixo.

  • Vá para o seu painel do WordPress
  • Clique em Desempenho -> Cache do navegador no menu do lado esquerdo
  • Role para baixo até "Mídia e outros arquivos". Altere o "Expires Header Lifetime" para pelo menos 15552000s (180 dias).
  • Clique em "Salvar todas as configurações"

Conclusão

Quando você fornece ativos estáticos com uma estratégia de cache eficiente, o navegador do usuário salvará esses arquivos localmente, reduzindo o tempo de carregamento da página. Todos os recursos de uma página, como HTML, CSS, JavaScript e imagens, devem ser baixados assim que carregados.