12 dicas para melhorar performance do WordPress

Neste post vamos apresentar 12 dicas para melhorar performance do WordPress.

Constantemente vemos usuários do WordPress lutando com problemas de desempenho. Em muitos casos, não é difícil atingir velocidades mais rápidas. A maior parte das vezes isso se resume a escolher o conjunto de tecnologias certas e seguir as melhores práticas de otimização.

O Google usa o que eles chamam de  Core Web Vitals. A versão móvel do seu site obtém uma pontuação com base em uma combinação de coisas como a maior pintura com conteúdo ( LCP ), interação com a próxima pintura ( INP ) e mudança cumulativa de layout ( CLS ). Para simplificar, embora a quantidade de código e o tempo total de carregamento sempre importem para o desempenho, agora você também precisa considerar como seu site carrega o código.

Abaixo está uma lista de verificação de desempenho que montamos para economizar seu tempo! Todas as ferramentas e serviços mencionados são aqueles que apoiamos 100% e usamos em nossos sites. Se você tiver alguma dúvida, ficaremos felizes em respondê-la, seja ela relacionada ao nosso plugin ou não. Acreditamos que sites mais rápidos equivalem a uma web melhor para todos.

1. Invista em hospedagem WordPress gerenciada

Nada é mais importante do que o host WordPress que você escolhe para alimentar seus sites. Pense nisso como o motor de um carro. Você quer um Corvette ou um Prius? Sempre recomendamos  investir em hospedagem WordPress gerenciada . Esses tipos de hosts têm ambientes explicitamente ajustados para acelerar o WordPress. 

Usamos  Kinsta  para todos os nossos sites WordPress. Eles incluem PHP 8.3 (WordPress.org  recomenda PHP 7.4 ou superior ), um HTTP/3 CDN, monitoramento APM, proteção DDoS e WAF, mais de 37 localizações de servidores e as máquinas mais rápidas que o Google Cloud Platform tem a oferecer. Eles usam tecnologia de contêiner, o que significa que não há  recursos compartilhados . Cada site WordPress é completamente isolado em um contêiner e tem seu próprio Nginx, PHP, MySQL, etc.

Se você leva seu negócio ou blog a sério, vá com um host em que você pode confiar. Kinsta oferece desempenho de primeira linha e remove todo o estresse de gerenciar seus sites WordPress. Você pode se concentrar em fazer seu negócio crescer, em vez de se preocupar com tempo de inatividade ou erros 500.

Outras ótimas alternativas para hospedagem WordPress que focam em desempenho e têm excelente suporte prático são BigScoots , Rocket.net e InstaWP . Trabalhamos regularmente com esses provedores.

2. O cache é a chave

Você nunca alcançará as pontuações que deseja sem ter uma solução de cache adequada em vigor. Quando um usuário visita seu site pela primeira vez, o cache é criado e armazenado em seu servidor. Todos os acessos subsequentes ao seu site são entregues aos usuários do cache em velocidades extremamente rápidas .

Já viu aqueles avisos do Google “reduza o tempo de resposta inicial do servidor” ou “serve ativos estáticos com uma política de cache eficiente”? É isso que o cache corrige. Há duas maneiras de implementá-lo, no nível do servidor ou com um plugin do WordPress.

Um provedor de hospedagem como Kinsta tem cache em nível de servidor. Uma vantagem disso é que você nunca precisa se preocupar com plugins de cache. Caso contrário, recomendamos usar um plugin gratuito como  WP Fastest Cache , Super Page Cache ou  Cache Enabler . Um plugin premium como  WP Rocket  também funciona bem.

Outra dica é aumentar o tempo de expiração do seu cache. Em vez de a cada 24 horas, tente aumentá-lo para uma duração maior, como sete dias. Isso aumenta sua taxa de cache HIT, o que significa que mais usuários estão recebendo seu site do cache.

3. Um tema WordPress rápido é crucial

Seja um blog de alto tráfego, uma loja WooCommerce ou um site do Google AdSense, o  tema GeneratePress  é sempre nossa primeira recomendação. Ele é rápido, leve e garantirá que seu site sempre tenha uma aparência bonita. Usamos isso em todos os nossos sites WordPress, incluindo este. 

