Como acelerar e cachear seu site WordPress – Guia definitivo

Neste guia, vou mostrar como acelerar tremendamente seu site WordPress configurando algumas ferramentas.

Aprenda como acelerar os tempos de carregamento do seu site por um fator de 5 ou mais. Vamos buscar uma melhor experiência do usuário e melhores classificações nos motores de busca 💪

Diminuir o tempo de carregamento da página e aumentar a velocidade do site melhorará tremendamente a experiência do usuário do seu site. Seus visitantes ficarão mais tempo, e o número de usuários que abandonam o site após abrir a primeira página será menor do que antes. Você pode já ter ouvido falar dessa métrica como a chamada taxa de rejeição.

Melhor ainda, a velocidade do site é um fator de classificação do Google, o que significa que seu site pode obter classificações de busca mais altas no Google depois de um tempo. Isso resultará em mais usuários encontrando seu site e obtendo mais tráfego.

Existem algumas razões pelas quais seu site WordPress pode ser lento.
As razões mais comuns são "Sem cache" e um tamanho de página muito grande.

Além dessas duas razões principais, várias outras variáveis podem afetar a velocidade do seu site:

• Muitos plugins instalados
• Configuração do seu servidor
• Código ruim em um ou mais plugins.
• Código ruim no tema
• Conectividade de rede lenta
• Resposta lenta do servidor

Antes de começar, é essencial lembrar que nem todas as ações recomendadas podem melhorar o tempo de carregamento do seu site. Uma pode funcionar melhor que outra, e algumas afetam o tempo de carregamento do seu site apenas de forma insignificante.

Vídeo: Como acelerar o WordPress

Se você prefere assistir a um vídeo em vez de ler este artigo sobre como acelerar o WordPress, pode assistir a este artigo inteiro em vídeo:

Ferramentas que usamos para acelerar o WordPress

• ShortPixel Image CDN
• WP Super Cache
• Autoptimize
• wp-staging.com
• Pingdom
• Google PageSpeed Insights
• GiftofSpeed GZIP Test

Avalie a velocidade do seu site

Vamos começar com alguns testes de referência para obter uma visão geral e compreensão da velocidade do seu próprio site.

Para fazer benchmark e analisar a velocidade do site, você pode usar as ferramentas online gratuitas de velocidade de página Pingdom e Google PageSpeedInsights.

Esses resultados são de um site de exemplo com WordPress 5.6, alguns plugins populares e a versão gratuita do tema "Astra", e um site WordPress muito longe de carregar rapidamente:

Ativar o cache

Vamos começar com o primeiro passo, instalar um plugin de cache.

Um plugin de cache salva a saída HTML visível do seu site em arquivos temporários no seu site. Executar código de um plugin ou tema é muito custoso em termos de tempo porque o servidor tem que fazer numerosos cálculos para realizar a execução.

Com o cache, esses cálculos só precisam ser feitos uma vez quando um visitante abre seu site. O plugin de cache verifica primeiro se há um cache existente para conteúdo específico.

Se o conteúdo já está em cache, ele exibe diretamente a saída HTML pré-calculada em vez de executar todo o código novamente. Então o servidor tem mais recursos livres para carregar seu site mais rapidamente. Apenas instalar um plugin de cache e ajustá-lo corretamente pode tornar seu site dez vezes mais rápido ou ainda mais.

WP STAGING – WordPress Backup, Restore & Migration

Eu recomendo WP Super Cache. Este plugin é desenvolvido pela Automattic. Essa é a mesma empresa responsável pelo desenvolvimento do núcleo do WordPress. O plugin é gratuito, poderoso e simples se você entender como funciona.

Este plugin é, em muitas opções, tão poderoso quanto plugins premium, como o popular WP ROCKET que você pode ter ouvido falar antes.

