31/08/22

Cache: como usá-lo para deixar seu site mais rápido

Cache, otimização e velocidade são palavras comumente vistas quando falamos de sites, sobretudo aqueles que precisam escalar para ter melhor resultado em indexação.

Como um dos principais fatores para a indexação, vamos falar um pouco mais sobre o cache, um ótimo recurso que nos auxilia em muito na otimização dos sites.

Afinal de contas, quanto mais rápido o site, melhor a experiência do cliente e, consequentemente, melhores suas relações com os motores de busca.

Para entender melhor como o cache funciona, para que serve e como configurá-lo, acompanhe o post até o fim, seu site agradecerá muito!

Sumário:

  1. Para que serve o cache?
  2. O que é?
  3. Estático vs Dinâmico
  4. Quais os tipos?
  5. Como utilizar?
  6. Conclusão

Para que serve o cache do site?

Como dissemos em alguns outros artigos, a velocidade do site, atualmente, é um dos principais fatores que influenciam na experiência dos visitantes.

Não apenas isso, mas sendo também uma métrica fundamental para o ranqueamento do site por parte dos motores de busca.

Na prática, isso significa que sites mais rápidos tendem a ter vantagem na indexação, fazendo com que sites mais rápidos tomem a dianteira e sejam mostrados mais facilmente nas buscas.

Graças ao cache, é possível obter resultados incríveis, podendo reduzir drasticamente o tempo de carregamento de diferentes tipos de site.

Para entender um pouco mais sobre a lógica de funcionamento, continue conosco.

O que é cache?

Reprodução: Banco de imagem

Em termos mais práticos, é seguro dizer que o cache é como uma cópia estática do conteúdo do seu site.

Sua principal função consiste em armazenar previamente uma cópia estática de todo o conteúdo, o que permite um carregamento mais rápido. Esse carregamento mais rápido acontece porque ele carregará a cópia da página, e não o conteúdo original.

Com isso, seu site não só poupará o tempo de carregamento do visitante, como economizará bastante poder de processamento, pois a maioria das requisições já estará pronta e carregada.

Como benefício extra por poupar os recursos do servidor, isso possibilita lidar com um volume maior de informações, fazendo com que o hardware do seu site “renda” mais.

Desse modo, você terá como resultado um site mais rápido, mais leve, com um uso menor de recursos da sua hospedagem e, de quebra, poderá receber um volume maior de acessos.

O cache é uma ferramenta que pode ser implementada de diferentes formas, em diferentes frentes, com meio diferentes, mas sempre com a mesma finalidade de tornar o site mais ágil.

Imagine que é praticamente como se seu site já estivesse pré-carregado, reduzindo todo o processo de carregamento, agindo da seguinte forma:

O visitante acessa o site, que segue essa sequência: SERVIDOR > SITE > VISITANTE

Enquanto um site sem cache faria a seguinte ordem: SERVIDOR > ARQUIVOS DO SITE > PROCESSAMENTO DO SITE > VISITANTE

Como pôde ver, é possível cortar uma parte do processo que resulta em um acesso muito mais rápido.

Qual a diferença entre Cache Estático e Dinâmico

Antes de aplicarmos os ajustes ao site, é necessário entender a diferença entre os tipos de recursos, são eles os estáticos e os dinâmicos.

Requisições estáticas são imutáveis, pelo menos a longo prazo, e podem ter algumas nuances. Por exemplo: sua logo é uma só, e não muda com frequência.

Requisições dinâmicas, por outro lado, variam com periodicidade, mesmo que não seja tão rápido. Por exemplo, o valor de um produto em uma loja virtual, ou ainda uma seção com últimas ofertas.

É importante entender essas diferenças para saber que isso pode impactar o seu site de formas diferentes quando o cache estiver configurado, visto que se for configurado de maneira que não se encaixe bem ao seu caso, o resultado pode não ser o esperado.