A melhor coisa sobre o GeneratePress são os desenvolvedores. Tom Usborne e sua equipe realmente se importam com o desempenho tanto quanto nós! Aqui estão alguns recursos principais que amamos no GeneratePress: 

• A instalação básica do GeneratePress obtém pontuação de 100/100 em dispositivos móveis com o Core Web Vitals.
• Cada arquivo carregado no GeneratePress é o menor possível (estamos falando de KBs).
• É um sistema modular, então recursos que você não precisa nunca executam nenhum código no seu site. Ele também usa CSS dinâmico. 
• Pronto para uso, ele usa ícones SVG simplificados em vez do Font Awesome (que são bem grandes).
• As fontes do sistema são padrão.
• Edição híbrida de site completo (FSE) e abordagem baseada em blocos. 
• 100% acessível, um aspecto importante muitas vezes esquecido.
• E a melhor parte, sem dependência do jQuery.

Combine o GeneratePress com o plugin GenerateBlocks e você terá uma solução poderosa de design de site que é amigável ao desempenho e à prova de futuro para o Google Core Web Vitals. Todo esse site foi construído usando blocos sem nenhum código adicional.

Você quer usar GeneratePress e GenerateBlocks, mas não tem tempo para fazer isso sozinho? Recomendamos entrar em contato com nossos amigos da  WP Boosters . Eles podem converter seu site e design existentes para GeneratePress + GenerateBlocks.

4. Use uma rede de distribuição de conteúdo

Uma Content Delivery Network (CDN) ajuda a acelerar seu site WordPress armazenando seus ativos e código (HTML, JS, CSS, imagens) em diferentes servidores de ponta (POPs) ao redor do mundo. Quando um usuário visita seu site, ele é entregue do cache no servidor de ponta fisicamente mais próximo. Vimos uma CDN  aumentar as velocidades em até 68% !

Recomendamos duas abordagens diferentes:

1. Cloudflare  com Otimização Automática de Plataforma (APO). O Cloudflare fica entre seu site e a internet e entrega cache de página inteira de seus servidores de ponta. Isso resulta em baixo TTFB e tempo de resposta do servidor. Essa abordagem armazena em cache HTML, JS, CSS e imagens. A Kinsta na verdade inclui isso ( cache de ponta ) gratuitamente para todos os seus clientes.
2. CDN tradicional, como  KeyCDN . Pense nisso como um complemento para seu site, normalmente com um subdomínio como cdn.domain.com.  O recurso de reescrita de CDN do Perfmatters  torna a conexão de um CDN tradicional ao seu site WordPress rápida e fácil. Essa abordagem armazena em cache JS, CSS e imagens. 

5. Otimização de imagem (compressão, WebP, carregamento lento)

As imagens compõem em média 48% do peso da página de um site inteiro em dispositivos móveis. É por isso que a otimização de imagens é algo que você não pode ignorar.

Primeiro, você precisa  compactar suas imagens  para reduzir o tamanho do arquivo. Recomendamos usar o plugin ShortPixel ou Imagify . A compactação automática com perdas garante o equilíbrio perfeito entre qualidade e tamanho. É melhor manter as imagens abaixo de 100 KB , especialmente para dispositivos móveis. Se você precisar ajustar uma imagem manualmente, a ferramenta gratuita Squoosh do Google funciona muito bem. Ou o SVG Viewer para otimizar SVGs (ícones e logotipos).

Segundo, você precisa converter suas imagens para WebP, um formato de arquivo criado pelo Google que agora é  suportado por todos os navegadores modernos . Em nossos testes, .webpos arquivos são em média  59% menores  que os arquivos PNG ou JPG. Isso resolverá o aviso “servir imagens em formatos de última geração” do Google. Novamente, o ShortPixel pode fazer isso para você automaticamente. Você pode levar isso ainda mais longe com o formato AVIF mais novo.

Terceiro, você deve carregar suas imagens de forma preguiçosa para que apenas as imagens dentro da janela de visualização sejam baixadas imediatamente. Em nossos próprios testes,  habilitar o carregamento preguiçoso nos deu um aumento de velocidade de 33% . Quanto mais mídia você tiver, mais benefícios você colherá. Isso também resolve o aviso do Google para “adiar imagens fora da tela”.