WP ROCKET tem uma interface mais amigável e pode ser mais fácil de usar para iniciantes. Não se preocupe; vou pegar sua mão e mostrar todos os cliques que você precisa fazer para obter resultados semelhantes aos que obteria usando um plugin de cache premium.

Então você obtém os mesmos resultados de velocidade gratuitamente!

Vá para a loja de plugins e busque WP Super Cache.

Após instalar e ativar o plugin WP Super Cache, vamos configurá-lo.

Seria possível ativar o cache via a seção "Easy" escolhendo "caching on", mas neste ponto, vamos diretamente à área "Advanced", pois podemos configurar as configurações aqui com mais precisão.

1. Ative a caixa de seleção "Enable Caching".
2. Simple como método de entrega de cache.
3. Desative o cache para visitantes logados.
4. Não armazene em cache páginas com parâmetros GET. Garante que páginas dinâmicas que são diferentes para cada usuário, como carrinhos de compras, nunca sejam armazenadas em cache.
5. Comprima as páginas para que sejam servidas mais rapidamente aos visitantes,
   e ative a compressão Gzip, que acelera significativamente seu site. Note que alguns servidores já comprimem os dados por conta própria, levando a erros ao iniciar a opção. Para ver se seu servidor já está usando compressão gzip, você pode usar este teste de desempenho de gzip.
6. Cache rebuild,
   mostra o conteúdo em cache ao usuário mesmo se o cache estiver sendo atualizado devido a novo conteúdo. Isso significa que seus visitantes nunca verão conteúdo não armazenado em cache, exceto na primeira vez que o cache for gerado.
7. 304 Browser Caching,
   diz ao usuário para carregar o site a partir de um cache do navegador se já houver conteúdo armazenado em cache no navegador do usuário em vez de se conectar ao servidor. Isso pode reduzir ainda mais a carga de CPU do seu servidor.

Em seguida, role para baixo até a aba "Advanced".

1. Ative o suporte para dispositivos móveis. Um simples clique é suficiente, mas o wp-super-cache aponta que, dependendo do design, um plugin adicional pode precisar ser instalado. Como usamos um tema WordPress padrão, isso é desnecessário. Se seu site funcionar bem em dispositivos móveis após ativar esta opção, está tudo bem usá-la.
2. Quando uma postagem ou página é publicada ou atualizada, apague todos os arquivos de cache e garanta que o cache será limpo para que novo conteúdo possa ser exibido.

Finalmente, o último passo nas configurações do plugin de cache é a opção PRELOADING, que você pode encontrar na aba "Preload":

A configuração de preload faz o plugin armazenar em cache todas as postagens e páginas do seu site periodicamente. Você pode definir o intervalo de tempo entre cada atualização de cache. Esse intervalo de tempo é uma configuração muito crucial.

Em um ambiente de hospedagem compartilhada, você deve idealmente defini-lo para uma vez por dia – a cada 1440 minutos.

Se você atualiza seu site duas vezes por dia, pode selecionar o intervalo de tempo entre cada atualização de cache em 720 minutos. Com essa configuração, todo o cache será atualizado duas vezes por dia. Um tempo de atualização tão baixo pode gerar carga adicional no servidor.

Eu não recomendaria usar um valor menor em ambientes de hospedagem compartilhada – pois pode e provavelmente será contado como uso excessivo de recursos do servidor.

No entanto, se você estiver em um VPS ou em um servidor dedicado, pode definir a taxa de atualização para apenas 60 minutos.

Vale a pena saber que o número de postagens e páginas em seu site afeta os recursos necessários para cada operação de atualização de cache preload. Um tempo ideal de atualização para um servidor dedicado em um site de alto tráfego seria de 2 horas.

Marquei as caixas de seleção relevantes e defini o intervalo de atualização do cache para 1440 minutos. Você é livre para escolher qualquer valor!

Otimizar arquivos CSS, JavaScript e imagens

Para os próximos ajustes, como combinar arquivos Javascript e CSS e otimizar imagens e a saída HTML, usamos outro plugin chamado "Autoptimize", que podemos instalar a partir do repositório de plugins do WordPress.

