Como funcionam os plug-ins de cache do WordPress?

Sendo a velocidade de carregamento um dos fatores cruciais que determinam ou prejudicam o sucesso de um site WordPress, os plug-ins de cache do WordPress estão em todo lugar atualmente.

Existem plug-ins de cache gratuitos e premium. As empresas nos bombardeiam com seu marketing, explicando por que seu plugin de cache para WordPress é o melhor.

Alguma vez imaginaste:

  1. Como esses plug-ins de cache do WordPress realmente funcionam?
  2. Por que eles fazem nossos sites carregarem mais rápido?
  3. Por que às vezes eles quebram todo o layout dos nossos sites?

Neste artigo, estou orientando você nas ações executadas pelo cache de plug-ins em segundo plano. Não se preocupe, não vou me perder no discurso técnico. Você será capaz de entender este artigo perfeitamente se não souber escrever código.

Para definir um padrão para tempos de carregamento lentos, quero dizer sites que demoram mais de três segundos para carregar. Com base em dados coletados por Pingdom, o tempo médio de carregamento dos sites em 2017 foi de 3,21 segundos. O Google disse em um estudo feito em 2018 que 53% dos visitantes móveis sairão de um site que leva mais de três segundos para carregar.

Se o seu site demorar mais de três segundos para carregar, é provável que você dobre o tráfego móvel, fazendo com que ele carregue mais rápido.

Por que os sites WordPress carregam lentamente

Vamos começar explicando por que os sites WordPress estão carregando lentamente. Na verdade, esse problema está relacionado ao funcionamento do WordPress. Deixe-me explicar.

WordPress nada mais é do que uma coleção de arquivos e um banco de dados localizado em sua conta de hospedagem na web. Os arquivos criam seu site de forma mágica, e o banco de dados contém todos os textos, logins, configurações, etc.

Você pode pensar no banco de dados como uma planilha do Excel (um pouco mais complicada).

Quando um visitante chega ao seu site, o seu host começa a enviar alguns desses arquivos para o navegador do visitante e carrega os dados que compõem o seu site a partir do banco de dados. Se o visitante abrir sua página inicial, o host carregará todos os dados que compõem a página inicial. Se o visitante acessar sua página de contato, o host carregará o conteúdo da sua página de contato do banco de dados e o enviará ao navegador do visitante.

Ler:  Como definir um tema de largura total no WordPress

Agora, é aqui que começa o potencial para tempos de carregamento lentos. Se a sua empresa de hospedagem não estiver otimizada para WordPress (ou se você estiver em hospedagem compartilhada), o carregamento do conteúdo do banco de dados pode demorar muito.

Deixe-me guiá-lo passo a passo para que você entenda como os plug-ins de cache do WordPress podem acelerar esse processo:

  1. O visitante do seu site clica em um link para o seu site (por exemplo, ele encontrou você nos resultados de pesquisa do Google ou viu um de seus anúncios nas redes sociais).
  2. O navegador do seu visitante agora envia uma solicitação à sua empresa de hospedagem. É como se o navegador estivesse dizendo “Ei, por favor, envie-me o site de Jan Koch”.
  3. Sua empresa de hospedagem responde: “Ok, deixe-me pegar todos os dados necessários para carregar o site de Jan e enviá-los para você”.
  4. Neste ponto, o seu host começa a processar os arquivos que compõem o seu site, pesquisa o conteúdo do seu banco de dados e empacota-o perfeitamente na forma do seu site.
  5. Depois que o seu host carregou todos os arquivos e encontrou todo o conteúdo, o site é enviado ao seu visitante.
  6. Por fim, o navegador do seu visitante recebe os dados e pode exibir o site.

Embora esse processo seja muito simplificado, espero que ilustre vários problemas que potencialmente fazem com que seu site carregue lentamente. Existem três métricas que você verá na maioria das ferramentas de análise de velocidade, que resumem o quão bem um site está carregando: o número de solicitações, o tamanho da página e, finalmente, o próprio tempo de carregamento.

Esta é uma captura de tela de um teste de velocidade que executei em meu site usando o Teste de velocidade do site Pingdom. Você pode ver que o tempo de carregamento da minha página é de 351 ms, o tamanho da página é de 757,2 KB e são necessárias 29 solicitações para carregar o site. Esses resultados são muito bons e considero o melhor do que é possível com esforços razoáveis. Testei muitos plug-ins de cache do WordPress para chegar a esses resultados, optando pelo Swift Performance. Eu uso a versão paga deles, mas o Swift Performance Lite também é muito bom!

