Como cache um site para desempenho de pico: um guia para iniciantes para cache na web

Aprender a cache um site é essencial. O cache é importante no desempenho do site, experiência do usuário e SEO. Existem várias maneiras de implementá -lo, e você aprenderá tudo sobre este post.

Abaixo, discutimos o que é o cache, como funciona, seus benefícios e os diferentes tipos que existem. Depois disso, mostramos a você três métodos diferentes que você pode usar para permitir o cache do seu site e um estudo de caso para apontar seu impacto no desempenho. Por fim, abordaremos rapidamente como e por que limpar um cache do site.

O que é armazenamento em cache?

No nível mais básico, o cache significa armazenar cópias de arquivos em um cache - um local de armazenamento temporário - para disponibilizá -los para acesso rápido. É um método usado em muitas áreas de software e tecnologia, incluindo navegadores, programas e sistemas operacionais.

Como os sites consistem em diferentes tipos de arquivos, eles também são perfeitamente adequados para armazenamento em cache. Você pode armazenar arquivos HTML, CSS, JavaScript e imagem do seu site para permitir que os navegadores os acessam mais rapidamente e mostre seu site mais rápido.

Alguns tipos de conteúdo são mais adequados para armazenamento em cache do que outros. Por exemplo, conteúdo estático, que significa elementos do site que não mudam com frequência, são perfeitos para isso. O logotipo do seu site é um bom exemplo, porque é improvável que o troce com frequência.

Por outro lado, o conteúdo que muda com frequência é uma história diferente. Embora você também possa cache, você deve implementar regras para garantir que os visitantes não vejam uma versão desatualizada. Mais sobre isso em breve.

Os benefícios do cache para sites

O principal motivo para armazenar em cache um site é melhorar o desempenho. Se um navegador puder usar mais rapidamente os arquivos necessários para exibir um site, os visitantes veem o site mais rápido.

Isso leva a uma melhor experiência do usuário, o que torna os visitantes mais propensos a permanecer no seu site por mais tempo, tomar ações desejadas como comprar um produto ou retornar mais tarde. Todas as boas notícias para sua taxa de conversão e resultados.

A velocidade do site também é algo com o qual os mecanismos de pesquisa se preocupam. O Google o usa como um fator de classificação há mais de uma década. Além disso, suas métricas principais da Web Vitals medem especificamente a rapidez com que uma página aparece para os usuários e a rapidez com que ela responde à entrada do usuário.

Além disso, o cache retira o estresse do seu servidor. Ele reduz o número de arquivos que repetem visitantes devem fazer o download do seu site e quantas solicitações com as quais o servidor deve lidar ao mesmo tempo. Além disso, o cache permite que você terceirize parte do trabalho para servidores externos.

Isso é especialmente importante quando seu site se torna mais popular. O cache ajuda a impedir que seu servidor fique sobrecarregado. Além disso, economiza largura de banda e custa se você estiver em um plano de hospedagem limitado.

Quais são os tipos de cache?

É possível armazenar em cache um site em diferentes níveis do processo de carregamento. Existem dois tipos principais: servidor e cache do lado do cliente.

O cache do lado do cliente está relacionado a qualquer coisa que aconteça no computador ou no navegador (ou seja, o "cliente") de seus visitantes. O cache do servidor, por outro lado, ocorre na máquina que contém arquivos do seu site.

Cache de navegador/cliente

Quando os navegadores exibem um site, eles precisam baixar muitos dados. Para reduzir o tempo de carregamento de uma visita repetida, eles armazenam muito conteúdo no disco rígido do visitante, onde é mais rápido acessar.

Um exemplo disso é o cache de DNS. Isso significa salvar localmente o endereço IP associado a um site para que o navegador não precise procurar na próxima vez que você desejar acessar o site.

Além disso, os navegadores sempre verificam seu cache primeiro para ver se algum ativo necessário - como imagens e outros arquivos - já está lá. Dessa forma, eles não precisam entrar em contato tanto com o servidor.

Cache do servidor

Existem diferentes formas de cache do servidor. Eles diferem principalmente no tipo e quantidade de dados salvos no servidor:

• Cache de páginas: isso significa salvar uma versão HTML já compilada de uma página, para que não precise ser criada do zero para todos os visitantes.

• Cache de objetos: aqui, o servidor salva solicitações de banco de dados de reutilização, como pesquisas de produtos em uma loja on -line.

• Cache de fragmentos: descreve o armazenamento de elementos específicos do site, geralmente recursos estáticos, como imagens.

• Cache de cdn: nesse caso, cópias dos dados do seu site estão em servidores adicionais em diferentes locais. Ele permite que os visitantes baixem mais rapidamente do servidor mais próximo deles.

Como funciona o cache

Dê uma olhada na seguinte imagem:

Do exposto, já é fácil entender como o cache funciona:

1. O usuário digita um URL e o navegador da web verifica se possui os dados da página solicitada no cache.

2. Se isso acontecer, envia uma mensagem ao servidor que declara quais versões de arquivo ele salvou.

3. O servidor verifica se existem versões mais recentes e, se houver, envia os recursos atualizados. Se eles tiverem sido solicitados antes, o servidor pode transmiti -los de seu próprio cache sem processá -los do zero.

4. O navegador da Web exibe a página da Web solicitada usando os dados existentes de seu cache e todos os dados enviados pelo servidor.

Agora é hora de falar sobre a tecnologia, possibilitando o cache de um site: cabeçalhos de cache.

Entendendo os cabeçalhos de solicitação e resposta

Os cabeçalhos de solicitação e resposta são pequenos pedaços de texto trocados por navegadores e servidores. Eles incluem informações importantes e instruções para os dados transmitidos entre eles.

Uma coisa que eles fazem é configurar o comportamento do cache e vários cabeçalhos existem para esse fim. Eles incluem controle de cache, expira, o último modificado e o ETAG. Os cabeçalhos de cache basicamente trabalham de duas maneiras:

1. Declare se um arquivo de site deve ser armazenado em cache, por quanto tempo e por quem (navegadores e/ou servidores).

2. Marque a idade e a "versão" de um arquivo para que os navegadores apenas o reduzam se houver uma edição mais recente no servidor.

Tudo isso ajuda a reduzir o número de arquivos e a quantidade de dados que precisam ser transmitidos para carregar um site, ajudando a acelerar o processo. E embora os cabeçalhos de armazenamento em cache possam parecer um pouco técnicos, eles são importantes a serem cientes, especialmente se você decidir configurar o cache no seu servidor manualmente.

Como cache um site: 3 opções a serem consideradas

Depois de toda essa teoria, vamos discutir como armazenar um site em termos práticos.

1. Habilite o cache manualmente

Configurar o cache manualmente é a abordagem mais complicada, pois exige que você configure manualmente os cabeçalhos de cache no seu servidor.

A primeira etapa é verificar o status quo, pois o seu provedor de hospedagem ou o software do seu site já pode ter feito parte do trabalho para você. Para isso, abra seu site em um navegador, acesse as ferramentas de desenvolvedor (Ctrl/CMD+Shift+I na maioria dos navegadores), tone hen vá para a guia Rede (você pode precisar recarregar a página para ver algo aqui).

Clique em qualquer recurso para ver seus cabeçalhos de solicitação e resposta.

Depois disso, você precisa definir sua estratégia de cache. Isso será diferente para cada caso de uso. Por exemplo, um site de notícias precisa de intervalos de cache mais curtos do que um site de folheto. O conteúdo dos sites de notícias muda a cada minuto, enquanto os folhetos permanecem amplamente iguais.

Geralmente, você deseja tentar equilibrar a duração do cache e a frescura dos dados:

• Cache ativos estáticos por mais tempo, por exemplo, arquivos de mídia e conteúdo para download. Por exemplo, você provavelmente pode cache seus arquivos de logotipo e fonte pelo tempo máximo de um ano.

• Use o controle de cache: sem lojas para obter recursos que nunca devem ser armazenados em cache.

• Inclua um validador como o último modificado ou o ETAG para garantir a frescura dos recursos sem sacrificar os benefícios do cache. Alguns caches da Web também exigem um cabeçalho de controle de idade e um validador para trabalhar.

A próxima etapa é implementar as configurações escolhidas em seu servidor. Como fazer isso depende do software em que seu servidor está sendo executado. Aqui estão as instruções para as configurações mais comuns:

• nginx

• Apache

Como alternativa, seu provedor de hospedagem também pode oferecer armazenamento em cache e a capacidade de ativá -lo no painel de hospedagem.

2. Use um CDN

Outra maneira de armazenar em cache seu site é se inscrever em uma CDN. Para isso, você primeiro precisa escolher um provedor de CDN. Usaremos o CloudFlare como exemplo aqui, porque é um dos serviços mais populares.

Comece inscrevendo -se no seu CDN de escolha. Vá para o site deles e crie uma conta.

Escolha um plano que atenda às suas necessidades e forneça o endereço do seu site.

Depois disso, você precisa atualizar suas configurações de DNS. O provedor da CDN digitalizará seus registros atuais e depois mostrará seus servidores de nomes.

Com isso em mãos, faça login no seu registrador de domínio (por exemplo, namecheap, godaddy ou Google domínios), encontre a seção DNS Configurações e substitua os servidores de nomes existentes pelos dados a você pelo seu CDN.

Salve suas modificações e espere. As alterações do DNS podem levar algumas horas para se propagar completamente. Depois de concluído, seu site será roteado com sucesso através da CDN. A última etapa é garantir que o CDN tenha cache ativado.

