Como otimizar site WordPress em 10 passos – Guia 2023 completo

Se você está querendo melhorar a velocidade do seu site, nesse Guia definitivo vamos te mostrar o passo a passo mais completo sobre como otimizar site WordPress.

Antes de por a mão na massa, precisamos fazer uma breve introdução. Então não pule ela por favor, pois alguns conceitos serão importantes para o entendimento de toda a questão sobre velocidade de sites.

Introdução

Causas de problemas

Desde o lançamento do nosso Tema WordPress Wolf WP, um grande desafio foi saber lidar com situações de suporte que não podem serem resolvidas somente dentro do próprio tema. De todos as solicitações de suporte que recebemos, algumas não estão relacionadas diretamente com o Wolf WP. Mesmo assim tentamos fazer o possível para poder dar pelo menos uma direção para os usuários que estão com a dúvida/problema possam resolver. Por isso que o nosso suporte é tão elogiado.

Quando você executa o WordPress, existem pelo menos 5 grandes fatores que podem dar problemas ou gerar dúvidas para o seu site, que são:

• Servidor que você está usando para hospedar seu site [P1];
• WordPress e sua versão instalada no servidor [P2];
• Plugins e suas versões instalados no WordPress [P3];
• Cache de plugins, Servidor ou serviço de CDN [P4];
• Erro Humano ou configuração incorreta por parte de quem gerencia o site [P5];
• Tema e sua versão instalado no WordPress [P6];

Método de solução 6P

Uma lógica que usamos por aqui para resolver qualquer tipo de problema, é justamente analisar os fatores na ordem [P1] > [P2] > [P3] > [P4] > [P5] e só depois [P6] para ver se algum deles é a causa. Assim fica mais fácil de passar uma solução mais precisa.

Vejamos alguns exemplos de dúvidas frequentes:

1. A instalação de um certificado SSL, só pode ser feito no seu Servidor. Não depende do WordPress, Plugins ou Tema que esteja usando. Temos aqui um caso [P1];
2. A utilização do editor Gutenberg na hora de escrever Posts, só vai funcionar se você estiver com a versão mais recente do WordPress. Temos aqui um caso [P2];
3. A desativação do plugin WP Social Locker resolve vários conflitos de JavaScript por ele não seguir boas maneiras de programação. Temos aqui um caso [P3];
4. Uma determinada configuração feita para o seu site não apareceu como deveria. Temos aqui possivelmente um caso [P4];
5. A imagem para o Thumbnail de um post não segue o tamanho mínimo recomendado. Temos aqui um caso [P5];
6. A captura do topo do Wolf WP não está aparecendo. Temos aqui talvez um caso [P4] ou [P5] ou simplesmente um [P6];

Core Web Vitals

Pronto! Agora que vimos essa breve introdução, fica mais fácil de lhe ajudar com a dúvida “como aumentar a velocidade do meu site?”.

Essa dúvida tem se tornado cada vez mais constante. Isso porque o Google fez uma atualização em 2021 sobre como vai indexar sites partir de agora. Essa atualização trouxe consigo um novo conceito chamado Core Web Vitals.

Core Web Vitals é um conjunto de métricas que avaliam a otimização e qualidade de um site. Em outras palavras, quanto maior for a pontuação positiva de um site nessas métricas, maior a chance dele se manter ranqueado nas primeiras páginas para pesquisas do Google. Claro que todas as outras boas recomendações, como um SEO bem otimizado, continuam sendo válidas para um bom ranqueamento.

Principais métricas que compõem o Core Web Vitals

• Largest Contentful Paint (LCP): diz respeito ao tempo de carregamento que o seu site leva para concluir toda exibição de conteúdo.
• First Input Delay (FID): diz respeito ao tempo que o seu site leva para se tornar interativo ou que possa ser clicado em palavras mais simples.
• Cumulative Layout Shift (CLS): diz respeito a estabilidade visual. Em outras palavras, os componentes visuais do seu site (imagens, textos, etc.) não podem “mexer muito de lugar” enquanto são exibidos.