O que fiz para atingir esses números é muito simples. Deixa-me mostrar-te como.

Crie sites WordPress melhores. Assine nosso boletim informativo semanal para receber conteúdos como este diretamente em sua caixa de entrada.

Ler:  Revisão do Toonly: software de vídeo animado [Working or NOT]

Como funcionam os plug-ins de cache do WordPress

Sempre que você tentar fazer com que seu site WordPress carregue mais rápido, você inevitavelmente tocará nos plug-ins de cache do WordPress em um ponto. Isso ocorre porque esses plug-ins podem interceptar e melhorar bastante o processo de carregamento que descrevi acima!

Este gráfico mostra os tipos de arquivos que compõem um site. Faz parte da análise de velocidade do Pingdom que compartilhei acima.

Você pode ver que meu site (como o seu) consiste em:

  • Arquivos de imagem
  • Arquivos CSS (aqueles que controlam a aparência do seu site)
  • Scripts (aqueles que controlam como seu site funciona e, às vezes, partes dos designs)
  • Fontes (seu texto deve ficar lindo)
  • Dados XHR (dados sendo transferidos entre seu host e um navegador)
  • HTML (o código estrutural do seu site)

Cada um desses tipos de arquivo aumenta o tempo de carregamento do seu site.

Você pode ver que a maior parte do tamanho da página do WP Mastery são imagens. Embora não seja exatamente um problema de cache, quero que você saiba que eu uso Imagine para otimizar minhas imagens para tempos de carregamento rápidos.

Cache e pré-carregamento de páginas

Vamos começar com dois dos recursos mais importantes dos plug-ins de cache do WordPress: cache de páginas e pré-carregamento de cache. Não se preocupe, você não precisa ser um cientista espacial para entender como eles funcionam.

Lembra da minha explicação sobre como seu site carrega quando um visitante acessa seu domínio? Todo esse processo de carregar os dados do banco de dados, reunir todos os arquivos e todas as outras coisas é contornado quando um cache de página é ativado e o cache é pré-carregado.

Em vez de carregar todas as informações do banco de dados, seu site agora tem uma cópia de cada página pronta para enviar diretamente aos visitantes. Seu host não precisa mais procurar as informações corretas no banco de dados, ele pode simplesmente enviar os dados diretamente.

Este é o status atual do meu cache de página no WP Mastery. Você pode ver que tenho 559 páginas individuais em meu site, incluindo postagens de blog, arquivos e outros conteúdos. Meu site pré-carregou cada conteúdo em um cache para que possa entregar o site rapidamente aos visitantes que acessam a página.

Pré-carregar o cache da página é um processo altamente automatizado, no qual você não precisa fazer nada além de iniciá-lo. Você desejará verificar o status do cache ocasionalmente e reiniciar o pré-carregamento se algo der errado.

Ler:  Crie uma infraestrutura de tags versus categorias do WordPress

Mas isso é tudo. A mágica acontece em segundo plano.

Minificação e combinação de arquivos

Da mesma forma que o Imagify reduz o tamanho do arquivo de imagens em um site, os plug-ins de cache podem reduzir o tamanho dos arquivos CSS, JavaScript e conteúdo HTML. Essas funções são chamadas de “” e estão incluídas na maioria dos plug-ins de cache do WordPress. Ao minificar arquivos, os plug-ins de cache removem automaticamente espaços em branco, quebras de linha e outras marcações desnecessárias.

Com apenas o código necessário e nenhum estilo para torná-lo mais legível para humanos, os plug-ins de cache do WordPress podem reduzir o tamanho geral da página.

Sempre inicio meus processos de otimização reduzindo o tamanho da página do site em que estou trabalhando. Portanto, se você puder configurar seus plug-ins de cache com minificação, já terá uma vantagem inicial.

Porém, uma palavra de cautela: a minificação às vezes pode causar problemas e quebrar seu layout! Tenha muito cuidado ao aplicar a minificação ao seu site e habilite uma opção por vez.