3. Use um plugin de cache

Por fim, se você estiver usando um site do WordPress, poderá usar um plug -in de desempenho como o WP Rocket. Ele cuida de tudo relacionado ao cache automaticamente, para que você não precise lidar com as peças técnicas. Além disso, tudo o que você precisa fazer é instalar e ativar o plug -in.

Depois de fazer isso, o cache é imediatamente ativo no seu site, incluindo um cache dedicado para dispositivos móveis. Sob regras avançadas , você pode ajustar ainda mais seu cache.

Entre outras opções, você pode determinar a vida útil do cache e definir páginas, cookies e agentes de usuários para os quais não deseja usar o cache. Você encontrará mais informações na documentação.

Além do cache, o WP Rocket oferece muito mais recursos para acelerar o seu site WordPress, incluindo:

• Carrego preguiçoso para imagens e vídeos

• Adiando recursos de bloqueio de renderização

• Cache de pré -carregamento, links, arquivos externos e fontes

• Auto-hospedar fontes do Google

• Otimização do banco de dados

• Capacidade de se conectar facilmente a um CDN, incluindo RocketCDN, que é o CDN do WP Rocket.

Além disso, o WP Rocket implementa muitas melhorias adicionais de desempenho em segundo plano. Entre eles estão a compactação do GZIP, a minificação de arquivos CSS e JavaScript e otimizando imagens acima da dobra para melhorar a maior tinta conteúdo.

O impacto de desempenho do cache de um site: um estudo de caso

Para examinar o efeito do cache na melhoria da velocidade do site na vida real, configuramos um site de teste com algum conteúdo fictício e o executamos através do PageSpeed ​​Insights antes e depois da ativação do WP Rocket.

Aqui estão os resultados para dispositivos móveis sem cache:

Agora vamos ver o que acontece após o cache ser ativado:

Embora os efeitos não sejam enormes, eles são perceptíveis. Especialmente a melhoria do valor do índice de velocidade em três segundos não é nada a zombar.

Como discutimos ao longo do artigo, o cache tem mais impacto nos visitantes repetidos. Como o PageSpeed ​​Insights propositadamente não aproveita muito do que o cache tem a oferecer, não é de admirar que os efeitos não sejam maiores. Deve ser mais perceptível para visitantes repetidos em seu site.

Se você está se perguntando, abaixo está o que acontece quando você liga mais algumas melhorias de velocidade no foguete WP, como remover CSS não utilizado, adiando JavaScript, carregamento preguiçoso para imagens e pré -carregamento . Só é preciso verificar algumas caixas.

Como limpar o cache do site

A limpeza do cache do seu site pode ser necessária para solucionar problemas, adicionar novos recursos e garantir que o conteúdo mais recente seja visível aos visitantes. Naturalmente, como o cache acontece em diferentes níveis, também existem maneiras diferentes de esvaziá -lo.

Exclua cache do navegador

O método exato para esvaziar o cache do navegador depende de qual navegador você está usando, mas todos eles têm opções em suas configurações. No Chrome, você o encontra sob privacidade e segurança> Excluindo dados de navegação .

Cache do servidor limpo

Se o armazenamento em cache tiver sido implementado em seu servidor, seu provedor de hospedagem provavelmente terá a opção de limpá -lo.

Esvazie o cache do seu CDN

A purga do seu cache de CDN acontece naturalmente através do seu provedor de CDN. Por exemplo, no Cloudflare, a opção está disponível em Cache> Configuração> Cache de purga .

Purge cache no seu site

Se você estiver usando um plug -in para armazenar em cache seu site, ele geralmente possui um botão em algum lugar que permite limpar o cache. O WP Rocket elimina o cache do site automaticamente nos momentos apropriados, como quando você altera as configurações, publica novo conteúdo, modifica seu site ou quando a vida útil do cache acabar.

Se você quiser fazer isso manualmente, pode encontrar essa opção diretamente no painel em Configurações> WP Rocket no seu back -end do WordPress.

Você também tem a capacidade de limpar o cache para páginas individuais dentro do editor do WordPress ou do menu Páginas ou postagens , passando o mouse sobre as entradas lá.

Como você cache um site? Agora você sabe

O cache é uma das maneiras mais fundamentais de tornar seu site mais rápido. É um método simples para reduzir a quantidade de dados que precisam ser transmitidos para os visitantes para visualizar seu site.

O cache está disponível em diferentes níveis do processo de carregamento e pode segmentar diferentes elementos do site, embora os princípios permaneçam os mesmos.

Use o WP Rocket para implementar o cache no seu site WordPress automaticamente e aproveite dezenas de outros recursos de desempenho e práticas recomendadas para tornar seu site mais rápido imediatamente. O plug-in vem com uma garantia de devolução do dinheiro de 14 dias, para que você possa testá-lo completamente sem risco.