O Perfmatters tem quatro opções diferentes  de carregamento lento  que você pode habilitar:

• Imagens de carregamento lento (suporte WebP).
• Iframes de carregamento lento (YouTube, Vimeo, etc.).
• Troque iframes por miniaturas de visualização e ícones de reprodução SVG que carregam o vídeo com um clique.
• Monitoramento DOM.

Quarto, você pode reduzir o Cumulative Layout Shift (CLS) adicionando automaticamente atributos de largura e altura ausentes às suas imagens. Por fim, você pode pré-carregar automaticamente imagens críticas ou utilizar a prioridade de busca para ajudar a diminuir o Largest Contentful Paint (LCP).

6. Banco de dados e espaço em disco

Com o tempo, coisas como revisões, comentários de spam, transientes, rascunhos automáticos e até mesmo lixo começam a acumular espaço desperdiçado no seu banco de dados. Há uma tabela, wp_options, que pode fazer seu site ficar lento se ele ficar muito grande. Já vimos isso mais vezes do que podemos contar.

Assim como você troca o óleo do seu carro, você também deve  otimizar regularmente seu banco de dados . Nosso plugin Perfmatters torna isso rápido e fácil com as seguintes opções:

• Excluir revisões  (postagens, páginas e tipos de postagens personalizadas).
• Exclua comentários de spam do WordPress  de uma só vez.
• Limpe o lixo  de comentários e postagens.
• Exclua rascunhos automáticos antigos  salvos quando você estiver editando conteúdo.
• Exclua transientes expirados  e mantenha sua wp_optionstabela limpa.
• Otimize suas tabelas de banco de dados  para recuperar espaço não utilizado.

Você pode até  automatizar a otimização  se quiser, diariamente, semanalmente ou mensalmente. E depois de limpar seu banco de dados, é importante estabelecer limites para o futuro. Por exemplo,  desabilitar ou limitar revisões de post . Isso ajuda a garantir um banco de dados saudável.

Também recomendamos que você exclua imagens antigas e não utilizadas da sua biblioteca de mídia. Se o seu site já existe há algum tempo, é provável que você tenha muitas delas. O  plugin gratuito Media Cleaner  faz um ótimo trabalho nisso! 

Também é importante que você faça uma desinstalação limpa ao remover um plugin (veja a documentação do desenvolvedor). Caso contrário, ele pode deixar lixo no seu banco de dados que não precisa estar lá. Você pode  limpar as tabelas do banco de dados  manualmente, se necessário. O plugin gratuito AAA Option Optimizer também é uma ótima maneira de limpar opções carregadas automaticamente.

7. Use fontes da web com moderação

As fontes da Web compõem em média 6% do peso geral de uma página da Web em dispositivos móveis. Elas afetam seu tempo de carregamento e como sua página é renderizada. Muitos sites usam mais fontes do que precisam. Escolha algumas variações de peso diferentes, normal, negrito, etc. Isso manterá o tamanho baixo. Além disso, o WOFF 2 é suportado por mais de 97% de todos os navegadores ( fonte ).

Sempre hospede fontes da web em seu próprio servidor ou CDN. Todo navegador moderno mudou para particionamento de cache HTTP. Isso significa que as fontes serão baixadas novamente para cada site, independentemente de as fontes estarem armazenadas em cache no navegador do usuário. Então, aproveite menos solicitações de DNS e os cabeçalhos de cache do seu servidor.

Para o Google Fonts, recomendamos usar nosso recurso local do Google Fontsswap . Você pode adicionar automaticamente para o  font-display e hospedar suas fontes localmente. Se você estiver adicionando-as manualmente,  pré-carregue suas fontes  com o Perfmatters. Essas otimizações resolverão o aviso “todo o texto permanece visível durante o carregamento de webfonts” do Google.

Grandes marcas como GitHub, Medium, Ghost e até mesmo o seu painel de administração do WordPress usam “fontes do sistema”. Isso significa que elas utilizam as fontes do seu computador. Alguns anos atrás, isso não teria uma aparência muito boa. Mas com os sistemas operacionais mais novos de hoje, todas elas têm fontes de aparência mais bonita pré-instaladas.