Se você deve ou não agregar arquivos CSS e JavaScript depende principalmente de como seu servidor está configurado.

Cada site carrega arquivos pelo protocolo HTTP 1.1 ou o mais novo HTTP 2.

Com HTTP 1.1, todos os arquivos serão baixados um após o outro. Por exemplo, um arquivo deve ser completamente carregado para o visitante antes que o servidor possa começar a enviar o próximo arquivo.

Para reduzir o número de arquivos a baixar, o Autoptimize pode combinar esses arquivos. Assim, em vez de enviar dez arquivos CSS, seu servidor só precisa baixar um arquivo, resultando em um tempo total de carregamento mais rápido. Embora o tamanho total de um arquivo CSS ou JS combinado seja maior, cada solicitação individual vem com sobrecarga adicional; como o tempo extra que uma solicitação precisa para estabelecer uma conexão com o servidor. É por isso que pode ser mais rápido carregar um único arquivo grande em vez de carregar vários arquivos.

Portanto, se seu servidor roda HTTP 1.1, é recomendado agregar todos os arquivos CSS e JS do seu site.

Pelo contrário, o protocolo HTTP2 pode baixar vários arquivos simultaneamente. Se essa for a configuração no seu servidor, pode ser contraproducente ativar a agregação de arquivos. HTTP2 geralmente é muito mais rápido porque pode baixar vários arquivos pequenos simultaneamente em vez de um grande.

Portanto, combinar arquivos CSS e JS muitas vezes não traz benefícios e pode até desacelerar o site se ele usa HTTP2. Para estar seguro, você pode testar ambas as opções para determinar qual configuração lhe dá os melhores resultados.

Para ver se seu site usa HTTP 2, use o KeyCDN http2 service.

Otimizar JavaScript

Selecione a aba "JS, CSS & HTML".

Ative Optimize JavaScript Code

Se seu servidor usa HTTP 1:

• Ative Aggregate JS files para combinar arquivos JavaScript como recomendado pelos serviços de benchmark de velocidade de página

Desative as opções:

• Force JavaScript in <head
• Exclude scripts from Autoptimize
• Add try-catch-wrapping.

Ative essas opções apenas se você agregar arquivos javascript e tiver problemas com o site. Então você pode excluir arquivos javascript específicos do processo de combinação.

Se seu servidor usa HTTP 2:

• Desative Aggregate JS Files

Otimizar arquivos CSS

O próximo passo é a otimização dos arquivos CSS.

• Clique em Optimize CSS Code.

Se seu servidor usa HTTP 1.1, ative as opções:

• Aggregate CSS-files
• Aggregate inline CSS.
  Isso melhorará ainda mais a pontuação de velocidade de página. É a mesma coisa que agregar arquivos Javascript e arquivos javascript inline, mas apenas para CSS. Mantenha esta opção desativada se seu servidor usar HTTP2!

Se seu servidor usa HTTP1 ou HTTP2:

• Ative Generate data: URIs for images – Isso pode resultar em menos solicitações HTTP. Mas não depois de configurar um CDN e servir imagens por ele. No caso de usar um CDN, você teria que desativá-lo. Ao usar um CDN, arquivos são armazenados em cache em vários data centers ao redor do mundo.
• Desative Inline and Defer CSS
• Exclude CSS from Autoptimize:
  Use isso apenas se você agregou arquivos CSS e está enfrentando problemas visuais em seu site. Então você pode excluir arquivos CSS específicos do processo de combinação.

Otimizar HTML

Ative a opção "Optimize HTML code".

Ao otimizar arquivos HTML, espaços e comentários são removidos do código. Isso reduzirá o tamanho do arquivo. E arquivos menores geralmente carregam mais rapidamente do que arquivos maiores.

Antes da otimização HTML:

Após a otimização HTML

A última seção a editar são as opções MISC no Autoptimize.

