Melhorando a performance do Elementor com o WP Rocket

Dicas de melhoria para otimizar a performance do Elementor com o plugin WP Rocket.O Elementor é uma das ferramentas de criação de sites mais populares do WordPress. Ele oferece uma maneira fácil e intuitiva de criar sites modernos e responsivos, sem a necessidade de codificação.No entanto, como qualquer outra ferramenta, o Elementor pode ter seus problemas de performance. Neste artigo, vamos mostrar como melhorar a performance do Elementor usando o WP Rocket.WP Rocket é um plugin premium de cache e otimização do WordPress que oferece uma solução fácil para melhorar a velocidade do seu site. Ele vem com recursos avançados, como cache em disco, compressão Gzip, minificação de CSS e JavaScript e muito mais.Aqui apresentamos um passo a passo que recomendamos ao nossos clientes que utilizam o Elementor como construtor de páginas. Reforçamos que cada website é um caso diferente, então é importante avaliar bem a situação em cada cenário.

2f2d38a1 94d7 4538 a635 04375f25be6c 1

Cache

Ativar cache para dispositivos móveis: Ativado, sempre.

Arquivos de cache separados para dispositivos móveis: Ativar apenas se houver um tema específico para mobile, o que não costuma ter em sites responsivos.

Cache para usuá

rios logados: Se houver uma “área interna” ou uma “área de membros”, é recomendado Ativar.

Vida útil do cach

e: 30 dias. Se houverem muitos erros, reduza para 10 horas.

Otimização de arquivos

Minificar os arq

uivos CSS: Sempre ativo, a menos que cause erros ou quebre alguma coisa.

Combinar os arquivos CSS: Desativado, pois

não é recomendado para sites que usam HTTP/2 (a maioria atualmente).

Arquivos CSS excluídos: Deixe em branco.

Otimizar a entrega do CSS: Vale a pena tentar. O recomendado é usar a opção Carregar o CSS de forma assíncrona, que é forma mais estável de otimização. Remover o CSS não usado é um recurso ainda em fase de testes, mas que em alguns sites obtemos um grande aumento na velocidade. Se utilizado, é importante monitorar para evitar problemas.

É importante saber que o processo de otimização de entrega de CSS costuma causar o CLS (Cumulative Layout Shift, que é o deslocamento do conteúdo na tela). Se você conseguir identificar os elementos que se modificam, pode utilizar o campo Lista de CSS seguro para informar ao WP Rocket.

Minificar os arquivos Javascript: Sempre ativo, a menos que cause erros ou quebre alguma coisa.

Combinar os arquivos Javascript: Desativado, pois não é recomendado para sites que usam HTTP/2 (a maioria atualmente).

Arquivos Javascript Excluídos: Em caso de problema em algum carregamento minificado, informe aqui a URL dos arquivos que devem ser desconsiderados.

Adiar o carregamento do JavaScript: Ativar. Esse recurso é muito compatível com a instalação padrão do Elementor e Elementor Pro e não deve causar nenhum problema. Se sua configuração for mais complexa, com muitos plugins e addons, isso pode causar alguns problemas. Tente mantê-lo ativado adicionando os arquivos JS problemáticos à lista Arquivos JavaScript excluídos.

Atrasar a execução do JavaScript: Ativar. Este é o recurso do WP Rocket mais importante para o desempenho. Bastante compatível com o Elementor e Elementor Pro.

Se você tiver problemas com o website após ativar o atraso na execução do Javascript, você pode consultar a lista de exceções para plugins mantida pelo WP Rocket. Lá você pode pesquisar os plugins que utiliza e adicionar os arquivos já mapeados que costumam gerar problemas.

Mídia

LazyLoad: Ative tudo que tem aqui.

Imagens e iframes excluídos: Essa seção não pode ficar vazia. Para melhorar o LCP (Largest Contentful Paint, uma das métricas de Core Web Vitals) você precisa adicionar as imagens que são exibidas na “primeira dobra” do site, como a sua logo ou imagens de apoio. As imagens de fundo (background) não são afetadas pelo LazyLoad.

Adicionar dimensões de imagem faltando: Se o CLS de suas páginas estiverem maiores que zero, ative.

Pré-carregar

Ativar o Pré-Carregamento: Ativado, sempre.

Ativar o Pré-Carregamento em cache do Sitemap: Ativado, sempre.

Se você estiver usando algum plugin de SEO como RankMath ou Yoast, você verá algo como:

Sitemap XML do RankMath: Ativado, sempre.

Pré-carregar Links: Ativado, sempre.

URLs a pré-capturar: Aqui você informará as URLs que fazem requisições externas. Essas aqui eu costumo informar em sites que usam fontes do Google, Facebook Pixel e o Google Tag Manager:

//fonts.gstatic.com
//connect.facebook.net
//googletagmanager.com

Fontes a pré-carregar: Se estiver utilizando fontes auto-hospedadas, informe a URL, começando pela pasta “/wp-content”, por exemplo:

/wp-content/themes/your-theme/assets/fonts/font-file.woff2

Use com cuidado. Não faça o pré-carregamento de todas as fontes, apenas das que são exibidas na “primeira dobra”.

Regras Avançadas

Eu costumo adicionar aqui uma exceção em URLs Jamais em Cache, para evitar o cache nas páginas de Sitemap:

/sitemap(.*)

Banco de Dados

Oferece recursos para limpeza do banco de dados. Nós não utilizamos este recurso, mas caso utilize, faça backup antes de executar.

CDN

Se o servidor do seu site está localizado no Brasil e seu público-alvo é apenas no Brasil, é desnecessário. Para servidores no exterior é uma necessidade.

Heartbeat

Se seu servidor tem tamanho limitado, habilite e deixe os valores padrões.

Complementos

Utilize de acordo com a necessidade. Os complementos são autoexplicativos em sua maioria.

Otimização de Imagens

Aqui temos uma bela propaganda para o Imagify. É um excelente plugin para otimização de imagens, mas existem alternativas caso prefira utilizar outro.

Otimizando ao máximo a performance do seu Website

Se ainda assim, seguindo essas recomendações, ainda não obter um resultado satisfatório, você pode nos consultar para uma mentoria de otimização de performance, entrando em contato conosco.

Ter um site realmente rápido é resultado de muito trabalho, e do uso de ferramentas adequadas, como o WP Rocket.

Referências:

💬 Como posso ajudar ?