Aqui está uma captura de tela das minhas configurações para reduzir e otimizar a entrega de CSS no Swift Performance Pro:

Você provavelmente verá opções semelhantes em seu plugin de cache do WordPress se estiver usando um diferente. Ative apenas uma opção por vez, limpe o cache e teste seu site em vários navegadores para garantir que ele carregue corretamente. Quase todos os plugins de cache WP permitem excluir folhas de estilo ou arquivos JavaScript da minificação. Faça bom uso desta opção caso seu layout seja quebrado ao reduzir todos os arquivos.

Além de minificar arquivos, a maioria dos plug-ins de cache do WordPress também permitem mesclar vários arquivos em um, especialmente ao trabalhar em arquivos CSS e JavaScript. Essa função é uma forma fantástica de reduzir o número de solicitações necessárias para carregar um site. Sem essa fusão de arquivos, seriam necessárias mais de 100 solicitações para carregar meu site. Mas, ao permitir a fusão de arquivos JS e arquivos CSS, reduzi para 29 solicitações.

Configuração de cabeçalhos de expiração

Outra funcionalidade muito útil e essencial nos plug-ins de cache do WordPress é definir os chamados cabeçalhos “”. Esses são trechos de informações que informam aos navegadores da Web se um arquivo foi alterado desde a última vez que o navegador visitou um site. Na maioria das vezes, esses cabeçalhos são definidos para arquivos que não são alterados com frequência. Imagens, JavaScript e arquivos CSS são exemplos comuns.

Ler:  Como aumentar as vendas usando o Auction Nudge para eBay no WordPress

Esses cabeçalhos funcionam da seguinte maneira:

  1. Na primeira vez que um visitante acessa seu site, o navegador baixa todos os arquivos necessários para exibir a página.
  2. Quando o visitante abre uma nova página no seu site (digamos, da sua página inicial para a sua página de serviços), o navegador dela sabe que alguns arquivos não precisam ser baixados novamente – porque esses arquivos estão marcados com cabeçalhos.
  3. O navegador então carrega os novos dados e, assim, pode carregar a nova página mais rapidamente.

Da definição de documentos da web MDN (Mozilla):

Os navegadores sabem que, se um cabeçalho ainda não expirou, as informações contidas no arquivo ainda são válidas. Como normalmente você definiria cabeçalhos para pelo menos um mês (às vezes até um ano), esses cabeçalhos oferecem ótimos resultados para visitantes recorrentes em seu site.

cabeçalhos são uma maneira simples de melhorar a velocidade do seu site. Recomendo enfaticamente que você experimente!

Quais plug-ins de cache usar

Depois de destacar apenas três dos principais recursos que os plug-ins de cache do WordPress trazem para o seu site, quero deixar algumas recomendações e dicas sobre como escolher um plug-in de cache para o seu site.

Em última análise, é uma decisão entre plug-ins gratuitos e plug-ins pagos. Plug-ins de cache gratuitos populares são:

  1. Cache Total W3 (mais de 1 milhão de instalações)
  2. Super Cache WP (mais de 2 milhões de instalações)
  3. Cache mais rápido WP (mais de 900.000 instalações)

Meu plugin de cache gratuito favorito, entretanto, é Desempenho rápido Lite com apenas mais de 10.000 instalações. Recebi os melhores resultados de velocidade com este plugin.

Quando se trata de plug-ins de cache pagos, existem apenas dois plug-ins que devem ser levados a sério: Foguete WP e Swift Desempenho Profissional. Perguntar qual plugin é melhor é semelhante a perguntar se você gosta mais do Windows ou do Mac. É quase um debate religioso no mundo WordPress.

A Hostinger recomenda o WP Rocket em sua base de conhecimento e eu pessoalmente consegui fazer as lojas WooCommerce carregarem em menos de um segundo usando o WP Rocket. Meu próprio site está executando o Swift Performance Pro e também carrega extremamente rápido. Portanto, você não pode errar com nenhum deles.

Experimente o WordPress gerenciado para obter melhores resultados

A hospedagem gerenciada de WordPress cuida da compactação de imagens, atualizações automáticas de plug-ins e da plataforma, backups diários automáticos, SSL automático e ambientes de teste, bem como acesso a ferramentas de desenvolvedor e sem limites de visualização de página/tráfego.

Novas publicações:

Recomendação