Pense que você tem uma loja e fez um cache com TTL (tempo de vida) de 1 mês. Agora, imagine que você atualizou os valores de diversos produtos e criou uma nova seção de itens em destaque, ou em promoção.

Se o seu cache não for renovado após isso (seja manual ou automaticamente, de acordo com sua configuração), você pode perder muitas vendas em potencial, por não ter a configuração correta.

Ao passo que se seu site não sofre atualizações regularmente, como um site institucional, não há grande necessidade de definir um TTL curto, já que não haverá novidades com frequência.

Tipos de cache

armazenamento em cache
Reprodução: Banco de imagem

Cache de Servidor

Essa é a forma mais comum de cache. Armazenado no servidor, ele é gerado pelo próprio site e independe do usuário administrador do site.

Dentro do cache de servidor, é possível notar dois tipos diferentes: os que são gerados nativamente pelo servidor e aqueles oriundos de configuração externa no site.

Para os gerados pelo servidor, o processo é automático, na maioria dos casos. Tudo é gerado pelo próprio sistema e independe do usuário.

Já no caso daqueles configurados no site, na maioria das vezes, são feitos a partir de plugins, quando o site usa uma plataforma. Esses plugins podem ou não interagir com o cache nativo do servidor, como é o caso do LiteSpeed Cache.

Na Kangaroo, usamos o LiteSpeed Web Server, que conta com o LS Cache. Ele faz o sistema de ponta a ponta, permitindo que você configure o plugin do LiteSpeed dentro do seu site, pré-configurado no PHP e no banco de dados.

O que é o litespeed

Desse modo, o cache do site interage diretamente com o sistema de cache do servidor, tornando o processo mais preciso, ágil e confiável.

Cache de Navegador

A grande utilidade do cache no navegador do visitante é ajudar a economizar ainda mais recursos no seu site em comparação ao que faria o cache comum.

Com ele, é possível armazenar desde imagens e scripts, até páginas inteiras, o que deixa a conexão do usuário ainda mais rápida e evita o processamento de recursos estáticos por parte do seu servidor.

O cache de navegador pode ser configurado de formas distintas, seja a partir de configuração no site, ou de parâmetros definidos no servidor.

Quando configurado no servidor, são inseridas diretivas de configuração no arquivo .htaccess. que orientam por quanto tempo o navegador vai armazenar cada tipo de informação.

Já nas configurações via plugin, você fará esse mesmo processo descrito acima, mas utilizando uma interface gráfica.

Independentemente do meio utilizado para fazer a configuração, toda a configuração de diretiva sempre poderá ser encontrada dentro do seu arquivo .htaccess, visto que é um padrão.

Desse modo, assim que o visitante abrir o site pela primeira vez, o cache armazenará automaticamente boa parte das requisições estáticas, para agilizar futuros acessos desse usuário.

Cache de CDN

A versão de CDN faz um sistema comum, mas que armazena o conteúdo no próprio servidor da CDN. É uma boa alternativa, caso o seu site ou o provedor não tenha uma forma nativa ou fácil de configurar o sistema de cache.

Normalmente, ela vai utilizar cabeçalhos (temos um artigo explicando melhor sobre o assunto), para dizer ao navegador do usuário de que forma armazenar as informações.

Nesses casos, há uma interação diferente em relação ao processamento das requisições no site. Isso acontece porque são os servidores da CDN que processam toda a informação, sendo uma alternativa para poupar recursos no seu servidor.

Contudo, por questões de compatibilidade, é mais prudente não associar esse método caso o seu site utilize alguma forma nativa ou outra configuração de cache.

Um dos CDNs mais comuns para esse fim é o CloudFlare, que oferece um plano gratuito que conta com cache, otimização do site, firewall (WAF), proxy, dentre outros.

Cache de objetos

Esse é um tipo muito especial, e não muito comum, dado o fato de sua aplicabilidade ser mais difícil, pois depende de recursos mais específicos dentro do servidor.