Ao usar fontes do sistema, não há necessidade de carregar nenhuma fonte. Isso é bem grande! Ele se livra de qualquer  feiura FOUT  (flash of unstyled text) ou  FOIT  (flash of invisible text). E a melhor parte é que você nunca precisa se preocupar com avisos de bloqueio de renderização do Google porque não há nenhum.

Você sabia que este site usa uma pilha de fontes do sistema? Você provavelmente nem percebeu. Isso mesmo; este site não carrega uma única fonte . Confira este tutorial sobre como  mover para uma pilha de fontes do sistema no WordPress . Se você estiver usando um tema recomendado como  GeneratePress , isso é apenas um clique simples.

8. Use apenas os ícones de fonte que você precisa

O Font Awesome é incrível, e milhões de sites o usam para exibir os ícones que você vê na web diariamente. No entanto, uma implementação comum e falha por plugins e temas é que eles carregam toda a biblioteca de ícones de fontes em todo o seu site. 

A melhor maneira de abordar o Font Awesome em termos de desempenho é empacotar apenas os ícones que você realmente está usando no seu site. Confira este ótimo tutorial sobre  como hospedar ícones de fonte localmente (apenas os que você precisa) . Vimos isso reduzir o tamanho total de 100 KB para menos de 5 KB.

Ou você pode ir com uma solução ainda melhor. Se você estiver usando um plugin recomendado como  GenerateBlocks , você pode colar o código SVG de qualquer ícone que você quiser no WordPress Block Editor. Isso é incrível! Não precisa se preocupar em empacotar pacotes de ícones. Você pode  facilmente adicionar apenas os ícones que você precisa  com alguns cliques.

9. Otimização de CSS e JS

Infelizmente, muitos plugins e temas do WordPress não são desenvolvidos com desempenho em mente. Eles simplesmente adicionam tantos recursos quanto podem para aumentar seus lucros. Por causa disso, muitos carregam scripts (CSS e JS) em todo o seu site sem criar estratégias de como fazer isso de forma diferente. 

Um plugin só deve enfileirar um script se ele for realmente usado na página. (fonte: Google )

Desabilitar scripts que não são necessários

É exatamente por isso que construímos nosso robusto  Script Manager  no Perfmatters. Isso permite que você  desabilite facilmente scripts e plugins de carregar por post/página ou em todo o site com um clique de um botão.

Um caso de uso comum é um plugin de formulário de contato. Com dois cliques, você pode desabilitá-lo em todos os lugares, exceto na sua página de contato. Outro caso de uso é um plugin de mídia social. Na maioria das vezes, você só o carrega em suas postagens de blog. Isso é fácil de fazer com o Script Manager.

Com  o modo Regex  e  MU , você pode desabilitar praticamente qualquer combinação de scripts. Isso inclui desabilitar plugins completamente (consultas MySQL) e seus CSS/JS inline. Fazer isso ajudará a resolver avisos do Google, como “eliminar recursos de bloqueio de renderização”, “remover JavaScript não utilizado” e “remover CSS não utilizado”.

O melhor do Script Manager é que ele não faz nenhuma alteração permanente. Se algo parecer estranho, você pode simplesmente ligá-lo novamente. Há até um modo de teste para que você possa verificar as coisas antes de aplicar qualquer configuração.

Hospedar o Google Analytics localmente

O Google Analytics ironicamente tem seu próprio conjunto de problemas de desempenho. Ele gera solicitações adicionais de terceiros e usa um tempo de expiração de cache curto. Você pode consertar isso hospedando seu script do Google Analytics localmente com o Perfmatters. 

Temos algumas implementações diferentes que você pode escolher, como análise mínima, Google Analytics 4 ou nossa integração com o MonsterInsights. 

Adiar JavaScript

Outra maneira de acelerar a pintura de uma página é adiar todo JavaScript não crítico. Ao adicionar um atributo defer em cada arquivo, os scripts carregam depois que o resto da página foi carregado. Você pode facilmente  adiar o JavaScript  no Perfmatters. 

Atraso JavaScript

Outra técnica que você pode usar é atrasar o carregamento do JavaScript até a interação do usuário. Esta é uma maneira fácil de acelerar a pintura da página para Core Web Vitals. Especialmente para scripts grandes de terceiros, como Google Tag Manager, Google AdSense, pixels de conversão (FB, Google Ads), etc.