Também existem outras métricas que iremos comentar mais adiante.

Ferramentas para medição

Diante disso, é muito importante que o seu site atenda a todas essas métricas. Não fique focado apenas em deixar seu site rápido, pois ele pode deixar de cumprir algo muito importante.

Segue abaixo ferramentas que irão lhe ajudar a identificar os pontos de melhorias e consequentemente deixar o seu site mais rápido.

• Google PageSpeed Insight: a melhor de todas por se tratar de uma ferramenta do próprio Google e possuir um relatório de melhorias para LCP, FID e CLS bem detalhado e fácil de entender. Será ela que iremos citar com mais frequência adiante.
• Google Search Console: outra ferramenta do Google e indispensável para o seu site. Lá existe uma opção “Principais métricas da Web” que você pode está usando para acompanhar se o seu site está de acordo com as recomendações do Core Web Vitals.
• GTMetrix: possui relatórios mais detalhados, mas são mais difíceis de entender. Use ele como complemento após já ter uma boa nota no Google PageSpeed.

Checklist para otimizar site WordPress

Antes de entendermos como podemos usar algumas das ferramentas acima, é muito importante que você implemente todas as boas práticas que iremos citar, assim você garante uma boa otimização para o seu site. Consequentemente você terá uma boa avaliação no Core Web Vitals e um site mais rápido.

É aqui que entra aquele ponto da breve introdução. Algumas das boas práticas que iremos mostrar não dependem exclusivamente do tema que esteja usando. Evite pensar então que só a mudança de tema pode resolver seus problemas.

Boa parte dessas recomendações a seguir não podem ser resolvidas somente pelo o tema WordPress que você está usando. Mas claro que usar um bom tema também vai lhe ajudar. O Wolf WP já possui mecanismos que ajudam na velocidade, principalmente com o lançamento da grande versão 3.0. Entre esses mecanismos, podemos citar arquivos de CSS e JS menores, carregamento tardio para imagens e páginas AMP.

Sem mais enrolações, vamos ao checklist!

Conheça o Melhor Serviço de Otimização de Sites

Check 1. Reduzir a quantidade de Plugins ativos

Quanto menos plugins você usar, melhor vai ser. Plugins acabam inserindo mais código JavaScript e CSS, o que pode deixar o carregamento do seu site mais lento.

Uma dica paralela, é de de não usar plugins para coisas que o seu tema WordPress já possui ou faz muito bem. Você precisa fazer essa análise interna quando estiver construindo o seu site. Por exemplo, no Wolf WP não precisa de plugin para compartilhamento em redes sociais dentro dos Posts, pois ele já faz isso de forma nativa. Assim vale para exibição de artigos relacionados que o Wolf WP já faz de forma automática quando se aplica Categorias aos Posts.

Também evite usar plugins que fazem a mesma coisa um do outro. É muito comum entramos em sites de clientes que possuem 2 plugins de segurança, 2 para SEO e 2 para cache.

Para fazer a desativação de plugins, acesse o menu Lateral do seu WordPress até a opção: Plugins > Plugins Instalados

Obs: ligado ao [P3] e [P5].

Check 2. Usar uma Hospedagem de qualidade

Invista em um bom servidor de hospedagem. As melhores são as do tipo VPS ou Cloud. Mas se você não tem muitos recursos agora, escolha pelo menos o melhor plano de hospedagem compartilhada que seu serviço oferece.

Caso deseja utilizar uma hospedagem Cloud que entrega uma boa experiência de usuário a um bom preço, recomendamos a Umbler. Com o nosso link de indicação, você ganha até R$ 100,00 de crédito para usar como queira.

Obs: ligado ao [P1].

Check 3. Atualizar o PHP para versão mais recente