Assim como os outros tipos mais comuns, o cache de objetos é responsável por armazenar previamente informações do seu site.

Contudo, nesse caso, ele armazena consultas ao banco de dados, permitindo que as informações podem ser acessadas sem que o site precise processar de novo tudo o que o banco já encontrou.

Se você pretende utilizar o cache de objetos para um site WordPress, fica aqui nossa recomendação ao Redis, também disponível em nossos servidores.

Aplicando cache no site

Sabendo como ele funciona, suas variações e aplicações, você deve estar ansioso para começar otimizar seu site com esse recurso.

Pensando nisso, temos preparadas diversas dicas de como configurar e ajustar os parâmetros do cache para seu site.

Sites sem plataforma

Se seu site é em HTML, PHP, ou outro que não utilize um sistema que possibilite integração com cache, é possível editar o seu arquivo .htaccess inserindo as diretivas abaixo, para que seja possível armazenar o conteúdo em cache:

<IfModule mod_expires.c>

ExpiresActive On

# Imagens

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”

# Vídeo

ExpiresByType video/webm “access plus 1 year”

ExpiresByType video/mp4 “access plus 1 year”

ExpiresByType video/mpeg “access plus 1 year”

# Fontes

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”

# CSS, JavaScript

ExpiresByType text/css “access plus 1 year”

ExpiresByType text/javascript “access plus 1 year”

ExpiresByType application/javascript “access plus 1 year”

# Outros

ExpiresByType application/pdf “access plus 1 year”

ExpiresByType image/vnd.microsoft.icon “access plus 1 year”

</IfModule>

LiteSpeed Cache

Plugin LiteSpeed Cache

Sendo nossa principal recomendação para a otimização de sites WordPress, o LiteSpeed é um plugin super completo, com cache de objetos, lazy load, minificação de arquivos, pré-carregamento e diversos outros.

Além de sua vasta gama de recursos integrados, seu maior trunfo é seu preço: ZERO. Exatamente, um dos mais completos aliados para a otimização do seu site é totalmente gratuito, tornando-o ainda mais atrativo.

Para conferir na íntegra como configurar os principais recursos do plugin, clique aqui para conferir nosso artigo especial.

WP Rocket

Plugin WP Rocket para cache WordPress

O queridinho das massas, WP Rocket, é uma ótima opção para deixar seu site mais rápido, contando com formas de minificação, pré-carregamento, lazy load e outros mais recursos.

Sua desvantagem é ser um plugin caro e, por seu valor estar em dólar, traz um custo muito maior para os usuários brasileiros. Porém, aqui na Kangaroo oferecemos gratuitamente a ativação do WP Rocket.

Para solicitar, basta ter um plano de hospedagem ou revenda ativo, e solicitar a ativação via ticket. O plugin é totalmente original, e sua licença é atrelada junto ao nosso cadastro direto com o desenvolvedor.

Para conferir dicas de como configurar o WP Rocket, clique aqui para ir direto ao nosso post.

Conclusão

Agora, você já é mais que entendido quando o assunto é cache, sabendo todo o necessário para começar a botar a mão na massa para ajustar seu site.

Mesmo que visto com certo preconceito por muitos usuários, e o maior vilão dos designers de sites em processo de desenvolvimento, ele é essencial para o funcionamento do site.

Ele não só te ajuda fornecendo um resultado mais rápido no carregamento, quanto te ajuda a economizar com processamento de hardware.

É válido dizer que, em caso de conteúdos muito dinâmicos, essa pode não ser a melhor alternativa para você, mesmo que seja útil para armazenar o conteúdo que for estático.

Então, é hora e começar a otimizar o seu site! E lembre-se que estaremos sempre à disposição para te ajudar em caso de dúvidas. Até a próxima o/

Chat
24/7 11 95052-7555 0800 481 7000 chat
cookie