Se você tem uma loja WooCommerce, essa também é uma maneira rápida de corrigir o problema de fragmentos de carrinho. 

Minimize JavaScript e CSS

Você pode minificar automaticamente JavaScript e CSS no Perfmatters. Este é o processo de remover caracteres desnecessários do seu código (espaços em branco, comentários, encurtamento de nomes de funções e variáveis, etc.), junto com limpeza de marcação adicional. Ele reduz o tamanho geral do arquivo e acelera os tempos de carregamento.

Remover CSS não utilizado

O aviso de redução de CSS não utilizado é acionado pelo PageSpeed ​​Insights quando você tem um código sendo carregado por um plugin ou seu tema que não é necessário ou usado em uma página. Os desenvolvedores normalmente só enfileiram uma folha de estilo se ela estiver sendo usada. No entanto, muitas vezes, estilos extras que podem não ser necessários também são adicionados. Isso resulta em muito CSS não utilizado, o que torna seu site WordPress lento. Também pode acionar avisos de bloqueio de renderização. Você pode  remover automaticamente CSS não utilizado  no Perfmatters.

Carregue CSS/JS personalizado somente onde for necessário

Tem um código personalizado que precisa adicionar para uma parte específica do seu site ou tipo de postagem? É aqui que o tema GeneratePress vem ao resgate com ganchos. Crie um gancho, adicione seu CSS ou JS personalizado e selecione onde deseja que ele seja carregado. Esta é a maneira mais otimizada de carregar código personalizado e evita avisos de “CSS/JS não utilizados” do Google.

9. Plugins e dicas recomendados

Infelizmente, com mais de 60.000 plugins no repositório do WordPress e muitos outros plugins premium, há simplesmente muitos ruins por aí. Muitos não se importam com desempenho. O número de plugins que você usa não é tão importante quanto o quão bem eles são codificados.

A boa notícia é que há desenvolvedores por aí que se importam com desempenho. Aqui estão alguns plugins que usamos e que recomendamos fortemente:

• GenerateBlocks : Livre-se dos construtores de páginas pesados ​​e aproveite os blocos! Todo o nosso site é construído com blocos.
• Antispam Bee : proteção leve contra spam do jeito que deve ser. Em conformidade com o GDPR.
• Fluent Forms : Construtor de formulários de contato leve e poderoso. Usamos isso em nosso site.
• WPCode : maneira fácil, rápida e com bom desempenho de adicionar trechos de código PHP ao seu site
• The SEO Framework : plugin de SEO leve e otimizado para velocidade, sem publicidade ou recursos desnecessários.
• Segurança de login do Wordfence : plugin simplificado e gratuito para autenticação de dois fatores.
• Novashare : Nosso próprio plugin de compartilhamento social desenvolvido do zero com desempenho em mente. UI fácil, contagens de compartilhamento e sem inchaço.
• Lightbox para galeria e bloco de imagens : se você não consegue viver sem um, este plugin aproveita os blocos nativos do WordPress, tem apenas 3,7 KB de JS e não tem dependência do jQuery.

Dicas de desempenho #

Trabalhando com clientes diariamente, já vimos quase tudo. Aqui estão algumas dicas e sugestões para colocá-lo no caminho rápido para um site WordPress que o Google vai adorar:

• Evite redirecionamentos a todo custo. Se precisar adicionar um redirecionamento, faça-o no nível do servidor. Provedores de hospedagem como Kinsta facilitam isso com sua ferramenta de redirecionamentos no MyKinsta.
• Abandone seus controles deslizantes e use um cabeçalho estático para evitar mudanças de layout (CLS) e excesso de volume.
• Não use animações se não for necessário, especialmente com construtores de páginas como o Elementor. Eles aumentam o tempo de CPU, JS e renderização. Isso aumenta muito rápido. Por exemplo, vimos animações de Lottie ou GSAP acima da dobra derrubarem uma pontuação móvel em mais de 15 pontos. Usar elementos estáticos é sempre o melhor para o desempenho. 
• Se você estiver usando vídeos em um slider, é sempre melhor carregá-los diretamente e servi-los de um CDN. Confira estas dicas de otimização de vídeo .
• Não use o Google AMP. Concentre-se em tornar seu site responsivo mais rápido e não se prenda a um ecossistema onde você tem menos controle. A partir de 2021, o Google não dá mais tratamento preferencial para aqueles que o usam ( fonte ), e os símbolos AMP não são mais exibidos em SERPs. Veja como  desabilitar o AMP com segurança . 
• O Google reCAPTCHA é um assassino de desempenho. É melhor usar uma solução honeypot ou Cloudflare Turnstile. Confira essas ótimas alternativas gratuitas ao reCAPTCHA .
• Se você estiver usando o Cloudflare, desative o Rocket Loader e a Ofuscação de Endereço de E-mail. 
• Em sites WooCommerce, desative o rastreamento de uso para remover a solicitação stats.wp.com.
• Carregue seus Gravatars do seu CDN e carregue-os lentamente.
• Não carregue o Google Maps em todos os lugares. Você pode usar nosso plugin Perfmatters para desabilitar o Google Maps onde ele não deveria estar carregando. Ou seja criativo e use uma imagem. 
• Não carregue bibliotecas como jQuery de um CDN que não seja o seu. Devido à privacidade do navegador e ao particionamento do cache HTTP, não há mais benefícios com isso.

10. Não se esqueça do desempenho percebido

Desempenho percebido é o quão rápido seu site parece para um usuário . Infelizmente, isso é frequentemente negligenciado quando se trata de otimização. Nem sempre se trata de perseguir melhores notas e pontuações. Seu site WordPress deve realmente parecer rápido, e isso nem sempre se alinha com ferramentas de teste de velocidade.

O recurso Instant Page no Perfmatters é todo sobre desempenho percebido! Ele permite que você pré-busque URLs automaticamente em segundo plano depois que um usuário passa o mouse sobre um link. Isso resulta em tempos de carregamento quase instantâneos, ao mesmo tempo em que melhora a experiência do usuário.

11. Converta o site ou obtenha uma auditoria de desempenho

Se você seguiu nossa lista de verificação e entrou em contato com nosso suporte, mas ainda não está satisfeito com suas velocidades, aqui está o que recomendamos.

12. Converta seu site para GeneratePress + GenerateBlocks

Primeiro, se você estiver usando um tema ou construtor de páginas inchado, sempre recomendamos mudar para um tema leve como o GeneratePress (junto com o GenerateBlocks). A base de código deles é superleve e desenvolvida do zero com desempenho em mente. Às vezes, você precisa consertar a camada base do seu site, e então todo o resto se encaixará. Se você não tem tempo para fazer isso sozinho, recomendamos entrar em contato com nossos amigos da WP Boosters ou OGAL Web Design . Eles podem converter seu site e design existentes para GeneratePress + GenerateBlocks .

Obtenha uma auditoria de desempenho da web

Se você precisar ir ainda mais longe, a segunda coisa seria obter uma auditoria de desempenho da web . Isso significa mergulhar fundo em cada aspecto do seu site. Um dia, provavelmente ofereceremos esse serviço, mas agora, estamos focados em tornar o plugin Perfmatters o melhor que ele pode ser! Recomendamos fortemente os seguintes contratados/serviços.

Mike Andreason

Mike Andreasen é um especialista qualificado em Codeable com foco em otimização de desempenho. Ele concluiu mais de 1.500 projetos. Nós pessoalmente garantimos seu trabalho, pois temos gráficos, testes de velocidade e dados de clientes reais para respaldá-lo!

Acelerar

Accelera é da mesma equipe por trás do ShortPixel, uma excelente tecnologia de otimização de imagem usada em mais de 1 milhão de sites WordPress. Eles oferecem uma avaliação de otimização de velocidade do WordPress . Obtenha um relatório de desempenho do seu site, plugins e banco de dados.

Codificável

A Codeable conecta você com desenvolvedores talentosos do WordPress que podem ajudar você a otimizar ainda mais seu site. Você pode até mesmo pedir por aqueles especificamente experientes usando nosso plugin Perfmatters.

Pronto para acelerar seu site WordPress? Pegue o plugin Perfmatters hoje mesmo e comece. Se tiver alguma dúvida, envie-nos uma mensagem. Estamos sempre felizes em ajudar.