Use o PHP pelo menos na versão 7.4 ou superior. Além de trazer mais performance, também vai deixar seu site mais seguro.

Essa atualização é feita lá na sua hospedagem. Caso não saiba como fazer, entre em contato com seu serviço de Hospedagem para que eles configurem.

Obs: ligado ao [P1].

Check 4. Atualizar o WordPress, Plugins e Tema

Parece clichê, mas isso faz uma enorme diferença também. Não só ajuda na otimização do seu site, como novamente melhora a segurança do mesmo. Uma pena que muitos usuários não dão a devida importância para isso.

Para verificar se existem atualizações para fazer, acesse pela barra lateral do seu WordPress: Painel > Atualizações.

Obs: ligado ao [P2], [P3] e [P6].

Check 5. Instalar um Tema otimizado

Um Tema WordPress bem otimizado para um carregamento rápido vai ser o melhor investimento que você poderá fazer para o seu site.

Aqui no Wolf WP levamos isso a sério, por isso trabalhamos exclusivamente em uma versão para trazer mais velocidade e performance para todos os nossos clientes. Para saber quais melhorias foram essas, consulte aqui a análise completa do Wolf WP 3.0.

Em resumo, resolvemos vários problemas que o PageSpeed Insights pode apontar em um site.

Obs: ligado ao [P6].

Check 6. Otimizar Imagens

A otimização de imagens no WordPress é muito importante se você deseja um site mais rápido. Por isso evite usar imagens muito grande. Muitos usuários fazem uso de imagens com mais de 2000px de largura e isso é péssimo! Basta você usar o tamanho recomendado pelo o seu tema. Aqui no Wolf WP temos aulas exclusivas só para isso, pois dependendo do tipo de Layout que você escolha para o seu Blog, o tamanho da imagem vai mudar.

Dicas extras:

1) Utilize um plugin que faça a compressão de imagens sem a perda de qualidade. Isso reduz consideravelmente o tamanho da imagem, diminuindo assim o tempo de carregamento dela no site.

2) Verifique se o seu plugin de otimização de imagens possui a função de converter as imagens para o formato WebP. Esse é um formato de imagem muito leve, o que consequentemente faz ela ser carregada ainda mais rápido.

Recomendados o plugin Imagify – Optimize your Images & Convert WebP. Ele possui recursos para esses dois pontos citados. A desvantagem é que ele possui um limite de imagens que se pode otimizar por mês. É um número suficiente para quem está começando.

Obs: ligado ao [P3] e [P5].

Check 7. Otimizar Serviços Externos

A cada Script externo inserido no seu site, sua nota vai diminuir no PageSpeed Insight, não importa qual tema WordPress esteja usando. Isso porque scripts demoram para ser carregados e executados dentro do seu site.

Caso use um plugin de cache como citado no CHECK 8, você poderá contornar bastante a queda da sua nota, principalmente se for o WP Rocket por ele tratar bem essa questão.

Lista de Scripts mais comuns usados pelos os usuários:

• Serviços de Anúncios: Google AdSense, Taboola ou similares;
• Serviços de Monitoramento: Google Analytics, Hotmart Analytics ou similares;
• Serviços de Segurança: reCaptchas do Google ou similares;
• Serviços de Marcação: Pixel do Google, do Facebook, da Hotmart ou similares;
• Outros: Google Fonts;

Dica essencial: quando for configurar uma fonte de texto diferente da que vem no seu Tema, opte por usar fontes leves e com menos variações possíveis. Algumas fontes do Google são mais pesadas e pode prejudicar no tempo de carregamento.

Obs: ligado ao [P3] e [P5].

Check 8. Instalar um bom Plugin de Cache ( indispensável! )

Um bom plugin de cache se bem instalado e configurado, pode trazer já uma pontuação de 90 ou até mesmo 100 no Googlo PageSpeed mesmo você falhando em alguns itens desses checklist.