Habilite as primeiras quatro opções:

• Save aggregated script/CSS as static files.
• Minify excluded CSS and JS files.
• Enable 404 fallbacks.
• Also, optimize for logged-in editors/administrators.

Se você está logado e enfrenta problemas com um construtor de páginas como Elementor ou outro plugin de backend, desative a última opção.

Otimizar Google Fonts

Vamos para a aba "Extra".

As fontes Google podem desacelerar o tempo de carregamento, pois são obtidas de recursos externos. Eu prefiro a opção "combine and link in head" pois melhora os tempos de carregamento sem ver a fonte ser carregada. Se você está na União Europeia, isso também torna seu site mais compatível com o GDPR, pois esses recursos externos não são mais carregados do google.

Mas você também deve testar a última opção Google Font, "combine and load fonts asynchronously with webfont.js", e ver qual produz melhores resultados na ferramenta de velocidade de página.

Depois, habilite "remove Emojis" porque o javascript responsável pelos Emojis está sobrecarregado e não é benéfico para um bom tempo de carregamento.

Otimizar imagens

O Autoptimize também pode ajudar a fazer com que as imagens carreguem mais rapidamente usando um serviço de terceiros integrado chamado ShortPixel. Se você quiser experimentar isso, vá para a seção Images.

Escolha "Optimize Images"; as URLs do seu site serão alteradas para apontar para o CDN do ShortPixel.

O Shortpixel reduz/adapta gratuitamente 100 imagens por mês, o que pode ser suficiente se você tiver um site pequeno ou médio.

Image Optimization Quality – Você pode encontrar o equilíbrio certo entre compressão e qualidade clicando em "You can test compression levels here."

Você será levado a shortpixel.com, onde pode ver visualmente as diferenças em cada nível de compressão do ShortPixel enviando uma das suas imagens.

Qual é o melhor para você?

• Lossy: maior compressão, maior perda de qualidade.
• Glossy: compressão média, pouca perda de qualidade.
• Lossless: baixa compressão, menor perda de qualidade.

Volte para o Autoptimize e insira suas configurações!

• Load WebP or AVIF in supported browsers – ative isso para que o Autoptimize sirva imagens no formato WebP, que permite comprimir imagens ainda mais sem comprometer muito a qualidade.
• Lazy-Load images – também deve ser habilitado, e resultará em menos solicitações e é recomendado pelo Google para tempos de carregamento mais rápidos.

E o Cloudflare?

Talvez você se pergunte por que não menciono um CDN ou serviço DNS como o Cloudflare, como muitos outros tutoriais recomendam para otimização adicional?

A resposta simples é que mudar o serviço DNS não é necessário para a maioria dos sites, pois vem com algumas potenciais desvantagens.

Por exemplo, mudar para um serviço CDN baseado em DNS como o Cloudflare cede o controle sobre seu site e seu tráfego. Frequentemente encontro sites rodando sob o serviço DNS do Cloudflare, onde sou obrigado a preencher um captcha antes mesmo de poder acessar o site. Tais captchas podem levar a uma alta taxa de rejeição de visitantes e afetar negativamente as classificações de busca. Um serviço DNS também poderia redirecionar parte do seu tráfego para outro lugar, e você nem perceberia imediatamente. Portanto, tenha isso em mente quando quiser dar a um serviço DNS de terceiros o controle sobre seu domínio.

Após as otimizações que aplicamos, seu site já é tão rápido que não limitará a classificação no Google, então neste artigo não cobriremos o serviço Cloudflare.

Me avise se você vê isso de forma diferente e tem outra opinião sobre usar o Cloudflare.

Artigos relacionados

• Como otimizar o banco de dados do WordPress para desempenho superior?
• Tutorial de phpMyAdmin para reparar e otimizar tabelas do banco de dados
• Por que o WordPress é lento + Como corrigir
• Como limpar o cache e os cookies do navegador?