Post Atualizado em 21 de maio de 2024
Tabela de Conteúdo: Otimização WP
Precisa melhorar a velocidade do seu Site? Como Otimizar meu Site Wordpress?
Já tive muito problema com site Wordpress lento, mas depois de muito estudo e testes, consegui finalmente chegar ao padrão “verdinho” de velocidade de um site Wordpress otimizado. GT Metrix e Pagespeed 90+/B.
Com o passo a passo descrito abaixo, com certeza você conseguirá deixar seu site mil vezes mais rápido e leve.
Vamos lá?
1 – Otimizar Hospedagem.
Antes de iniciarmos os pontos da hospedagem, temos que apresentar um contexto sobre a própria hospedagem.
O Tipo e as Configurações da sua Hospedagem, pesam MUITO sobre o desempenho do seu site.
Hospedagens compartilhadas geralmente vivem com uma certa instabilidade pelo fato de compartilhar recursos entre os sites hospedados, se um tiver muitas visitas, todos os sites de lá “sofrem” e se as configurações técnicas não forem boas, você terá dois pontos negativos, resultantes em em pouca potência.
Verifique, por exemplo os seguintes pontos das hospedagens:
— Tipo de Hospedagem:
Procure por Hospedagens que sejam no mínimo com recursos ISOLADOS, pois aqui o que o plano oferece é o que você tem para usar, só irá sobrecarregar caso, aconteça de ter inúmeros visitas e se as especificações do servidor forem fracas.
— Localização do Servidor:
Recomendamos que você olhe e pergunte, onde fica o servidor, quanto mais longe, pior. Hospedagens em outros países tem um atraso maior no TTFB (Tempo de Resposta entre usuário e servidor de Origem), não é ruim, mas é relevante sobre a velocidade.
— Memória RAM e Processador:
A combinação que também Influência no desempenho, hoje em dia é preciso que se tenha por uma recomendação nossa, 2 núcleos de processamento + 3/4 GB de RAM isolado por conta, do contrário em casos de muitas visitas e sites mal otimizados você e seus visitantes vão sentir negativamente.
— Existem outros pontos:
Mas a princípio será o suficiente para acelerar seu site Wordpress e também para não ter dores de cabeça quanto a isso, aqui na WEBTOM oferecemos um serviço de Hospedagem para Sites Wordpress com ótimos recursos, confira!
1.1 – Ajustes no Servidor.
— Módulos PHP
O módulo BROTLI, faz a compressão do site, para diminuir o tamanho de “armazenamento” do site, deixe o habilitado.
O módulo REDIS, tem o papel em uma função de cache, sendo o cache de objetos, mas a hospedagem precisa aceitar isso, verifique com o suporte da sua Hospedagem.
— Informações do PHP.INI
Altere os tamanhos das informações deste documento para as seguintes:
max_execution_time: 90 ou 300
max_input_time: 300
memory_limit: 512 ou 1024 MB
zlib.output_compression: Habilitado
Dessa maneira o seu WordPress terá um tempo de trabalho melhor/maior sem apresentar erros e mais memória para trabalhar, coisas que alguns plugins até exigem.
2 – Ajustes no Painel WP.
— Limpeza:
Não tem como otimizar um site Wordpress sem e boa e velha limpeza.
Remova Temas e Fotos que não estão sendo usadas, isso contribui para um aumento da memória total do seu site WordPress.
— Atualização das Ferramentas:
Atualize os Plugins, Temas, Core do Wordpress e o PHP.
Estes pontos precisam ser revisados, pois aqui geralmente pode acontecer do seu site quebrar, saiba que o ideal é criar um Backup antes e Fazer testes em um ambiente próprio para os testes.
Mas para te auxiliar a se situar, deixaremos aqui alguns pontos:
- Atualize primeiro o core do Wordpress.
- Segundo atualize os Plugins mais simples. (LGPD, cookies, addons, email, smtp)
- Terceiro atualize os Plugins mais “responsáveis”. (Elementor, woocommerce,Divi)
- Quarto atualize o Tema.
- Por fim, atualize o PHP. (Recomendamos sempre deixar em uma versão anterior a atual. EX: Estamos na 8.3 deixe na 8.1).
Caso queira saber mais sobre o processo de atualização de itens do Wordpress, veja nossa página de Atualização de Ferrramentas do WordPress.
— Otimize o Gravatar:
Substitua o Gravatar (imagem que aparece como “foto” das pessoas no comentário) por uma Imagem pequena e de baixa qualidade, para evitar que seu site precise carregar ele em uma imagem maior.
Só vale a pena seguir com essa alteração em casos de Blog com muitos comentários, caso o seu seja, instale o WP User Avatar que habilitará a opção de alterar o Gravatar que fica em “Discussão” em configurações.
— Otimize o Menu:
Tente Trocar o Menu que geralmente se usa dos Construtores de Sites por um do Próprio tema caso seu tema ofereça um. O do Elementor é um pouco mais pesado.
– Desative trackbacks ou pingbacks:
Estas informações ficam rodando em segundo plano e mesmo que pouco afetam o desempenho, ainda mais por não terem tanta utilidade.
Vá em Configurações > Discussão e desative as duas priemiras caixas, Tentar notificar qualquer blog linkado a partir do post e Permitir avisos de links de outros blogs (pingbacks ou trackbacks) em novos posts.
3 – Otimizar o Elementor.
O Elementor é o melhor construtor de páginas atualmente, porém o mais pesado. Mas ao longo do tempo a própria equipe faz um trabalho de melhoria neste ponto, adicionando funções de desempenho.
Então é importante para nós que usamos, darmos atenção e ativar os pontos onde se podem trabalhar essa otimização dentro do Elementor. E quais são?
— Aba Configurações > Experimentos:
Ative as seguintes opções: *Uma por uma e ao longo do procedimento, ir testando o site.
Carregamento melhorado de CSS
Ícones da fonte inline (Neste verifique o ícone do site, pode acontecer de quebrar)
Imagens com carregamento gradual.
– Atualização do Elementor:
Em 2024 a equipe do plugin de Design Elementor, atualizou as funcionalidades do plugin e nos trouxe algo muito legal, que é o fato de que agora os elementos só serão carregados se estiverem na página, coisa que antes não acontecia.
Por si só a atualização do plugin para versões do ano de 2024 já virão com estes ajustes, atualize o do seu site.
Mas ainda assim o Elementor adiciona muitos códigos ao seu site, considere também usar temas com funções para ajustes de layout ou usar o Gutemberg para sites mais leves.
3.1 – Otimizar o Tema.
Alguns temas oferecem um breve otimização para velocidade também, Astra, Woodmart e geralmente temas pagos, também vale ativar coisas como, carregar as fontes localmente que é o que vários deles oferecem. Teste com elas desativadas e ativadas, veja qual o melhor cenário.
Visite a aba “Aparência” > Desempenho para ver o que o seu tema oferece.
Pensando em velocidade recomendamos que use a combinação de Astra Theme, Woodmart ou Generate Press com o Gutemberg.
4 – Ajustes na estrutura do Site.
Muitos não se atentam na hora da construção do site e acabam colocando códigos de mais através da inserção de widgets “inúteis”, redimensionamento de imagens sem necessidade e colunas “inúteis”.
— Widgets:
Widgets de espaçamento são um bom exemplo, o melhor caso é substituir pelo “padding” do próprio elemento, da coluna ou da seção.
— Evitar redimensionar as imagens:
Quando você redimensiona uma imagem no próprio elementor ou editor de blocos Gutemberg, o editar adiciona um código adicional no site, um CSS responsável por mudar o tamanho da foto em questão, o ponto é que isso é geralmente feito em várias dessas fotos, aumentando o trabalho.
Inclusive pode ser o motivo pelo qual o teu site no Mobile tem uma nota bem pior do que no Desktop, pois lá praticamente tudo é redimensionado por código.
— Colunas:
Também por comodidade temos o hábito de colocar uma coluna para cada widget. Ex: quatro fotos = 4 Colunas uma foto em cada coluna, quando geralmente podemos definir o tamanho das fotos na aba “avançada” de cada um dos widgets de foto em 25 e colocar em uma coluna só.
25 × 4 = 100 que é o tamanho total da coluna e 25 de tamanho para cada uma das fotos.
– Utilize o Flexbox:
Essa estrutura mais recente do elementor acaba tento menos código que o Grid que conhecemos, logo com ele teremos um DOM menor por exemplo.
5 – Remoção de Animações.
Elas deixam o site mais bonito, intuitivo e podem melhorar a experiência do usuário.
Mas podem atrapalhar também, quando são usadas de maneira excessiva e sem justificativa, afeta desempenho e a experiência do usuário, as vezes ficam espaços em branco na estrutura e mesmo assim carregam os arquivos JS das animações.
Deixe somente em pontos que fazem sentido e não em tudo, mas certamente é bom diminuir a quantidade deles.
Precisa de um Serviço de Otimização no seu Site?
Entre em CONTATO conosco caso não saiba como otimizar seu site Wordpress, podemos te ajudar!
6 – Análise de Plugins “inúteis”.
Plugins inúteis são os Plugins que estão instalados e desativados no seu site, eles aumentam o tamanho do armazenamento e dos códigos.
Outros são os Plugins que podem ser substituídos por funções que às vezes os temas, ou os construtores de páginas oferecem. Neste ponto só uma análise mesmo para resolver.
Ex: Plugin de rolar ao topo, alguns temas tem a função. Como o astra pro.
Ex2: Plugin de Lgpd simples, podem ser substituídos por um pop up fixo do Elementor.
7 – Limpeza do Banco de dados.
Ponto muito importante sobre como otimizar um site WordPress, mas que passa batido por não ser nada tão a vista.
Recomendamos que se faça um backup aqui.
Recomendamos também, o uso do plugin “wp optimize” (Baixe ele clicando aqui) que permite uma limpeza mais afundo do banco de dados, com ele você consegue limpar dados que ficam dos plugins que não estão mais instalados no seu site.
Ele os acusa e oferece a opção de excluir, e só fica a opção de excluir para os dados de plugins que não existem mais no seu projeto, ou seja, é mais “seguro”.
Segue o Vídeo, mas façam um Backup antes.
8 – Configuração do Plugin de Cache.
Primeiro ponto é escolher o plugin, vamos a princípio de Litespeed Cache que a meu ver é o melhor plugin para otimizar um site Wordpress:
*Vi relatos de problemas entre o plugin Litespeed Cache e o Tema ListingPro para criação de classificados, caso tenha esse Tema, use outro Plugin de cache.
Litespeed:
O plugin que usamos por conta de também usarmos servidores Litespeed e também o que consideramos a alma de como otimizar um site Wordpress.
— Aba General do Litespeed:
Habilitadas o Guest Mode e Guest Optimization: Eles entregam uma versão do site mais crua em um “primeira carregada” após essa primeira ele “recarrega” o site uma segunda vez de maneira complementar e definitiva. *”O site dá uma leve piscada com isso habilitado”
— Aba Cache:
Pontos Importantes:
Porque Desabilitar o Cache Logged-in Users e o Cache Commenters?
Cache Logged-in Users pode apresentar conteúdo incorreto, cacheado e afetar sua experiência de uso, e é um pouco “perigoso” habilitar cache em áreas de Login.
Cache Commenters faz o site pesar um pouco dependendo da quantidade de comentários na página.
Atualizaremos em Breve o Post com uma boa Dica para otimizar comentários em Sites/Blogs.
— Aba Page Optimization:
Pontos Importantes:
UCSS Inline — CSS Combine External and Inline — Load CSS Asynchronously — CCSS Per URL — Inline CSS Async Lib. Desligados, pois aqui nestes pontos ocorrem muitos problemas com FOUC e adiciona muita coisa ao arquivo de carregamento do Litespeed cache.
Pode até se testar o Inline CSS Async Lib.
Aqui pode ser ou com a combinação acima ou só habilite os 2 primeiros, pode ser melhor dependendo do seu site tema ou estrutura.
Caso seu TBT seja alto, recomendamos que desabilite a Combine CSS.
— Aba TTL:
Aqui os itens vêm preenchidos por padrão com Números, caso você tenha questões complexas em seu site como, por exemplo, um Woocommerce, apague todos os números e deixe zerados.
Esse TTL pode cachear coisas que não deveriam ser cacheadas, como carrinho e dados de Login, portanto, tem Woocommerce DESATIVE.
Agora, se tiver um site Institucional pode deixar habilitado, eu particularmente desativo, prefiro o site carregando do zero os pontos mais dinâmicos e o cache ser feito da parte estática apenas.
— Aba Purge Settings:
Mantenha Tudo desabilitado, aqui as funções consomem recursos da hospedagem.
— Aba Object Cache:
Aqui teste com o “Store transients” ligado e desligado, pois se seu site tem um banco de dados já com um tamanho grande pode ser prejudicial.
— Aba Browser Cache Settings:
Aqui sem observações, habilitado o necessário.
— Aba JS Settings:
Pontos Importantes:
Não recomendamos habilitar o JS Combine External and Inline, pois ele pode quebrar seus Recaptchas, por exemplo, ou deixar sem tradução Códigos Externos dentro do seu site.
Não recomendamos habilitar o Load JS Deferred, pois ele faz com que seu site ou alguns elementos não consigam ser carregados, a ideia era carregar após a interação do usuário, mas às vezes não responde e quando é o mais agressivo, afeta a experiência do usuário.
Caso seu TBT seja alto, recomendamos que desabilite a Combine JS.
— Aba HTML Settings:
A minificação HTML pode quebrar coisas do layout como tirar espaçamentos por exemplo, caso tenha alguma coisa que você vê no Elementor/Editor de um jeito e no navegador de outro DESABILITE o primeiro item, assim como o Cache de gravatar, que já vamos citar.
— Aba Media Settings:
Pontos Importantes:
Caso você tenha problemas com o Mapa do seu Site, Desabilite o item Lazy Load Iframes.
— Aba Localization:
Caso tenha erros de design/layout desabilite os 2 primeiros itens.
Localize resource, pode afetar a coleta de dados do seu site ou o sistema de análise de métricas caso você habilite e adicione seus códigos, atualmente recomendo NÃO habilitar, mas teste.
— Limpar Cache Wordpress:
Na barra adm do Wordpress, existe a opção de limpar o cache dos pontos do Wordpress pelo ícone do Litespeed.
Use os Purge all – LSCache e o Purge All Cloudflare sempre após modificações.
O Purge all CCSS e UCSS, só será necessário caso você tenha habilitado ele em CSS.
— Finalizar o Litespeed.
Existem mais configurações dentro do plugin, mas o ideal é que se tenham estas habilitadas e configuradas.
9 – Otimização das imagens pt1.
E como otimizar imagens no WordPress?
Procedimento feito ANTES das imagens serem upadas para o seu site, pois precisamos fazer duas coisas aqui:
— Corrigir a Dimensão da Imagem:
É mensurar o tamanho do arquivo que você está criando para poder depois subir essa imagem em um tamanho próximo do que o que ele possivelmente ficará na página.
É medir e subir do mesmo tamanho. Ressaltamos um ponto das imagens no tópico 4 e vamos te relembrar, evite redimensionar imagens manualmente.
— A compressão Prévia dos elementos:
É de extrema importância que você use pelo menos um Compressor de Imagens antes de enviar os arquivos para o site, existem vários programas e sites que fazem isso, nós aqui utilizamos o Squoosh.
9.1 – Otimização das imagens pt2.
- O plugin Litespeed cache oferece um sistema de conversão de fotos para Webp, portanto habilite o do plugin e assim, você pode evitar asicionar mais um plugin ao seu site como o citado abaixo.
Aqui fico por conta do Plugin, no caso o WEBP Express, que faz a conversão das imagens para o formato Webp, sendo um dos melhores em questão de velocidade.
Então é bom por padrão ter ele e lembre se de configura-lo corretamente:
— Aba Alter HTML
10 – Plugin de Otimização final.
Recomendamos que todos os sites tenham 2 Plugins voltados para Desempenho, porém não de um mesmo nível. Aqui juntamos o Litespeed Cache com o Perfmatters que é a cereja do bolo de como otimizar um site Wordpress.
Não cruze informações e não habilite coisas iguais neles, você pode ter problemas com isso.
*Detalhe, o plugin perfmatters é pago, então ou você pode comprar direto no site, ou via GPL.
E quais os pontos onde ele pode ajudar por exemplo:
— Diminuir a quantidade de JS da sua Home ou do seu Site:
Vários Plugins deixam o código carregado por padrão em todo o site, uma questão às vezes desnecessárias, por exemplo:
O plugin “Calculo de Frete na página do produto” muito famoso para Woocommerce, carrega o código, pelo menos até hoje, em todo o site. E é um plugin que é somente usado na página do produto, ou seja, você pode desativar ele na Home.
Como Desativar no Perfmatters?
— a) Habilite o Gerenciador:
— b) Acesse:
— c) Faça a análise e desative:
Recomendação é apenas desabilitar o que você tem certeza que não é usada em tal página, daí pode desabilitar o plugin todo.
Outro Detalhe é que se você desabilitar um plugin na home ele só desabilita nela, e continuará na página Contato, por exemplo, que também pode ser uma página inútil para o plugin, até que você vá lá em Contato e gerencie os Scripts também para desabilitar.
— Pré Carregar código do Analytics
O Código do Analytics afeta um pouquinho o Desempenho do seu site, porém não muito. Mas é bom deixar otimizado, o Perfmatters oferece a função para otimizar o carregamento dele na sua página, ou seja, seu site não sente todo o impacto que ele geralmente causa.
— Mais Algumas Otimizações
Desativar Emojis: Remove o JavaScript carregado pelos emojis do WordPress.
Desativar Dashcons: Desabilita a fonte de ícones no painel do WP.
Desativar o XML-RPC: Recomendado por ser algo usado como Brecha de Segurança. E não faz falta hoje em dia por ter mais coisas ruins do que boas. Caso queira saber sobre, clique aqui.
Remover JQuery Migrate: Ligue se estiver usando um Construtor de Página, que geralmente é sim.
Ocultar Versão do WP: Autoexplicativo, pois ninguém precisa saber, é bom para a segurança.
Remover o Wlwmanifest link: Para quem usa o Windows Live Writer. Se não usa habilite.
Desativar Medidor de Força da Senha: Remove o arquivo de análise de senha de ser carregado em todo o site, quando somente é necessário em páginas de Login.
Remove Global Styles: Remove algumas linhas de código do Wordpress que parecem ter sido colocadas por engano na versão 5.9. Veja aqui.
11 – CDN. (Cloudflare)
*Notamos um erro quanto ao envio de e-mail do Gmail, quando o site está na Cloudflare, recomendamos que teste caso seu site esteja lá. | Erro corrigido, caso tenha, basta adicionar novamente todas as entradas do seu DNS da hospedagem lá na Cloudflare, precisam ser identicas.
Considere (Se ainda não usa) usar os Serviços da Cloudflare, o próprio Google Recomenda o uso de um serviço de CDN no seu site para deixar conforme os critérios de qualidade para ranqueamento.
Ponto também muito importante sobre como otimizar um site Wordpress e sobre como proteger e adicionar segurança a ele.
Aqui será preciso criar uma conta lá, adicionar seu site e alterar o DNS para os da Cloudflare, coisas que eles passam qual será e onde será alterado.
Leva até um dia para seu site ficar ok depois do procedimento de troca de DNS.
Após isso, podemos seguir com as configurações de otimização feitas lá dentro da Cloudflare agora:
— Aba segurança
A parte de segurança entra em otimização, não para acelerar o site, mas para evitar que alguém desacelere.
Vamos “bloquear” Bots e evitar que eles ocupem espaço no seu site.
Em SEGURANÇA > WAF crie regras de firewall para bloquear países que não vão te dar retorno, por exemplo:
— HSTS
Breve configuração feita no SSL/TLS > Certificados de Borda na aba HTTP Strict Transport Security (HSTS).
Status: Ativado.
Idade máxima: 6 meses. (Recomendada)
Incluir subdomínios: Ativado.
Pré-carga: Ativado.
— Regras de Cache
Aqui são 3 Regras que podemos adicionar no plano free, sendo o suficiente, porém precisamos entender uma questão. Cada projeto precisa que seja feita uma configuração diferente nas regras, e alguns deles a configuração pode afetar o site se não feita de maneira específica. Por Exemplo:
Em tutoriais vemos muito as pessoas ensinando fazer o “cache everything” que é cache de tudo, elementos estáticos e dinâmicos e caso você tenha um Woocommerce, por exemplo, vai notar que as sessões podem ficar cacheadas também, pode acontecer do seu carrinho ficar travado, de novos usuários entrarem em sessões de visitantes antigos, enfim, uma bagunça. E assim, são dados pessoais, não podem ser compartilhados assim. Então Tome cuidado com isso.
O mais correto é usar o “cache everything” APENAS para sites estáticos, Loja virtual ou sites dinâmicos pode ser usado o “Nível de cache: ignorar cadeia de caracteres de consulta”.
A Primeira regra é recomendada reservar para tirar o WP-ADMIN do cache, que ficaria https://seudominio.com.br/wp-admin/* e Aplicar nesta regra o Nível de cache: Ignorar – Desabilitar Desempenho – Desabilitar aplicativos
A segunda regra uso para remover o cache do AJAX, que pode ser útil para sites dinâmicos, mas não convém ao caso do Tutorial, já que a ideia é não fazer cache dinâmico.
Terceira Regra ou segunda no seu Caso será configurada dessa maneira:
Bônus 01 | Recaptcha vs Turnstile:
Recentemente fiz a troca do sistema de Recaptcha dos formulários pelo Turnstile da Cloudflare e tive um bom resultado pelo menos na nota do meu site. Uso o WPForms e fiz a troca pelo próprio plugin usando um tutorial.
Com Recaptcha.
Com Cloudflare.
Bônus 02 | Fontes:
Caso ainda tenha alguns problemas quanto a nota ou velocidade perceptivel, considere o seguinte:
- Carregue fontes localmente e use poucas e de preferência da mesma família, uma normal, outra bold, por exemplo.
- Habilite no Elementor ou em um plugin no qual você subiu suas fontes o estilo de fonte Opcional, assim seu site terá quanto antes o texto visível.
- Faça um preload das suas fontes.
Bônus 03 | Preload de imagens:
Faça um preload das imagens principais do seu site as adicionando dentro do Header do tema, ou usando um plugin para inserir códigos no cabeçalho de forma fácil.
<link rel=”preload” as=”image” href=”INSIRA O CAMINHO EM URL DA SUA IMAGEM” />
Como Otimizar um Site Wordpress: Resumo
- Otimize ou Troque a Hospedagem.
- Faça ajustes de velocidade no painel Wordpress.
- Otimize o Elementor ou seu Tema.
- Otimize a estrutura do site.
- Remova as animações JS.
- Elimine plugins inúteis.
- Limpe o Banco de dados.
- Instale e configure um plugin de cache.
- Otimize as imagens.
- Otimize com um plugin adicional como o Perfmatters.
- Use um serviço de CDN.
Todos os pontos acima estão inclusos nos pacotes de Otimização de Performance para Wordpress oferecidos pela WEBTOM.
Para uma boa configuração de como otimizar um site Wordpress os pontos acima são suficientemente bons.
Volto com atualizações !
Veja nosso Infográfico sobre como otimizar um Site Wordpress:
Guia feito para informar e passar nossos procedimentos de como otimizar um site Wordpress para ajudar vocês, não somos responsáveis pelos erros causados por suas alterações, se não estiver seguro e não tiver backup do seu site, não faça.
FAQ:
Otimização do WordPress pode quebrar meu site?
Sim, pois altera coisas estruturais e códigos, por isso faça a alteração e teste, sempre nesse ritmo, além de sempre manter um backup em mãos.
Preciso gastar para otimizar meu site?
Não necessáriamente, o plugin Litespeed é gratuito e já faz muito pela velocidade do seu site. Porém o Perfmatters é pago mas existem as versões conhecidas como GPL que são mais baratas, mas também mais limitadas.