O Wolf WP e assim como os outros Temas, não implementam esse recurso porque já existem plugins que já fazem isso muito bem, evitando assim conflitos com os mesmos. Não precisamos criar uma roda se ela já está aí disponível gratuitamente, certo?

Dicas de plugins grátis para cache:

• W3 Total Cache: difícil de configurar, mas em compensação é um dos melhores dentro da categoria gratuito;
• Hummingbird: fácil de configurar e com resultados quase semelhantes ao W3 Total Cache;
• WP Fastest Cache: fácil de configurar e com resultados quase semelhantes ao W3 Total Cache;

Mas sem dúvidas o melhor plugin de cache para WordPress do mercado é o WP Rocket. De todos os teste que fizemos ele sempre apresentou os melhores resultados e configuração mais fácil. Se você quer levar o seu negócio para o nível profissional, chega um momento que é preciso fazer esse tipo de investimento. Principalmente se você está bastante preocupado com sua pontuação no Core Web Vitals.

Recursos essenciais que um Plugin Cache de possuir:

• Combinação e Minificação de códigos HTML, CSS, e JS;
• Geração de CSS crítico (WP Rocket apresentou os melhores resultados nos nossos testes);
• Remover CSS e JS não usado na página (WP Rocket apresentou os melhores resultados nos nossos testes);
• Adiar ou atrasar a execução de JavaScript;
• Compressão Gzip no servidor;
• Habilitação de Cache para o navegador;
• Carregamento tardio para imagens, vídeos e iframes;
• Pré-carregamento de Links, DNS e fontes de textos;
• Otimização para o Banco de Dados;
• Integração com serviços de CDN;

Dica importante: caso já tenha instalado um serviço de CDN no seu site, procure fazer a integração dele com o seu plugin de cache escolhido.

Obs: ligado ao [P3].

Check 9. Usar AMP

É muito importante que você se preocupe com a performance do seu site quando visto por dispositivos móveis. O número de acessos a sites através de celulares está cada vez mais crescendo. E uma das tecnologias que pode lhe ajudar bastante nisso é o AMP.

A AMP é sigla para a expressão em inglês Accelerated Mobile Pages (Páginas Móveis Aceleradas). Foi criado pelo o Google para permitir que os sites fossem carregados mais rápidos em dispositivos móveis. Felizmente eles conseguiram fazer isso muito bem.

A desvantagem é que existe algumas limitações para que você consiga criar uma página totalmente AMP, como não usar JavaScript da forma tradicional, por exemplo. Isso acaba fazendo com que páginas AMP possuam animações e detalhes visuais mais simples.

O Google não obriga que o seu site seja compatível com o AMP, mas fazer uso desse recurso com certeza vai trazer muitos benefícios na questão de ranqueamento. Atualmente o Google já está dando uma certa preferência em exibir páginas AMP quando o usuário está fazendo pesquisas através de dispositivos móveis.

Compatibilidade

O problema é que muitos Temas WordPress não possuem suporte para páginas AMP. O que obriga o usuário a abrir mão do visual do seu site quando instala um plugin de AMP, e consequentemente perder recursos de conversão importantes como Capturas de E-mail e Anúncios. Porém, aqui no Wolf WP isso não acontece, pois na versão 3.0 lançamos total compatibilidade com esse recurso. Você poderá usar páginas AMP mantendo ainda o visual do nosso tema e dos seus principais recursos de conversão.

Dica essencial: caso você tenha o Google Search Console integrado com o seu site, você pode monitorar o a indexação para as suas páginas AMP na opção de Experiência.

Mesmo que você não use o Wolf WP, confira no vídeo abaixo um Guia completo de como instalar páginas AMP no seu site e evitar os principais problemas dessa tecnologia:

Obs: ligado ao [P3] e [P6].

Check 10. Usar um Serviço de CDN e Firewall

Uma CDN (Rede de Entrega de Conteúdo) é uma plataforma de servidores que tem como propósito reduzir a distância física entre o servidor e o usuário. Quando implementado, ela ajuda a reduzir o tempo de atraso e carregamento de conteúdos que o usuário solicita para o endereço de um site.

A instalação de uma CDN no seu site vai trazer inúmeros benefícios, principalmente se a mesma contar com sistema de Firewall que ajuda a combater acessos mal intencionados e ataques de DDoS.

Indicamos a Cloudflare para essa questão. Além de ser uma das melhores CDN, é totalmente gratuito e atende muito bem sites de pequeno e grande porte. Verifique com a hospedagem do seu site, algumas delas já conta com um sistema de instalação automática do Cloudflare para o seu site. Caso não possua, você deve fazer a instalação manualmente.

Dica essencial: depois de instalado o serviço de CDN de sua preferência, volte as configurações do seu plugin de cache para fazer a integração com o mesmo.

Obs: ligado ao [P1] e [P4].

Check Bônus – Outras métricas importantes

Como tínhamos comentado no inicio, o Google não olha somente para as métricas LCP, FID e CLS. Existem outras menores e muito importantes que você deve implementar no seu site.

• Compatibilidade com dispositivos móveis: seu site precisa ser compatível com a exibição em celulares. Em outras palavras, o seu Tema WordPress precisa ser responsivo. Caso já use o Wolf WP, não precisa você se preocupar, pois ele é totalmente responsivo.
• Navegação segura: garanta que os usuários estejam seguros navegando no seu site, incluindo o suporte para a Lei LGPD. O status de navegação segura pode ser medido por aqui.
• HTTPS Secure: é uma forma segura de proteger a comunicação dos visitantes do seu site. Verifique com sua hospedagem se está devidamente configurado esse recurso.

Dica essencial: caso você tenha o Google Search Console integrado com o seu site, você pode monitorar o desempenho dessas métricas na opção de Experiência.

Google PageSpeed Insight

Vamos usar o PageSpeed Insight a partir de agora para entender como ele mede a pontuação do seu site. Ao analisar o seu site, você vai perceber que ele coloca uma nota que varia de 0 à 100 para cada uma das 3 principais métricas do Core Web Vitals. O resultado será algo semelhante a isso. Perceba que ele faz isso para 2 versões diferentes do seu site, uma para Mobile e outra para Desktop.

Caso o seu site não esteja com uma boa pontuação (entre 90 e 100 ), abaixo da página do PageSpeed vai conter os pontos de melhorias que você pode está corrigindo. Não fique fissurado em atingir a nota 100 como muitos usuários, pois muitos fatores (como o horário do teste) podem interferir.

Correções para as sugestões do PageSpeed Insight

O PageSpeed Insight pode lhe sugerir vários pontos de melhorias. Abaixo veremos as mais importantes e marcamos em negrito as que estão diretamente ligados ao seu Tema WordPress e que o Wolf WP 3.0 corrigiu:

• Afetam diretamente o índice de desempenho
  • Pré-carregue as principais solicitações – Tema [P6]
  • Reduza o tempo de resposta inicial do servidor
  • Elimine recursos que impedem a renderização – Tema [P6]
  • Reduza o JavaScript não usado – Tema [P6]
  • Reduza o CSS não usado – Tema [P6]
  • Adie imagens fora da tela – Tema [P6]
  • Disponibilize imagens em formatos de última geração

• Não afetam diretamente o índice de desempenho
  • Usa uma política de cache eficiente em recursos estáticos
  • Garanta que o texto continue visível durante o carregamento da webfont – Tema [P6]
  • Reduza o impacto de códigos de terceiros
  • Os elementos de imagem não têm width e height explícitas – Tema [P6]
  • Minimize o trabalho da thread principal
  • Reduza o tempo de execução de JavaScript
  • Evite DOM de tamanho excessivo
  • Mantenha as contagens de solicitações baixas e os tamanhos de transferência pequenos
  • Elemento de Maior exibição de conteúdo
  • Evite grandes mudanças no layout
  • Evitar tarefas longas da linha de execução principal
  • Evitar animações não compostas – Tema [P6]

Resultados dos Testes

Depois de fazermos vários testes com o PageSpeed Insight para alguns dos nossos sites, chegamos a resultados muito interessantes.

1. Usando o Wolf WP 3.0, os pontos que marcamos com um “Tema – [P6] são corrigidos.
2. Já os outros pontos, estão sendo causadas pelo o não cumprimento de alguns dos CHECK que não temos controle.
3. Mesmo que o Wolf WP corrija a sua parte, alguns dos pontos marcados com “Tema – [P6]” podem ainda continuar aparecendo, pois alguns dos plugins de terceiros testados também infligiram.
4. Mesmo que você não use o Wolf WP, ainda é possível atingir uma nota razoável (entre 60 e 70). Basta implementar todo o Checklist de recomendações que passamos aqui.

Vejamos mais alguns resultados:

Teste 1 – Antes de aplicar Checklist

• Site testado: https://www.demo.wolfwp.com.br/
• Hospedagem: VPS
• Versão do PHP: 7.3
• Versão do WordPress: 5.7.2
• Tema Usado: Wolf WP 2.9.1
• Quantidade de Plugins instalados: 13
• Plugin de cache em uso: nenhum
• Scripts Externos instalados: Sim
• Serviço de CDN em uso: Cloudflare
• Resultado para Mobile: 31 … Confira aqui!
• Resultado para Desktop: 94 … Confira aqui!

Teste 2 – Depois de aplicar Checklist

• Site testado: https://www.demo.wolfwp.com.br/
• Hospedagem: VPS
• Versão do PHP: 7.4
• Versão do WordPress: 5.7.2
• Tema Usado: Wolf WP 3.0
• Quantidade de Plugins instalados: 13
• Plugin de cache em uso: WP Rocket
• Scripts Externos instalados: Sim
• Serviço de CDN em uso: Cloudflare
• Resultado para Mobile: 97 … Confira aqui!
• Resultado para Desktop: 100 … Confira aqui!

Teste 3 – Depois de aplicar Checklist

• Site testado: https://www.francuelsoares.com.br/
• Hospedagem: Compartilhada – para ficar o mais próximo possível da realidade de muitos dos nossos clientes.
• Versão do PHP: 7.4
• Versão do WordPress: 5.7.2
• Tema Usado: Wolf WP 3.0
• Quantidade de Plugins instalados: 15
• Plugin de cache em uso: WP Rocket
• Scripts Externos instalados: Sim
• Serviço de CDN em uso: Cloudflare
• Resultado para Mobile: 97 à 100 … Confira aqui!
• Resultado para Desktop: 100 … Confira aqui!

Conclusão

Sabemos que esse Guia foi bastante extenso. Para lhe ajudar a fixar todos os conteúdos que foram apresentados, vejamos abaixo as conclusões chaves que podemos tirar.

1. Mesmo você usando um bom Tema Otimizado (como Wolf WP 3.0), algumas melhorias podem continuar aparecendo para o seu site. Isso porque a performance, otimização e qualidade de um site não depende somente do tema WordPress que você está usando, existem outros N fatores.
2. Com o Wolf WP 3.0 e seguindo a risca todas as recomendações do Checklist de boas práticas, já é possível ter uma boa pontuação (de 80 à 100) no PageSpeed Insight.
3. Você já pode usar o recurso de AMP junto com o Wolf WP sem precisar abrir mão do visual do seu site.

Esperamos que esse conteúdo possa ter lhe ajudado da melhor maneira. Aqui estão reunidas dicas bastantes valiosas e muitas horas de estudos e testes.

Compartilhe esse Guia com mais pessoas. Vamos fazer da Web um ambiente mais rápido e melhor!